Preambula. P2P video suhbati asosda WebRTC Skype va boshqa aloqa vositalariga muqobildir. WebRTC-ga asoslangan p2p video chatining asosiy elementlari brauzer va aloqa serveri. P2P video chatlari - bu serverlar axborot oqimlarini uzatishda ishtirok etmaydigan, peer-to-peer video chatlari. Ma'lumot to'g'ridan-to'g'ri foydalanuvchilar brauzerlari o'rtasida (peering) qo'shimcha dasturlarsiz uzatiladi. Brauzerlardan tashqari, p2p video chatlarida foydalanuvchilarni ro'yxatdan o'tkazish, ular haqidagi ma'lumotlarni saqlash va foydalanuvchilar o'rtasida almashinuvni ta'minlash uchun mo'ljallangan aloqa serverlari ishlatiladi. Eng so'nggi WebRTC va HTML5 texnologiyalarini qo'llab-quvvatlovchi brauzerlar tezkor matnli xabarlar va fayllarni taqdim etish bilan bir qatorda IP tarmoqlari orqali ovozli va video aloqalarni ta'minlaydi.
Shunday qilib, veb-interfeysdagi chatlar, veb-chatlar, ovozli va video chatlar, IMS, VoIP - bu paketli kommutatsiyali tarmoqlar orqali onlayn aloqalarni ta'minlovchi xizmatlar. Odatda, aloqa xizmatlari foydalanuvchi qurilmalarida (shaxsiy kompyuterlar, smartfonlar va boshqalar) mijoz dasturlarini o'rnatishni yoki brauzerlarga plaginlar va kengaytmalarni o'rnatishni talab qiladi. Xizmatlar o'zlarining aloqa tarmoqlariga ega, ularning aksariyati mijoz-server arxitekturasi asosida qurilgan.
Aloqa xizmatlari - bu IMS bundan mustasno, bu erda ovozli, video, ma'lumotlar va matn kanallari birlashtirilmagan dasturlar. Har bir xizmatning tarmoqlari qo'llaniladi. Shuni ta'kidlash kerakki, ushbu dasturlar bir vaqtning o'zida bir nechta aloqa tarmoqlarida ishlay olmaydi, ya'ni. ilovalar, qoida tariqasida, bir-biri bilan o'zaro aloqada bo'la olmaydi, buning natijasida har bir aloqa tarmog'i uchun alohida dastur o'rnatilishi kerak.
Haqiqiy vaqtda aloqa xizmatlarini (suhbat, telefoniya, videokonferentsiyalar) birlashtirish muammosi, ya'ni. ovozli, video, ma'lumotlar kanallarini birlashtirish va ularga bitta dastur (brauzer) yordamida kirish peer-to-peerda yoki p2p video chatlari (peer-to-peer, point - to-nuqta) asosida webRTC protokoli... Aslida WebRTC-ni qo'llab-quvvatlovchi brauzer aloqa xizmatlari bilan ishlaydigan barcha foydalanuvchi qurilmalari (shaxsiy kompyuterlar, smartfonlar, iPad, IP-telefonlar, mobil telefonlar va boshqalar) uchun birlashtirilgan interfeysga aylanadi.
Aynan WebRTC brauzerda real vaqtda aloqani ta'minlaydigan barcha texnologiyalarni amalga oshirishni ta'minlaydi. P2p video-chatlarning mohiyati shundan iboratki, multimedia va matnli ma'lumotlar to'g'ridan-to'g'ri foydalanuvchilarning brauzerlari o'rtasida (masofadan ko'rib chiqish) server va qo'shimcha dasturlarning ishtirokisiz uzatiladi. Shunday qilib, brauzerlar nafaqat serverlarda saqlanadigan Internetning deyarli barcha axborot resurslariga kirish imkoniyatini yaratibgina qolmay, balki barcha real vaqtda aloqa xizmatlari va pochta xizmatlariga (ovozli pochta, elektron pochta, SMS va boshqalar) kirish vositasiga aylanadi.
P2p video chatlarining serverlari (aloqa serverlari) faqat foydalanuvchilarni ro'yxatdan o'tkazish, foydalanuvchilar haqidagi ma'lumotlarni saqlash va foydalanuvchilar brauzerlari o'rtasida ulanish (almashtirish) uchun mo'ljallangan. Birinchi p2p video chatlari flesh-texnologiyalar yordamida amalga oshirildi. Flash p2p video chatlari, masalan, ijtimoiy tarmoqlarda qo'llaniladi. Flash p2p video chatlari yuqori sifatli multimedia ma'lumotlarini uzatishni ta'minlamaydi. Bundan tashqari, mikrofon va videokameradan p2p fleshli video chatlarda ovozli va video oqimlarni chiqarish uchun veb-brauzerda flesh plagin o'rnatilgan bo'lishi kerak.
Ammo keyingi avlod telekommunikatsiya xizmatlariga quyidagilar kiradi veb-aloqafaqat ishlatadigan brauzerlar va aloqa serverlariqo'llab-quvvatlovchi webRTC protokollari va spetsifikatsiya HTML5... Bunday brauzer bilan jihozlangan har qanday foydalanuvchi qurilmasi (kompyuter, iPad, smartfon va boshqalar) yuqori sifatli ovozli va video qo'ng'iroqlarni, shuningdek tezkor matnli xabarlar va fayllarni uzatishni ta'minlay oladi.
Shunday qilib, veb-aloqa uchun yangi texnologiya (p2p chatlar, video chatlar) bu WebRTC protokoli. WebRTC HTML5, CSS3 va JavaScript bilan birgalikda turli xil veb-dasturlar yaratishga imkon beradi. WebRT veb-aloqalarni (peer-to-peer tarmoqlari) real vaqt rejimida peer-to-peer arxitekturasidan foydalangan holda tashkil etish uchun mo'ljallangan. WebRTC asosidagi P2P-chatlar fayllarni uzatish, shuningdek brauzerda tashqi qo'shimchalar va plaginlarni ishlatmasdan faqat veb-brauzerlardan foydalangan holda Internet orqali foydalanuvchilarning matnli, ovozli va video aloqalarini ta'minlaydi.
P2p chatlarida server faqat ikkita brauzer o'rtasida p2p aloqasini o'rnatish uchun ishlatiladi. HTML5, CSS3 va JavaScript WebRTC protokoli asosida p2p chatining mijoz tomonini yaratish uchun ishlatiladi. Mijoz dasturi WebRTC API orqali brauzerlar bilan o'zaro aloqada.
WebRTC uchta JavaScript API tomonidan amalga oshiriladi:
- RTCPeerConnection;
- MediaStream (getUserMedia);
- RTCDataChannel.
Brauzerlar ommaviy axborotni UDP orqali ishlaydigan SRTP orqali uzatadi. NAT Internet orqali p2p ulanishdan foydalanadigan NAT routerlari orqasida brauzerlar (mijozlar) uchun muammolar yaratganligi sababli, STUN NAT tarjimonlarini bosib o'tish uchun ishlatiladi. STUN - UDP transport protokoli ustida ishlaydigan mijoz-server protokoli. P2p chatlarida, qoida tariqasida, ommaviy STUN-server ishlatiladi va undan olingan ma'lumotlar NAT-ning orqasida bo'lsa, ikkita brauzer o'rtasida UDP ulanish uchun ishlatiladi.
WebRTC dasturlarini amalga oshirish misollari (p2p chatlar, ovozli va video veb-chatlar):
1. WebRTC asosida tayyorlangan P2P video chat Bistri (bir marta bosish bilan video chat, p2p chat) Bistri-da ochilishi mumkin. Bistri brauzerda qo'shimcha dasturlar va plaginlarni o'rnatmasdan ishlaydi. Ishning mohiyati quyidagicha: ko'rsatilgan havola yordamida p2p video chatini oching, ochilgan interfeysda ro'yxatdan o'tgandan so'ng, sheriklarni taklif qiling, so'ngra tengdosh-mijozlar ro'yxatidan tarmoqdagi sherikni tanlang va "video qo'ng'iroq" tugmachasini bosing.
Natijada MediaStream (getUserMedia) mikrofon + veb-kamerasini yozib oladi va server tanlangan sherik bilan signal signallarini almashadi. Signal xabarlarini almashgandan so'ng, PeerConnection API ovozli va video oqimlarini uzatish uchun kanallar yaratadi. Bundan tashqari, Bistri tezkor SMS va fayllarni uzatishni amalga oshiradi. Shakl. 1-da Bistri p2p video chat interfeysining skrinshoti ko'rsatilgan.
Shakl: 1.P2P video chat Bistri
2. Twelephone (p2p video chat, p2p chat, SIP Twelephone) - ushbu mijoz dasturi HTML5 va WebRTC asosida qurilgan bo'lib, u sizga ovozli va video qo'ng'iroqlarni amalga oshirish, shuningdek tezkor matnli xabarlarni uzatish, ya'ni. Twelephone tarkibiga test p2p chat, video chat va SIP Twelephone kiradi. Shuni ta'kidlash kerakki, Twelephone SIP protokolini qo'llab-quvvatlaydi va endi siz Twitter-dagi akkauntingizdan foydalanib SIP telefonlaridan ovozli va video qo'ng'iroqlarni amalga oshirishingiz va qabul qilishingiz mumkin. Bundan tashqari, matnli xabarlarni mikrofon orqali ovoz bilan kiritish mumkin va ovozni aniqlash dasturi "Xabar yuborish" qatoriga matn kiritadi.
Twelephone - bu 25-versiyadan boshlab qo'shimcha dasturiy ta'minotsiz, Google Chrome brauzeri asosida ishlaydigan veb-telefoniya. Twelephone Kris Mattyu tomonidan ishlab chiqilgan. Twelephone backend Node.js. ustiga o'rnatilgan. Server (aloqa serveri) faqat ikkita brauzer yoki WebRTC mijozlari o'rtasida p2p aloqasini o'rnatish uchun ishlatiladi. Twelephone ilovasi o'zining avtorizatsiya vositalariga ega emas, lekin Twitter-dagi akkauntga (akkauntga) ulanishga qaratilgan.
Shakl. 2 pwep video chat interfeysi Twelephone-ning skrinshotini ko'rsatadi.
Shakl: 2. P2P twelephone
3. Conversat.io p2p video suhbati WebRTC va HTML5 so'nggi texnologiyalariga asoslangan. Conversat video suhbati SimpleWebRTC kutubxonasi asosida ishlab chiqilgan va bitta xonada 6 nafar tengdosh-mijozlar bilan muloqot qilish uchun mo'ljallangan (aloqa uchun "Suhbatga nom berish" qatoriga tengdosh-mijozlar uchun umumiy xonaning nomini kiriting). Conversat P2P video suhbati foydalanuvchilarga aloqa serverida ro'yxatdan o'tmasdan aloqa xizmatlarini taqdim etadi. Shakl. 3-da Conversat p2p video chat interfeysining skrinshoti ko'rsatilgan.
Shakl: 3. Conversat.io guruhi P2P video suhbati
WebRTC asosidagi P2P video chatlarida ishtirok etish uchun foydalanuvchilarda WebRTC protokoli va HTML5 spetsifikatsiyasini qo'llab-quvvatlovchi brauzer bo'lishi kerak. Hozirda 25-versiyadan va Mozilla Firefox Nightly-dan boshlangan Google Chrome brauzerlari WebRTC protokoli va HTML5 spetsifikatsiyasini qo'llab-quvvatlamoqda. WebRTC dasturlari tasvir va tovush uzatish sifati jihatidan Flash dasturlaridan ustundir.
WebRTC (Web Real-Time Communications) - bu veb-ilovalar va saytlarga audio va / yoki video media oqimlarini olish va tanlab uzatish, shuningdek, vositachilarga ehtiyoj sezmasdan brauzerlar o'rtasida o'zboshimchalik bilan ma'lumotlar almashish imkonini beradigan texnologiya. WebRTC texnologiyasi o'z ichiga olgan standartlar to'plami foydalanuvchiga plaginlarni yoki boshqa biron bir boshqa dasturiy ta'minotni o'rnatishni talab qilmasdan ma'lumotlar almashinuvi va "peer-to-peer" telekonferentsiyalariga imkon beradi.
WebRTC bir nechta o'zaro bog'liq dasturlash interfeyslari (API) va birgalikda ishlaydigan protokollardan iborat. Bu erda topilgan hujjatlar sizga WebRTC asoslarini tushunishga, ma'lumotlar va ommaviy axborot vositalariga ulanishni o'rnatish va ulardan foydalanishni va boshqalarni tushunishga yordam beradi.
Moslik
WebRTC dasturini amalga oshirishda va har bir brauzerda WebRTC funktsiyalari mavjud ekan, biz sizning kodingiz ustida ishlashni boshlashdan oldin Google-dan Adapter.js polyfill kutubxonasidan foydalanishni tavsiya etamiz.
Adapter.js WebRTC dasturidagi farqlarni uni qo'llab-quvvatlovchi kontekstlar orasida muammosiz qo'shilish uchun takozlar va ko'pburchaklardan foydalanadi. Adapter.js shuningdek, sotuvchi prefikslari va boshqa mulk nomlari farqlarini ko'rib chiqadi, natijada WebRTC bilan rivojlanish eng oson natijaga olib keladi. Kutubxona NPM to'plami sifatida ham mavjud.
Adapter.js kutubxonasini yanada ko'proq o'rganish uchun bir ko'z tashlang.
WebRTC tushunchalari va ulardan foydalanish
WebRTC ko'p maqsadli va shu bilan birga Internet uchun audio va videokonferentsiyalar, fayllarni almashish, ekranni yozib olish, identifikatsiyani boshqarish va eski telefon tizimlarining o'zaro ishlashini qo'llab-quvvatlashni o'z ichiga olgan DTMF terish ohanglarini qo'llab-quvvatlashni o'z ichiga olgan kuchli multimedia imkoniyatlarini taqdim etadi. Tugunlar orasidagi aloqalarni maxsus drayverlar yoki plaginlardan foydalanmasdan va ko'pincha oraliq xizmatlarsiz yaratish mumkin.
Ikki tugun orasidagi aloqa RTCPeerConnection interfeysining ob'ekti sifatida namoyish etiladi. RTCPeerConnection ob'ekti yordamida ulanish o'rnatilgandan va ochilgandan so'ng, ulanishga media oqimlari (MediaStream s) va / yoki ma'lumotlar kanallari (RTCDataChannel s) qo'shilishi mumkin.
Media oqimlari har qanday media-treklardan (treklardan) iborat bo'lishi mumkin. MediaStreamTrack interfeysidagi ob'ektlar bilan ifodalangan ushbu treklar audio, video, matn (subtitr yoki bob sarlavhalari kabi) kabi bir yoki bir nechta ommaviy axborot vositalarini o'z ichiga olishi mumkin. Aksariyat oqimlar kamida bitta audio trekdan (bitta audio trekdan) yoki video trekdan iborat bo'lib, oqim sifatida yuborilishi va qabul qilinishi mumkin (real vaqtda media) yoki faylga saqlanishi mumkin.
Shuningdek, siz RTCDataChannel interfeysi ob'ekti yordamida o'zboshimchalik bilan ma'lumotlar almashish uchun ikkita tugun o'rtasidagi aloqadan foydalanishingiz mumkin, bu xizmat ma'lumotlarini uzatish, ma'lumotlar almashinuvi, o'yin holati paketlari, fayllarni uzatish yoki yopiq ma'lumotlar uzatish kanallari uchun ishlatilishi mumkin.
batafsil ma'lumot va kerakli qo'llanmalar va o'quv qo'llanmalariga havolalar
WebRTC interfeyslari
WebRTC turli xil vazifalarni bajarish uchun birgalikda ishlaydigan interfeyslarni taqdim etishi sababli ularni toifalarga ajratdik. Tezkor navigatsiya uchun yon panel alifbo indeksiga qarang.
Ulanishni sozlash va boshqarish
Ushbu interfeyslar WebRTC ulanishlarini sozlash, ochish va boshqarish uchun ishlatiladi. Ular ikki tomonlama multimedia aloqasini o'rnatish uchun eng yaxshi konfiguratsiyani tanlash uchun har bir tugunning imkoniyatlari to'g'risida ma'lumot almashish uchun ishlatiladigan peer-to-media aloqalarini, ma'lumotlar kanallarini va interfeyslarni aks ettiradi.
RTCPeerConnection mahalliy kompyuter va masofaviy xost o'rtasidagi WebRTC aloqasini ifodalaydi. Ikki tugun o'rtasida ma'lumotlarni muvaffaqiyatli uzatishni boshqarish uchun foydalaniladi. RTCSessionDescription sessiya parametrlarini ifodalaydi. Har bir RTCSessionDescription muzokaralar jarayonining qaysi qismini (taklif / javob) tavsiflovchi turini tavsifini va sessiya uchun SDP-tavsiflovchini o'z ichiga oladi. RTCIceCandidate Bu RTCPeerConnection-ni o'rnatish uchun Internetga ulanish (ICE) server nomzodi. RTCIceTransport Internetga ulanish vositasi (ICE) haqida ma'lumot beradi. RTCPeerConnectionIceEvent ICE nomzodlari uchun sodir bo'lgan voqealarni, odatda RTCPeerConnection-ni aks ettiradi. Ushbu voqea ob'ektiga bitta tur beriladi: icecandidate. RTCRtpSender RTCPeerConnection tipidagi ob'ekt uchun MediaStreamTrack turi ob'ekti orqali sudralishni va ma'lumotlarni uzatishni boshqaradi. RTCRtpReceiver RTCPeerConnection ob'ekti uchun MediaStreamTrack ob'ekti orqali ma'lumotlarni qabul qilish va dekodlashni boshqaradi. RTCTrackEvent yangi kiruvchi MediaStreamTrack ob'ekti yaratilganligini va RTCPeerConnection ob'ektiga RTCRtpReceiver ob'ekti qo'shilganligini bildiradi. RTCCertificate RTCPeerConnection ob'ektidan foydalanadigan sertifikatni anglatadi. RTCDataChannel ikkita ulanish tuguni orasidagi ikki yo'nalishli ma'lumot kanalini ifodalaydi. RTCDataChannelEvent RTCDataChannel ob'ekti RTCPeerConnection ma'lumotlar kanali ob'ekti bilan biriktirilganda paydo bo'ladigan voqealarni aks ettiradi. RTCDTMFSender RTCPeerConnection ob'ekti uchun ikki tonna ko'p chastotali (DTMF) signalizatsiyani kodlash va uzatishni boshqaradi. RTCDTMFToneChangeEvent kiruvchi Dual Tone Multi-Frequency (DTMF) ohangini o'zgartirish hodisasini bildiradi. Ushbu hodisa pufakchaga ega emas (boshqacha ko'rsatilmagan bo'lsa) va bekor qilinmaydi (boshqacha ko'rsatilmagan bo'lsa). RTCStatsReport asenkron ravishda MediaStreamTrack tipidagi o'tgan ob'ekt uchun holat haqida xabar beradi. RTCIdentityProviderRegistrar Shaxsiy identifikatorni (idP) ro'yxatdan o'tkazadi. RTCIdentityProvider brauzerda shaxs to'g'risidagi deklaratsiyani yaratish yoki tasdiqlashni so'rashga imkon beradi. RTCIdentityAssertion joriy ulanishning masofaviy xost identifikatorini ifodalaydi. Agar tugun hali o'rnatilmagan va tasdiqlanmagan bo'lsa, interfeysga mos yozuvlar null qiymatini beradi. O'rnatishdan keyin o'zgarmaydi. RTCIdentityEvent shaxsni tasdiqlovchi (idP) voqea ob'ekti tomonidan identifikatsiya deklaratsiyasini ifodalaydi. RTCPeerConnection tipidagi ob'ekt hodisasi. Ushbu tadbirga bitta tur, identifikatsiya natijasi beriladi. RTCIdentityErrorEvent identifikator provayderi (IDP) bilan bog'liq bo'lgan xato hodisasi ob'ektini anglatadi. RTCPeerConnection turidagi ob'ekt hodisasi. Ushbu hodisaga ikki turdagi xatolar yuborildi: idpassertionerror va idpvalidationerror.Qo'llanmalar
WebRTC arxitekturasiga umumiy nuqtai nazardan API ostida dasturchilar WebRTC-ni yaratish va undan foydalanishda foydalanadigan tarmoq protokollari va ulanish standartlari to'plamidir. Ushbu sharh ushbu standartlarning vitrini. WebRTC o'zboshimchalik bilan ma'lumotlarni, audio, video oqimlarni yoki ularning har qanday birikmasini brauzerda uzatish uchun xost-xost aloqasini o'rnatishga imkon beradi. Ushbu maqolada biz WebRTC sessiyasining hayotini ko'rib chiqamiz, aloqani o'rnatishdan va u kerak bo'lmaguncha tugaguniga qadar davom etamiz. WebRTC API-ga umumiy nuqtai WebRTC bir-biriga bog'langan bir nechta dasturiy interfeyslardan (API) va ikki yoki undan ortiq tugunlar o'rtasida ma'lumotlar almashinuvi va media oqimlarini qo'llab-quvvatlash uchun birgalikda ishlaydigan protokollardan iborat. Ushbu maqola ushbu APIlarning har biri va ularning maqsadi haqida tezkor ma'lumot beradi. WebRTC asoslari Ushbu maqola o'zaro faoliyat brauzer RTC dasturini yaratishda sizga yordam beradi. Ushbu maqolaning oxiriga kelib, siz birma-bir ishlaydigan ma'lumotlar va ommaviy axborot vositalariga ega bo'lishingiz kerak. WebRTC protokollari Ushbu maqola protokollarni taqdim etadi, qo'shimcha ravishda WebRTC API-si yaratilgan. Ushbu qo'llanmada tugundan-tugunga ulanish va bog'langanlardan qanday foydalanishingiz mumkinligi tasvirlanganBrauzerdan qo'ng'iroq qilish texnologiyalari ko'p yillardan beri mavjud: Java, ActiveX, Adobe Flash ... So'nggi bir necha yil ichida plaginlar va chap qo'lli virtual mashinalar qulaylik bilan porlamasligi aniq bo'ldi (nega men umuman nimadir o'rnatishim kerak?) Va, eng muhimi, xavfsizlik ... Nima qilsa bo'ladi? Chiqish bor!
So'nggi paytgacha IP-telefoniya yoki video uchun bir nechta protokollar IP-tarmoqlarda ishlatilgan: H.323 va MGCP, Jabber / Jingle (Gtalkda ishlatilgan) sahnani tark etadigan eng keng tarqalgan protokol SIP, Adobe RTMP * va, albatta, mulkiy Skype. Google tomonidan boshlangan WebRTC loyihasi barcha softfonlarni, shu jumladan Skype-ni keraksiz holga keltirib, IP va veb-telefoniya dunyosida inqilob qilishga harakat qilmoqda. WebRTC nafaqat deyarli barcha qurilmalarda o'rnatilgan barcha brauzer ichidagi aloqa imkoniyatlarini amalga oshiribgina qolmay, balki bir vaqtning o'zida brauzer foydalanuvchilari o'rtasidagi umumiy muammolarni hal qilishga harakat qiladi (turli xil ma'lumotlar almashinuvi, ekranlarni translyatsiya qilish, hujjatlar bilan hamkorlik qilish va boshqa ko'p narsalar).
Veb-ishlab chiquvchi tomondan WebRTC
Veb-ishlab chiquvchi nuqtai nazaridan WebRTC ikkita asosiy qismdan iborat:
- mahalliy manbalardan (kamera, mikrofon yoki mahalliy kompyuter ekrani) media oqimlarini boshqarish MediaStream ob'ektini qaytaradigan navigator.getUserMedia usuli bilan amalga oshiriladi;
- media-oqimlarni hosil qiluvchi qurilmalar o'rtasidagi o'zaro aloqa, shu jumladan aloqa usullarini aniqlash va ularni to'g'ridan-to'g'ri uzatish - RTCPeerConnection ob'ektlari (audio va video oqimlarini yuborish va qabul qilish uchun) va RTCDataChannel (brauzerdan ma'lumotlarni yuborish va qabul qilish uchun).
Nima qilamiz?
Veb-soketlardan foydalangan holda WebRTC-ga asoslangan brauzerlar o'rtasida eng oddiy ko'p foydalanuvchili video suhbatni qanday tashkil qilishni aniqlaymiz. Chrome / Chromium-da eksperimentlarni boshlaymiz, chunki WebRTC bo'yicha eng ilg'or brauzerlar, garchi 24-iyun kuni chiqarilgan Firefox 22 deyarli ularga ergashdi. Aytishim kerakki, standart hali qabul qilinmagan va API versiyadan versiyaga o'zgarishi mumkin. Barcha misollar Chromium 28-da sinovdan o'tkazildi. Oddiylik uchun kodning tozaligi va brauzerlarning mosligini kuzatmaymiz.
MediaStream
Birinchi va eng sodda WebRTC komponenti MediaStream hisoblanadi. Bu brauzerga mahalliy kompyuterning kamerasi va mikrofonidan media-oqimlarga kirish imkoniyatini beradi. Buning uchun Chrome-da siz navigator.webkitGetUserMedia () funktsiyasini chaqirishingiz kerak (standart hali tugallanmaganligi sababli barcha funktsiyalar prefiks bilan birga keladi va Firefox-da xuddi shu funktsiya navigator.mozGetUserMedia ()) deb nomlanadi. Qo'ng'iroq qilganingizda foydalanuvchidan kamera va mikrofonga kirish uchun ruxsat so'raladi. Qo'ng'iroqni foydalanuvchi o'z roziligini berganidan keyingina davom ettirish mumkin bo'ladi. Kerakli media oqimining parametrlari va ikkita qayta qo'ng'iroq qilish funktsiyasi ushbu funktsiya parametrlari sifatida qabul qilinadi: birinchisi kamera / mikrofonga muvaffaqiyatli kirish, ikkinchisi - xato bo'lsa. Birinchidan, tugma va element bilan HTML rtctest1.html faylini yarataylik
Microsoft CU-RTC-Veb
Agar Google-ning tashabbusiga javoban darhol CU-RTC-Web (html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web.htm) nomli o'zining nostandart versiyasini chiqarmagan bo'lsa, Microsoft Microsoft bo'lolmaydi. IE ulushi allaqachon kichik bo'lgan tobora kamayib borayotgan bo'lsa-da, Skype-dan foydalanuvchilar soni Microsoft-ga Google-ni siqib chiqarishga umid bag'ishlaydi va ushbu standart Skype-ning brauzer versiyasida qo'llaniladi deb taxmin qilish mumkin. Google standarti birinchi navbatda brauzerlar o'rtasidagi aloqaga qaratilgan; Shu bilan birga, ovozli trafikning asosiy qismi hanuzgacha oddiy telefon tarmog'ida qolmoqda va u va IP tarmoqlari o'rtasidagi shlyuzlar nafaqat foydalanishni osonlashtirish yoki tezroq tarqatish uchun, balki ko'proq o'yinchilarga ularni rivojlantirishga imkon beradigan monetizatsiya vositasi sifatida ham zarur. ... Boshqa standartning paydo bo'lishi nafaqat ishlab chiquvchilarga bir vaqtning o'zida ikkita mos kelmaydigan texnologiyalarni qo'llab-quvvatlashga bo'lgan yoqimsiz ehtiyojni keltirib chiqarishi mumkin, balki uzoq muddatda foydalanuvchiga mumkin bo'lgan funktsional imkoniyatlarni va mavjud texnik echimlarni yanada kengroq tanlashga imkon beradi. Yashasak ko'ramiz.
Mahalliy oqim yoqilmoqda
Ichki teglar HTML-faylimiz, keling, media-oqim uchun global o'zgaruvchini e'lon qilamiz:
Var localStream \u003d null;
GetUserMedia usuli uchun birinchi parametr so'ralgan media oqimining parametrlarini ko'rsatishi kerak - masalan, faqat audio yoki videoni yoqing:
Var streamConstraints \u003d ("audio": rost, "video": rost); // Ham audio, ham videoga ruxsat so'rash
Yoki qo'shimcha parametrlarni ko'rsating:
Var streamConstraints \u003d ("audio": true, "video": ("majburiy": ("maxWidth": "320", "maxHeight": "240", "maxFrameRate": "5"), "ixtiyoriy" :) );
GetUserMedia usulining ikkinchi parametri qayta qo'ng'iroq qilish funktsiyasidan o'tishi kerak, agar u muvaffaqiyatli bajarilsa chaqiriladi:
GetUserMedia_success funktsiyasi (oqim) (console.log ("getUserMedia_success ():", oqim); localVideo1.src \u003d URL.createObjectURL (oqim); // media oqimini HTML elementiga ulang
Uchinchi parametr - xatolik yuz berganda chaqiriladigan xatolarni qayta ishlash funktsiyasidir
GetUserMedia_error funktsiyasi (xato) (console.log ("getUserMedia_error ():", xato);)
Haqiqatan ham getUserMedia usulini chaqirish - birinchi tugma bosilganda mikrofon va kameraga kirishni so'rash
GetUserMedia_click () funktsiyasi (console.log ("getUserMedia_click ()"); navigator.webkitGetUserMedia (streamConstraints, getUserMedia_success, getUserMedia_error);)
Mahalliy ravishda ochilgan fayldan media oqimiga kirish imkoni yo'q. Agar biz buni bajarishga harakat qilsak, xato bo'ladi:
NavigatorUserMediaError (kod: 1, PERMISSION_DENIED: 1) "
Olingan faylni serverga yuklaymiz, brauzerda ochamiz va paydo bo'lgan so'rovga binoan kamera va mikrofonga kirishga ruxsat beramiz.
Chrome kiradigan qurilmalarni Sozlamalar, Kengaytirilgan sozlamalarni ko'rsatish havolasi, Maxfiylik bo'limi, Tarkib tugmasi orqali tanlashingiz mumkin. Firefox va Opera brauzerlarida kirish uchun ruxsat berilganda to'g'ridan-to'g'ri ochiladigan ro'yxatdan qurilmalar tanlanadi.
HTTP protokoli bilan har safar sahifa yuklangandan so'ng media oqimiga kirishda ruxsat so'raladi. HTTPS-ga o'tish so'rovni bir marta ko'rsatishga imkon beradi, faqat media oqimiga birinchi kirish paytida.
Xatcho'pdagi piktogramma va manzil satrining o'ng tomonidagi kamera belgisiga e'tibor bering:
RTCMediaConnection
RTCMediaConnection - bu ishtirokchilar o'rtasida tarmoq orqali media-oqimlarni o'rnatish va uzatish uchun mo'ljallangan ob'ekt. Bundan tashqari, ushbu ob'ekt media-sessiya (SDP) tavsifini yaratish, NAT yoki xavfsizlik devorlarini (mahalliy va STUN-dan foydalangan holda) o'tish va TURN-server bilan o'zaro aloqada bo'lish uchun ICE nomzodlari to'g'risida ma'lumot olish uchun javobgardir. Har bir ishtirokchi har bir ulanish uchun bitta RTCMediaConnection-ga ega bo'lishi kerak. Media oqimlari shifrlangan SRTP protokoli yordamida uzatiladi.
Serverlarni burish
ICE nomzodlari uch xil: host, srflx va relay. Xost mahalliy ravishda olingan ma'lumotlarni o'z ichiga oladi, srflx - tugunning tashqi serverga qanday qarashini (STUN) va o'rni - TURN server orqali trafikni proksi qilish uchun ma'lumot. Agar bizning tugunimiz NAT-ning orqasida bo'lsa, unda xost-nomzodlar mahalliy manzillarni o'z ichiga oladi va foydasiz bo'ladi, srflx nomzodlari faqat NAT-ning ayrim turlarida yordam beradi va o'rni qidiruv server orqali trafikni o'tkazishda so'nggi umid bo'ladi.
192.168.1.37 manzili va port udp / 34022 bilan mezbon turidagi ICE nomzodiga misol:
A \u003d nomzod: 337499441 2 udp 2113937151 192.168.1.37 34022 typ host generation 0
STUN / TURN serverlarini ko'rsatish uchun umumiy format:
Var serverlari \u003d ("iceServers": [("url": "stun: stun.stunprotocol.org: 3478"), ("url": "turn: [elektron pochta bilan himoyalangan]: port "," hisobga olish ma'lumotlari ":" parol ")]);
Internetda ko'plab ommaviy STUN-serverlar mavjud. Masalan, katta ro'yxat mavjud. Afsuski, ular juda kam muammolarni hal qilishadi. STUN-dan farqli o'laroq, ommaviy TURN serverlari deyarli yo'q. Buning sababi, TURN server o'zi orqali tarmoq kanalini va serverning o'zini sezilarli darajada yuklashi mumkin bo'lgan media-oqimlardan o'tadi. Shuning uchun TURN serverlariga ulanishning eng oson usuli bu uni o'zingizning o'rnatishingizdir (ommaviy IP zarurligi aniq). Barcha serverlardan rfc5766-turn-server mening fikrimcha eng yaxshisi. Hatto buning uchun Amazon EC2 uchun tayyor tasvir mavjud.
TURN bilan hamma narsa biz xohlagan darajada yaxshi emas, lekin faol rivojlanish davom etmoqda va umid qilamanki, bir muncha vaqt o'tgach, WebRTC, agar Skype-ga manzil tarjimasi (NAT) va xavfsizlik devorlari orqali o'tish sifati bilan teng bo'lmasa, unda hech bo'lmaganda sezilarli yaqinlashadi.
RTCMediaConnection ulanishni o'rnatish uchun nazorat ma'lumotlarini almashish uchun qo'shimcha mexanizmni talab qiladi - garchi u ushbu ma'lumotlarni shakllantirsa ham, uni uzatmaydi va boshqa ishtirokchilarga uzatish alohida amalga oshirilishi kerak.
O'tkazish usulini tanlash ishlab chiquvchiga beriladi - hatto qo'lda. Kerakli ma'lumotlar almashinuvi sodir bo'lgandan so'ng, RTCMediaConnection avtomatik ravishda media-oqimlarni o'rnatadi (agar iloji bo'lsa, albatta).
Taklif-javob modeli
Media oqimlarini o'rnatish va o'zgartirish uchun taklif / javob modeli (RFC3264 da tavsiflangan) va sessiyani tavsiflash protokoli (SDP) ishlatiladi. Ular SIP protokoli tomonidan ham qo'llaniladi. Ushbu modelda ikkita agent ajratiladi: Taklif qiluvchi - yangisini yaratish yoki mavjudini o'zgartirish uchun sessiyaning SDP tavsifini ishlab chiqaruvchi (SDPni taklif qilish) va Javob beruvchisi - boshqa agentdan sessiyaning SDP tavsifini olgan va unga o'z sessiyasining tavsifi bilan javob bergan. SDP). Shu bilan birga, spetsifikatsiya uchun yuqori darajadagi protokol mavjud bo'lishi kerak (masalan, SIP yoki uning veb-rozetkalari orqali, bizning holatimizda bo'lgani kabi), bu SDPni agentlar o'rtasida o'tkazish uchun javobgardir.
Ikki RTCMediaConnection o'rtasida media-oqimlarni muvaffaqiyatli o'rnatishlari uchun qanday ma'lumotlarni uzatish kerak:
- Ulanishni boshlagan birinchi ishtirokchi O'tkazishni taklif qiladi, unda u SDP ma'lumotlar strukturasini uzatadi (xuddi shu protokol SIPda xuddi shu maqsadda ishlatiladi), u uzatishni boshlaydigan media oqimining mumkin bo'lgan xususiyatlarini tavsiflaydi. Ushbu ma'lumotlar bloki ikkinchi ishtirokchiga o'tkazilishi kerak. Ikkinchi ishtirokchi SDP bilan Javobni shakllantiradi va birinchisiga yuboradi.
- Birinchi va ikkinchi ishtirokchilar ham ICE nomzodlarini aniqlash tartibini amalga oshiradilar, uning yordamida ikkinchi ishtirokchi ularga media-oqimini uzatishi mumkin. Nomzodlar aniqlanganda, ular haqidagi ma'lumotlar boshqa ishtirokchiga etkazilishi kerak.
Taklifni shakllantirish
Taklifni shakllantirish uchun bizga ikkita funktsiya kerak. Agar u muvaffaqiyatli shakllangan bo'lsa, birinchisi chaqiriladi. CreateOffer () usulining ikkinchi parametri - bu qayta ishlash funktsiyasi, uni bajarish paytida xatolik yuz berganda chaqiriladi (lokal oqim allaqachon mavjud bo'lsa).
Bundan tashqari, sizga ikkita voqea ishlovchilari kerak: yangi ICE nomzodini aniqlashda onicecandidate va uzoqdan media oqimini ulashda onaddstream. Faylimizga qaytamiz. Elementlari bo'lgan qatorlardan keyin HTML-ga qo'shing
Va element bilan chiziqdan keyin
Shuningdek, JavaScript kodining boshida biz RTCPeerConnection uchun global o'zgaruvchini e'lon qilamiz:
Var pc1;
RTCPeerConnection konstruktoriga qo'ng'iroq qilishda siz STUN / TURN serverlarini ko'rsatishingiz kerak. Qo'shimcha ma'lumot uchun yon panelni ko'ring; barcha ishtirokchilar bitta tarmoqda bo'lishlari shart emas.
Var-serverlar \u003d null;
SDP taklifini tayyorlash parametrlari
Var offerConstraints \u003d ();
CreateOffer () usulining birinchi parametri - bu Taklif muvaffaqiyatli ishlab chiqilganda chaqiriladigan qayta qo'ng'iroq qilish funktsiyasi.
Funktsiya pc1_createOffer_success (desc) (console.log ("pc1_createOffer_success (): \\ ndesc.sdp: \\ n" + desc.sdp + "desc:", desc); pc1.setLocalDescription (desc); // SD-ni RTCPeerConner tomonidan o'chirib qo'ying setLocalDescription usulidan foydalangan holda. // Uzoq tomon Javob SDP-ni yuborganida, setRemoteDescription usuli yordamida o'rnatilishi kerak bo'ladi // Ikkinchi tomon amalga oshirilmaguncha, hech narsa qilmang // pc2_receivedOffer (desc);)
Ikkinchi parametr - bu xato bo'lgan taqdirda chaqiriladigan qayta qo'ng'iroq qilish funktsiyasi
Pc1_createOffer_error funktsiyasi (xato) (console.log ("pc1_createOffer_success_error (): error:", error);)
Keling, ICE nomzodlari aniqlanganidek qabul qilinadigan qayta qo'ng'iroq qilish funktsiyasini e'lon qilaylik:
Pc1_onicecandidate (event) funktsiyasi (agar (event.candidate) (console.log ("pc1_onicecandidate (): \\ n" + event.candidate.candidate.replace ("\\ r \\ n", ""), event.candidate); // Ikkinchi tomon amalga oshirilmaguncha, hech narsa qilmang // pc2.addIceCandidate (yangi RTCIceCandidate (event.candidate));))
Bundan tashqari, uzoqdan media oqimini qo'shish uchun qayta qo'ng'iroq qilish funktsiyasi (kelajak uchun, chunki bizda hozircha bitta RTCPeerConnection mavjud):
Funktsiya pc1_onaddstream (voqea) (console.log ("pc_onaddstream ()"); remoteVideo1.src \u003d URL.createObjectURL (event.stream);)
"CreateOffer" tugmachasini bosganingizda RTCPeerConnection-ni yarating, onicecandidate va onaddstream usullarini o'rnating va createOffer () usulini chaqirib Offer SDP-ni shakllantirishni so'rang:
Funktsiya createOffer_click () (console.log ("createOffer_click ()"); pc1 \u003d yangi webkitRTCPeerConnection (serverlar); // RTCPeerConnection pc1.onicecandidate \u003d pc1_onicecandidate \u003d pc1_onicecandidate; // ICE nomzodlarini qayta ishlash uchun qayta qo'ng'iroq funktsiyasi pc1_). // Orqadan media-oqim paydo bo'lganda chaqiriladigan chaqiruv-funktsiya. Hozircha mavjud emas pc1.addStream (localStream); // Mahalliy media oqimini uzatamiz (u allaqachon qabul qilingan deb taxmin qilamiz) pc1.createOffer (// Va biz aslida taklifni shakllantirishni talab qilamiz pc1_createOffer_success , pc1_createOffer_error, offerConstraints);)
Faylni rtctest2.html sifatida saqlang, serverga yuklang, brauzerda oching va konsolda uning ishlashi davomida qanday ma'lumotlar hosil bo'lishini ko'ring. Ikkinchi video hali chiqmaydi, chunki bitta ishtirokchi bor. Eslatib o'tamiz, SDP - bu media-sessiya parametrlarining tavsifi, mavjud kodeklar, media-oqimlar va ICE nomzodlari - bu ishtirokchiga ulanishning mumkin bo'lgan variantlari.
Javob SDPni shakllantirish va ICE nomzodlarini almashtirish
Taklif SDP-si ham, ICE nomzodlarining har biri boshqa tomonga o'tkazilishi kerak va u erda ularni RTCPeerConnection-dan olganingizdan so'ng, Taklif SDP uchun setRemoteDescript usullarini chaqiring va har bir ICE nomzodi uchun addIceCandidate uzoq tomondan qabul qiling; Javob SDP va masofali ICE nomzodlari uchun ham teskari. Javob SDP o'zi Taklifga o'xshash shakllanadi; farq shundaki, createOffer usuli emas, balki createAnswer usuli chaqiriladi va ushbu RTCPeerConnection-dan oldin, qo'ng'iroq qiluvchidan olingan SDP taklifi setRemoteDescription usuli bilan o'tkaziladi.
HTMLga yana bir video element qo'shamiz:
Va birinchisi ostida ikkinchi RTCPeerConnection uchun global o'zgaruvchi:
Var PC2;
SDP-ni qayta ishlashni taklif qilish va javob berish
Javob SDP ishlab chiqarish Taklifga juda o'xshaydi. Taklifga o'xshash tarzda Javobni muvaffaqiyatli shakllantirishga chaqirilgan qayta qo'ng'iroq qilish funktsiyasida biz mahalliy tavsif beramiz va qabul qilingan Javob SDP-ni birinchi ishtirokchiga etkazamiz:
Funktsiya pc2_createAnswer_success (desc) (pc2.setLocalDescription (desc); console.log ("pc2_createAnswer_success ()", desc.sdp); pc1.setRemoteDescription (desc);)
Javobni shakllantirishda xatolik yuz berganda chaqirilgan qayta qo'ng'iroq qilish funktsiyasi Taklifga to'liq o'xshaydi:
Pc2_createAnswer_error funktsiyasi (xato) (console.log ("pc2_createAnswer_error ():", xato);)
Javob SDP ni yaratish parametrlari:
Var answerConstraints \u003d ("majburiy": ("OfferToReceiveAudio": rost, "OfferToReceiveVideo": rost));
Taklif ikkinchi ishtirokchi tomonidan qabul qilinganda, RTCPeerConnection-ni yarating va Taklifga o'xshash javob bering:
Pc2_receivedOffer (desc) funktsiyasi (console.log ("pc2_receiveOffer ()", desc); // Birinchi pc2 \u003d new webkitRTCPeerConnection (serverlar) ga o'xshash ikkinchi ishtirokchi uchun RTCPeerConnection ob'ekti yarating; pc2.onicecandidate \u003d pc2; pc2.onicecandidate \u003d pc2; ICE nomzodi pc2.onaddstream \u003d pc_onaddstream; // Oqim paydo bo'lganda, uni HTML-ga ulang
Bizning misolimiz doirasida SDP taklifini birinchi ishtirokchidan ikkinchisiga o'tkazish uchun pc1 funktsiyasida izoh yo'q createOffermuvaffaqiyat () chaqiruv satri:
Pc2_receivedOffer (kamayish);
ICE nomzodlarini qayta ishlashni amalga oshirish uchun, pc1_onicecandidate () birinchi ishtirokchisining ICE nomzodiga tayyorligi hodisasini qayta ko'rib chiquvchini ikkinchisiga o'tkazishni rad etamiz:
Pc2.addIceCandidate (yangi RTCIceCandidate (event.candidate));
Ikkinchi ishtirokchining ICE nomzodlari uchun tayyorgarligi tadbirlari birinchi bo'lib aks ettirilgan:
Funktsiya pc2_onicecandidate (event) (if (event.candidate) (console.log ("pc2_onicecandidate ():", event.candidate.candidate); pc1.addIceCandidate (yangi RTCIceCandidate (event.candidate));))
Birinchi ishtirokchining media-oqimini qo'shish uchun qayta qo'ng'iroq qilish funktsiyasi:
Pc2_onaddstream (voqea) funktsiyasi (console.log ("pc_onaddstream ()"); remoteVideo2.src \u003d URL.createObjectURL (event.stream);)
Ulanishni tugatish
HTMLga yana bitta tugma qo'shaylik
Va ulanishni to'xtatish funktsiyasi
Funktsiya btnHangupClick () (// HTML elementlaridan mahalliy videoni o'chiring
Uni rtctest3.html sifatida saqlang, serverga qo'ying va brauzerda oching. Ushbu misol bir xil brauzer xatcho'pida ikkita RTCPeerConnections o'rtasida ikki tomonlama media oqimini amalga oshiradi. Takliflar va javoblar SDP, ICE nomzodlarini ishtirokchilar o'rtasida va tarmoq orqali boshqa ma'lumotlar almashinuvini tashkil qilish uchun to'g'ridan-to'g'ri protsedura chaqirig'i o'rniga ishtirokchilar o'rtasida biron bir transport vositasidan, bizning holatlarimizda, veb-rozetkalardan foydalangan holda almashinuvni amalga oshirish kerak bo'ladi.
Ekran translyatsiyasi
GetUserMedia funktsiyasi quyidagi parametrlarni ko'rsatib, ekranni tortib olishi va MediaStream sifatida tarqatishi mumkin:
Var mediaStreamConstraints \u003d (audio: false, video: (majburiy: (chromeMediaSource: "screen"), ixtiyoriy :));
Muvaffaqiyatli ekranga kirish uchun bir nechta shartlarni bajarish kerak:
- skrinshot bayrog'ini getUserMedia () da chrome: // flags /, chrome: // flags / da yoqish;
- manba fayli HTTPS (SSL manbasi) orqali yuklanishi kerak;
- audio oqim so'ralmasligi kerak;
- bir nechta so'rovlar bitta brauzer yorlig'ida bajarilmasligi kerak.
WebRTC uchun kutubxonalar
WebRTC hali tugamagan bo'lsa-da, uning asosida allaqachon bir nechta kutubxonalar mavjud. JsSIP, Asterisk va Camalio kabi SIP kalitlari bilan ishlaydigan brauzerga asoslangan softphone yaratishga mo'ljallangan. PeerJS ma'lumotlar almashinuvi uchun P2P tarmoqlarini yaratishni soddalashtiradi va Xolla brauzerlardan P2P aloqasi uchun zarur bo'lgan rivojlanish hajmini kamaytiradi.
Node.js va socket.io
Tarmoq orqali ikkita RTCPeerConnections o'rtasida SDP va ICE nomzodlarini almashinuvini tashkil qilish uchun biz Node.js-ni socket.io moduli bilan ishlatamiz.
Node.js-ning so'nggi barqaror versiyasini o'rnatish (Debian / Ubuntu uchun) tavsiflangan
$ sudo apt-get install python-software-properties python g ++ make $ sudo add-apt-repository ppa: chris-lea / node.js $ sudo apt-get update $ sudo apt-get install nodejs
Boshqa operatsion tizimlar uchun o'rnatish tavsiflangan
Tekshiramiz:
$ echo "sys \u003d talab (" util "); sys.puts (" Sinov xabari ");" \u003e nodetest1.js $ nodejs nodetest1.js
Npm (Node Package Manager) yordamida socket.io va tezkor qo'shimchani o'rnating:
$ npm socket.io express-ni o'rnating
Server tomoni uchun nodetest2.js faylini yaratib tekshiramiz:
$ nano nodetest2.js var app \u003d talab ("ekspress") (), server \u003d talab ("http"). createServer (ilova), io \u003d talab ("socket.io"). tinglash (server); server.listen (80); // Agar 80-port bepul app.get bo'lsa ("/", function (req, res) (// res.sendfile (__ dirname + "/nodetest2.html" asosiy sahifasiga kirishda; // HTML faylini yuboring)) ; io.sockets.on ("ulanish", funktsiya (rozetka) (// socket.emit ulanganda ("server hodisasi", (salom: "dunyo")); // xabar yuboring socket.on ("mijoz hodisasi", function (data) (// va mijozning console.log (ma'lumotlar) dan xabar olinganida voqea ishlovchisini e'lon qilish;));));
Va mijoz tomoni uchun nodetest2.html:
$ nano nodetest2.html
Serverni ishga tushiramiz:
$ sudo nodejs nodetest2.js
va brauzerda http: // localhost: 80 sahifasini oching (agar 80-portda mahalliy ishlayotgan bo'lsa). Agar hamma narsa muvaffaqiyatli bo'lsa, brauzerning JavaScript konsolida biz ulanish paytida brauzer va server o'rtasida voqealar almashinuvini ko'ramiz.
RTCPeerConnection o'rtasida veb-uyalar orqali ma'lumot almashish
Mijozlar qismi
Asosiy misolimizni (rtcdemo3.html) yangi rtcdemo4.html nomi bilan saqlaymiz. Socket.io kutubxonasini elementga ulaymiz:
Va JavaScript skriptining boshida - veb-uyalarga ulanish:
Var socket \u003d io.connect ("http: // localhost");
Keling, boshqa ishtirokchining funktsiyalarini to'g'ridan-to'g'ri chaqirishni veb-soketlar orqali xabar yuborish bilan almashtiramiz:
CreateOffer_success (desc) funktsiyasi (... // pc2_receivedOffer (desc); socket.emit ("offer", desc); ...) function pc2_createAnswer_success (desc) (... // pc1.setRemoteDescription (desc); socket .emit ("answer", desc);) function pc1_onicecandidate (voqea) (... // pc2.addIceCandidate (yangi RTCIceCandidate (event.candidate)); socket.emit ("ice1", event.candidate); .. .) funktsiyasi pc2_onicecandidate (voqea) (... // pc1.addIceCandidate (yangi RTCIceCandidate (event.candidate)); socket.emit ("ice2", event.candidate); ...)
Hangup () funktsiyasida, ikkinchi ishtirokchining funktsiyalarini to'g'ridan-to'g'ri chaqirish o'rniga, biz veb-soketlar orqali xabar yuboramiz:
Funktsiya btnHangupClick () (... // remoteVideo2.src \u003d ""; pc2.close (); pc2 \u003d null; socket.emit ("hangup", ());)
Va xabarni qabul qilish uchun ishlovchilarni qo'shing:
Socket.on ("offer", function (data) (console.log ("socket.on (" offer "):", data); pc2_receivedOffer (data);)); socket.on ("javob", funktsiya (ma'lumotlar) (e console.log ("socket.on (" answer "):", data); pc1.setRemoteDescription (yangi RTCSessionDescription (ma'lumotlar));)); socket.on ("ice1", function (data) (console.log ("socket.on (" ice1 "):", data); pc2.addIceCandidate (yangi RTCIceCandidate (ma'lumotlar));)); socket.on ("ice2", function (data) (console.log ("socket.on (" ice2 "):", data); pc1.addIceCandidate (yangi RTCIceCandidate (ma'lumotlar));)); socket.on ("hangup", function (data) (console.log ("socket.on (" hangup "):", data); remoteVideo2.src \u003d ""; pc2.close (); pc2 \u003d null;) );
Server qismi
Nodetest2 faylini server tomonida rtctest4.js yangi nomi bilan saqlang va io.sockets.on ("ulanish", function (socket) (...) funktsiyasi ichida saqlang, mijoz xabarlarini qabul qilish va jo'natishni qo'shing:
Socket.on ("offer", function (data) (// "offer" xabari qabul qilinganda, // chunki ushbu misolda bitta mijoz aloqasi mavjud, // xabarni xuddi shu socket.emit ("offer" "orqali qayta yuboring. , ma'lumotlar); // Agar barcha ulanishlar bo'yicha xabar yuborish kerak bo'lsa, // jo'natuvchidan tashqari: // soket.broadcast.emit ("taklif", ma'lumotlar);)); socket.on ("javob", funktsiya (ma'lumotlar) (socket.emit ("javob", ma'lumotlar);)); socket.on ("ice1", funktsiya (ma'lumotlar) (socket.emit ("ice1", ma'lumotlar);)); socket.on ("ice2", funktsiya (ma'lumotlar) (socket.emit ("ice2", ma'lumotlar);)); socket.on ("hangup", funktsiya (ma'lumotlar) (socket.emit ("hangup", ma'lumotlar);));
Bundan tashqari, biz HTML fayli nomini o'zgartiramiz:
// res.sendfile (__ dirname + "/nodetest2.html"); // res.sendfile HTML faylini yuboring (__ dirname + "/rtctest4.html");
Serverning boshlanishi:
$ sudo nodejs nodetest2.js
Ikkala mijozning kodi bir xil brauzer xatcho'pida bajarilganiga qaramay, bizning misolimizdagi barcha o'zaro ta'sirlar tarmoq orqali to'liq amalga oshiriladi va bu ishtirokchilarni "ajratish" uchun alohida qiyinchiliklarni talab qilmaydi. Biroq, biz qilgan ishlar ham juda sodda edi - ushbu texnologiyalar ulardan foydalanish qulayligi uchun foydalidir. Ba'zida aldagan bo'lsa ham. Xususan, unutmaylikki, STUN / TURN serverlarisiz bizning misolimiz manzil tarjimasi va xavfsizlik devorlari mavjud bo'lganda ishlamaydi.
Xulosa
Olingan misol juda shartli, ammo agar biz voqea ishlovchilarini chaqiruvchi va qo'ng'iroq qiluvchida farq qilmasligi uchun biroz universallashtirsak, ikkita ob'ekt o'rniga pc1 va pc2, RTCPeerConnection qatorini yarating va elementlarning dinamik yaratilishi va olib tashlanishini amalga oshiring.
Yaqinda, WebRTC tufayli nafaqat ovozli va video aloqalarni tushunishda, balki umuman Internetni qabul qilishda ham inqilob bo'ladi, deb taxmin qilishimiz mumkin. WebRTC nafaqat brauzerdan brauzerga qo'ng'iroq qilish texnologiyasi, balki real vaqtda aloqa texnologiyasi sifatida ham joylashtirilgan. Biz tahlil qilgan videoaloqa, undan foydalanishning mumkin bo'lgan variantlarining kichik bir qismidir. Skreenkasting va hamkorlikning misollari va hattoki RTCDataChannel-dan foydalangan holda brauzerga asoslangan P2P tarkibni etkazib berish tarmog'i mavjud.
Ushbu maqolaning maqsadi - peer-to-peer video chatining (p2p video chat) demo namunasi yordamida uning tuzilishi va ishlash printsipi bilan tanishish. Shu maqsadda biz webrtc.io-demo multiuser video chat demosidan foydalanamiz. Uni havoladan yuklab olish mumkin: https://github.com/webRTC/webrtc.io-demo/tree/master/site.
Shuni ta'kidlash kerakki, GitHub - bu veb-loyihalarni birgalikda ishlab chiqish uchun sayt yoki veb-xizmat. Unda ishlab chiquvchilar o'zlarining ishlanmalari uchun kodlarni joylashtirishlari, ularni muhokama qilishlari va o'zaro aloqa qilishlari mumkin. Bundan tashqari, ba'zi yirik IT-kompaniyalar ushbu saytda o'zlarining rasmiy havzalarini joylashtiradilar. Xizmat ochiq manbali loyihalar uchun bepul. GitHub ochiq manba, bepul manbali kutubxonalar ombori.
Shunday qilib, biz "webrtc_demo" ilovamiz uchun yaratilgan katalogga shaxsiy kompyuterning C diskidagi GitHub-dan yuklab olingan peer-to-peer video chatining namunaviy namunasini joylashtiramiz.
Shakl: bitta
Tuzilma (1-rasm) dan ko'rinib turibdiki, peer-to-peer video suhbati JavaScript dasturlash tilida amalga oshirilgan mijoz script.js va server.js skriptlaridan iborat. Skript (kutubxona) webrtc.io.js (CLIENT) - "peer-to-peer" sxemasi bo'yicha brauzerlar o'rtasida real vaqtda aloqani tashkil qilishni ta'minlaydi: "mijoz-mijoz" va webrtc.io.js (CLIENT) va webrtc.io.js (SERVER), WebSocket protokoli yordamida ular mijoz-server arxitekturasiga muvofiq brauzer va veb-server o'rtasida to'liq dupleks aloqani ta'minlaydi.
Webrtc.io.js (SERVER) skript webrtc.io kutubxonasiga kiritilgan va node_modules \\ webrtc.io \\ lib katalogida joylashgan. Index.html video chat interfeysi HTML5 va CSS3 da amalga oshiriladi. Webrtc_demo dastur fayllari tarkibini html muharrirlaridan biri bilan ko'rish mumkin, masalan "Notepad ++".
Shaxsiy kompyuter tizimida video chat qanday ishlashini tekshiramiz. Serverni (server.js) kompyuterda ishlatish uchun siz node.js ish vaqtini o'rnatishingiz kerak. Node.js JavaScript kodini brauzerdan tashqarida ishlashga imkon beradi. Node.js-ni havoladan yuklab olishingiz mumkin: http://nodejs.org/ (v0.10.13 versiyasi 15/07/13). Node.org-ning asosiy sahifasida yuklab olish tugmachasini bosing va http://nodejs.org/download/ sahifasiga o'ting. Windows foydalanuvchilari uchun avval win.installer (.msi) -ni yuklab oling, so'ngra kompyuterda win.installer (.msi) -ni ishga tushiring va Program Files katalogiga nodejs va "npm pack manager" ni o'rnating.
Shakl: 2018-04-02 121 2
Shunday qilib, node.js ishlab chiqish muhiti va JavaScript kodining bajarilishidan, shuningdek npm paket menejeri yoki menejeri yordamida o'rnatiladigan ichki modullar to'plamidan iborat.
Modullarni o'rnatish uchun buyruq satrida dastur katalogidan buyruqni bajarishingiz kerak (masalan, "webrtc_demo"): npm moduli_name o'rnatish... Modullarni o'rnatish paytida npm menejeri katalogda node_modules papkasini o'rnatadi, undan o'rnatish amalga oshirildi. Jarayon davomida nodejs avtomatik ravishda node_modules katalogidan modullarni ulaydi.
Shunday qilib, node.js-ni o'rnatgandan so'ng, buyruq satrini oching va npm paket menejeri yordamida webrtc_demo katalogidagi node_modules papkasida ekspres modulni yangilang:
C: \\ webrtc_demo\u003e npm install express
Ekspres modul - bu node.js uchun veb-ramka yoki dasturlarni ishlab chiqish uchun veb-ramka. Ekspresga global kirish huquqiga ega bo'lish uchun uni quyidagicha o'rnatishingiz mumkin: npm o'rnatish -g express.
Keyin webrtc.io modulini yangilaymiz:
C: \\ webrtc_demo\u003e npm webrtc.io-ni o'rnating
Keyin buyruq satrida serverni ishga tushiring: server.js:
C: \\ webrtc_demo\u003e tugun server.js
Shakl: 3
Hammasi, server muvaffaqiyatli ishlamoqda (3-rasm). Endi veb-brauzerdan foydalanib, siz IP-manzil orqali serverga kirishingiz va index.html veb-sahifasini yuklab olishingiz mumkin, undan veb-brauzer mijoz skript kodini - script.js va webrtc.io.js skript kodini chiqaradi va ularni bajaradi. Peer-to-peer video suhbati ishlashi uchun (ikkita brauzer o'rtasida aloqa o'rnatish uchun), webrtc-ni qo'llab-quvvatlaydigan ikkita brauzerdan ip-manzil bo'yicha node.js da ishlaydigan signalizatsiya serveriga murojaat qilish kerak.
Natijada, aloqa dasturining (video chat) mijoz qismining interfeysi kamera va mikrofonga kirish uchun ruxsat so'rab, ochiladi (4-rasm).
Shakl: 4
"Ruxsat berish" tugmachasini bosgandan so'ng, kamera va mikrofon multimedia aloqasi uchun ulangan. Bundan tashqari, matnli ma'lumotlar video chat interfeysi orqali etkazilishi mumkin (5-rasm).
Shakl: 5
Shuni ta'kidlash kerakki. Server signal beradi va asosan foydalanuvchilar brauzerlari o'rtasida aloqa o'rnatishga mo'ljallangan. Node.js WebRTC signalizatsiyasini ta'minlovchi server.js skriptini ishlatish uchun ishlatiladi.
WebRTC - bu P2P ulanishini tashkil qilish va to'g'ridan-to'g'ri brauzerlar o'rtasida ma'lumotlarni uzatish imkonini beruvchi brauzer tomonidan taqdim etilgan API. Internetda WebRTC-dan foydalanib o'zingizning video chatingizni yozish bo'yicha ko'rsatmalar juda oz. Masalan, Xabrega bag'ishlangan maqola. Biroq, ularning barchasi ikkita mijozni ulash bilan cheklangan. Ushbu maqolada men WebRTC-dan foydalangan holda uch va undan ortiq foydalanuvchilar o'rtasida ulanish va xabar almashishni qanday tashkil qilish haqida gapirishga harakat qilaman.
RTCPeerConnection interfeysi - bu ikki brauzer o'rtasida tengma-teng ulanish. Uch yoki undan ortiq foydalanuvchini ulash uchun biz tarmoq tarmog'ini (har bir tugun boshqa barcha tugunlarga ulangan tarmoq) tashkil qilishimiz kerak bo'ladi.
Biz quyidagi sxemadan foydalanamiz:
- Sahifani ochishda xona identifikatori mavjudligini tekshiring joy.hash
- Agar xona identifikatori ko'rsatilmagan bo'lsa, biz yangisini yaratamiz
- Biz signalizatsiya serveriga "ko'rsatilgan xonaga qo'shilishni xohlagan xabar yuboramiz
- Signal server ushbu xonadagi qolgan mijozlarga yangi foydalanuvchi xabarnomasini yuboradi
- Xonada bo'lgan mijozlar yangi kelganga SDP taklifini yuborishadi
- Newbie taklifga javob beradi
0. Signal server
Ma'lumki, WebRTC brauzerlar o'rtasida P2P ulanishini ta'minlasa ham, xizmat xabarlarini almashish uchun qo'shimcha transport kerak. Ushbu misolda, bunday transport socket.io yordamida Node.JS-da yozilgan WebSocket serveridir:
Var socket_io \u003d talab ("socket.io"); module.exports \u003d function (server) (var users \u003d (); var io \u003d socket_io (server); io.on ("connection", function (socket) (// yangi foydalanuvchi xona socket.on ("room" ga qo'shilishni xohlaydi) ", function (message) (var json \u003d JSON.parse (message); // Soketni foydalanuvchilar ro'yxatiga foydalanuvchilarning ro'yxatiga qo'shing \u003d socket; if (socket.room! \u003d\u003d undefined) (// Socket allaqachon xonada bo'lsa , undan chiqing socket.leave (socket.room);) // so'ralgan xonaga kiring socket.room \u003d json.room; socket.join (socket.room); socket.user_id \u003d json.id; // Boshqa mijozlarga yuboring bu xonada socket.broadcast.to (socket.room) .emit ("new", json.id);)) ga qo'shilgan yangi ishtirokchi haqida xabar; // WebRTC bilan bog'liq xabar (SDP taklifi, SDP javobi yoki ICE nomzodi) socket.on ("webrtc", function (message) (var json \u003d JSON.parse (message); if (json.to! \u003d\u003d undefined && users! \u003d\u003d undefined) (// Agar xabarda qabul qiluvchi va ushbu qabul qiluvchi bo'lsa) serverga ma'lum, biz xabar yuboramiz faqat unga ... users.emit ("webrtc", xabar); ) else (// ... aks holda, xabarni Broadcast socket.broadcast.to (socket.room) .emit ("webrtc", message);))) deb hisoblang; // Kimdir socket.on ("ajratish", function () (// mijoz o'chirganda, bu haqda boshqalarga xabar bering. Socket.broadcast.to (socket.room) .emit ("leave", socket.user_id)); foydalanuvchilarni o'chirish;)); )); );
1.index.html
Sahifaning o'zi uchun manba kodi juda oddiy. Men ataylab maketga va boshqa go'zalliklarga e'tibor bermadim, chunki bu maqola bu haqda emas. Agar kimdir uni chiroyli qilishni xohlasa, bu qiyin bo'lmaydi.
2.main.js
2.0. Sahifa elementlari va WebRTC interfeyslariga havolalarni olish
var chatlog \u003d document.getElementById ("chatlog"); var message \u003d document.getElementById ("xabar"); var connection_num \u003d document.getElementById ("connection_num"); var room_link \u003d document.getElementById ("room_link");WebRTC interfeyslariga murojaat qilish uchun brauzer prefikslaridan foydalanishimiz kerak.
Var PeerConnection \u003d window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var SessionDescription \u003d window.mozRTCSessionDescription || window.RTCSessionDescription; var IceCandidate \u003d window.mozRTCIceCandidate || window.RTCIceCandidate;
2.1. Xona identifikatorini topish
Bu erda biz noyob xonani va foydalanuvchi identifikatorini yaratish funktsiyasiga muhtojmiz. Ushbu maqsadlar uchun biz UUIDdan foydalanamiz.
Uuid () funktsiyasi (var s4 \u003d function () (return Math.floor (Math.random () * 0x10000) .toString (16);); return s4 () + s4 () + "-" + s4 () +) "-" + s4 () + "-" + s4 () + "-" + s4 () + s4 () + s4 ();)
Endi xona identifikatorini manzildan tortib olishga harakat qilaylik. Agar hech biri ko'rsatilmagan bo'lsa, biz yangisini yaratamiz. Biz sahifada mavjud xonaga havolani ko'rsatamiz va bir qadamda joriy foydalanuvchi identifikatorini yaratamiz.
Var ROOM \u003d location.hash.substr (1); if (! ROOM) (ROOM \u003d uuid ();) room_link.innerHTML \u003d "Xona bilan bog'lanish"; var ME \u003d uuid ();
2.2. WebSocket
Sahifani ochgandan so'ng darhol signalizatsiya serverimizga ulanamiz, xonaga kirish uchun so'rov yuboramiz va xabarlarni ko'rib chiquvchilarni aniqlaymiz.
// Xabar yopilganda, bu haqda bildirishnoma serverga yuborilishi kerakligini bildiramiz var socket \u003d io.connect ("", ("unload on sync disconnect": true)); socket.on ("webrtc", socketReceived); socket.on ("yangi", socketNewPeer); // Darhol xonaga kirish uchun so'rov yuboring socket.emit ("xona", JSON.stringify ((id: ME, xona: ROOM))); // WebRTC bilan bog'liq manzil xabarlarini yuborish uchun yordamchi funktsiya sendViaSocket funktsiyasi (turi, xabari, to) (socket.emit ("webrtc", JSON.stringify ((id: ME, to: to, type: type, data: message )));)
2.3. PeerConnection sozlamalari
Ko'pgina Internet-provayderlar NAT-ni Internetga ulanish orqali ta'minlaydi. Shu sababli, to'g'ridan-to'g'ri ulanish unchalik ahamiyatsiz bo'ladi. Ulanishni yaratishda brauzer NAT-dan o'tishda foydalanishga harakat qiladigan STUN va TURN serverlarining ro'yxatini ko'rsatishimiz kerak. Shuningdek, biz ulanish uchun ikkita qo'shimcha variantni ko'rsatamiz.
Var server \u003d (iceServers: [(url: "stun: 23.21.150.121"), (url: "stun: stun.l.google.com: 19302"), (url: "turn: numb.viagenie.ca", hisobga olish ma'lumotlari: "parolingiz shu erga kiradi", foydalanuvchi nomi: " [elektron pochta bilan himoyalangan]var options \u003d (ixtiyoriy: [(DtlsSrtpKeyAg келісім: rost), // Chrome va Firefox (RtpDataChannels: true) o'rtasida ulanish uchun talab qilinadi // Firefox-ning DataChannels API-dan foydalanishi uchun zarur])
2.4. Yangi foydalanuvchini ulash
Xonaga yangi tengdosh qo'shilganda, server bizga xabar yuboradi yangi... Yuqoridagi xabarlarni ishlovchilariga ko'ra, funktsiya chaqiriladi socketNewPeer.
Var tengdoshlari \u003d (); function socketNewPeer (data) (peers \u003d (талапкерCache :); // yangi ulanish yaratish var pc \u003d new PeerConnection (server, imkoniyatlar); // uni initsConnection (pc, data, "offer") initsializatsiyasi; // tengdoshni ro'yxatda saqlash peers.connection \u003d pc; // xabarlar almashinadigan DataChannel yarating var channel \u003d pc.createDataChannel ("mychannel", ()); channel.owner \u003d data; peers.channel \u003d channel; // voqea ishlovchilarini o'rnating. channel bindEvents (channel); // SDP-ni yaratish pc.createOffer (function (offer) (pc.setLocalDescription (offer);));) function initConnection (pc, id, sdpType) (pc.onicecandidate \u003d function (event) ( if (event.candidate) (// Yangi ICE nomzodi topilganda, uni peers.candidateCache.push (event.candidate) yuborish uchun uni ro'yxatga qo'shing; // else (// Nomzodni aniqlash tugallangach, ishlov beruvchiga yana qo'ng'iroq qilinadi, ammo nomzod // Bunday holda biz SDP taklifini birinchi navbatda tengdoshga yuboramiz yoki SDP javobi (funktsiya parametriga qarab) ... sendViaSocket (sdpType, pc.localDescription, id); // ... va keyin barcha ilgari topilgan ICE nomzodlari (var i \u003d 0; i< peers.candidateCache.length; i++) { sendViaSocket("candidate", peers.candidateCache[i], id); } } } pc.oniceconnectionstatechange = function (event) { if (pc.iceConnectionState == "disconnected") { connection_num.innerText = parseInt(connection_num.innerText) - 1; delete peers; } } } function bindEvents (channel) { channel.onopen = function () { connection_num.innerText = parseInt(connection_num.innerText) + 1; }; channel.onmessage = function (e) { chatlog.innerHTML += "
2.5. SDP taklifi, SDP javobi, ICE nomzodi
Ushbu xabarlardan biri qabul qilinganda, biz tegishli xabar ishlovchisini chaqiramiz.
SocketReceived (ma'lumotlar) funktsiyasi (var json \u003d JSON.parse (ma'lumotlar); switch (json.type) ("nomzod" holati: remoteCandidateReceived (json.id, json.data); break; case "offer": remoteOfferReceived (json. id, json.data); break; case "answer": remoteAnswerReceived (json.id, json.data); break;))
2.5.0 SDP taklifi
functionOfferReceived (id, data) (createConnection (id); var pc \u003d peers.connection; pc.setRemoteDescription (yangi SessionDescription (ma'lumotlar)); pc.createAnswer (funktsiya (javob) (pc.setLocalDescription (javob);)); ) createConnection (id) funktsiyasi (if (peers \u003d\u003d\u003d undefined) (peers \u003d (талапкерCache :); var pc \u003d new PeerConnection (server, options); initConnection (pc, id, "answer"); peers.connection \u003d pc ; pc.ondatachannel \u003d function (e) (peers.channel \u003d e.channel; peers.channel.owner \u003d id; bindEvents (peers.channel);)))2.5.1 SDP javobi
function remoteAnswerReceived (id, data) (var pc \u003d peers.connection; pc.setRemoteDescription (yangi SessionDescription (ma'lumotlar));)2.5.2 ICE nomzodi
remoteCandidateReceived funktsiyasi (id, ma'lumotlar) (createConnection (id); var pc \u003d peers.connection; pc.addIceCandidate (yangi IceCandidate (ma'lumotlar));)2.6. Xabar yuborish
Tugmani bosish orqali Yuborish funktsiyasi deyiladi sendMessage... Buning barchasi tengdoshlar ro'yxatidan o'tish va ko'rsatilgan xabarni barchaga yuborishga harakat qilishdir.
