Браузер арқылы қоңырау шалу технологиялары көптеген жылдар бойы бар: Java, ActiveX, Adobe Flash... Соңғы бірнеше жылда плагиндер мен солақай виртуалды машиналар ыңғайлы түрде жарқырамайтыны белгілі болды (неге мен мүлде бірдеңе орнатыңыз ба?) және, ең бастысы, қауіпсіздік . Енді не істеу керек? Шығу бар!
Соңғы уақытқа дейін IP желілері IP телефония немесе бейне үшін бірнеше протоколдарды пайдаланды: SIP, ең көп таралған протокол, H.323 және MGCP оқиға орнынан шығады, Jabber/Jingle (Gtalk-те пайдаланылады), жартылай ашық Adobe RTMP* және, әрине. , Skype жабылды. Google бастаған WebRTC жобасы барлық бағдарламалық телефондарды, соның ішінде Skype-ты қажетсіз ету арқылы IP және веб-телефония әлемінде төңкеріс жасауға тырысады. WebRTC қазір барлық дерлік құрылғыларда орнатылған шолғыштың ішінде барлық байланыс мүмкіндіктерін жүзеге асырып қана қоймайды, сонымен қатар шолғыш пайдаланушылары арасындағы байланыстың жалпы мәселесін (әртүрлі деректермен алмасу, экрандық хабар тарату, құжаттармен жұмыс істеу және әлдеқайда көп).
WebRTC веб-әзірлеушінің көзқарасы бойыншаВеб-әзірлеушінің көзқарасы бойынша WebRTC екі негізгі бөліктен тұрады:
- жергілікті ресурстардан (камера, микрофон немесе жергілікті компьютер экраны) медиа ағындарын басқару MediaStream нысанын қайтаратын navigator.getUserMedia әдісімен жүзеге асырылады;
- байланыс әдістерін анықтау және оларды тікелей жіберуді қоса алғанда, медиа ағындарын генерациялайтын құрылғылар арасындағы тең дәрежелі байланыс – RTCPeerConnection объектілері (дыбыс және бейне ағындарын жіберу және қабылдау үшін) және RTCDataChannel (браузерден деректерді жіберу және қабылдау үшін).
Біз веб-розеткалар арқылы WebRTC негізіндегі шолғыштар арасында қарапайым көп пайдаланушы бейне сұхбатын қалай ұйымдастыру керектігін анықтаймыз. Біз Chrome/Chromium-да эксперимент жасай бастаймыз, өйткені WebRTC тұрғысынан ең озық браузерлер, дегенмен 24 маусымда шыққан Firefox 22 оларды қуып жетті. Айта кету керек, стандарт әлі қабылданбаған және API нұсқадан нұсқаға өзгеруі мүмкін. Барлық мысалдар Chromium 28 жүйесінде сыналған. Қарапайымдылық үшін біз кодтың тазалығын және браузерлер арасындағы үйлесімділікті бақыламаймыз.
MediaStreamБірінші және қарапайым WebRTC компоненті MediaStream болып табылады. Ол шолғышқа жергілікті компьютердің камерасы мен микрофонынан медиа ағындарына қол жеткізуге мүмкіндік береді. Chrome-да бұл үшін navigator.webkitGetUserMedia() функциясына қоңырау шалу керек (стандарт әлі аяқталмағандықтан, барлық функциялар префикспен келеді, ал Firefox-та дәл сол функция navigator.mozGetUserMedia() деп аталады). Қоңырау шалған кезде пайдаланушыдан камера мен микрофонға кіруге рұқсат беру сұралады. Пайдаланушы келісімін бергеннен кейін ғана қоңырауды жалғастыру мүмкін болады. Қажетті медиа ағынының параметрлері және екі кері шақыру функциясы осы функцияға параметрлер ретінде беріледі: біріншісі камераға/микрофонға қол жеткізу сәтті алынған жағдайда шақырылады, екіншісі - қате болған жағдайда. Алдымен түймесі мен элементі бар rtctest1.html HTML файлын жасайық:
WebRTC - бірінші кіріспе бейне (биіктігі: 240px; ені: 320px; жиегі: 1px тұтас сұр; ) getUserMedia
Егер ол CU-RTC-Web (html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web) деп аталатын өзінің үйлеспейтін стандартты емес нұсқасын шығару арқылы Google бастамасына дереу жауап бермесе, Microsoft корпорациясы Microsoft болмас еді. htm). IE үлесі, қазірдің өзінде аз болса да, азайып келе жатқанымен, Skype пайдаланушыларының саны Microsoft-қа Google-ды ығыстыруға үміт береді және бұл стандарт Skype браузерінің нұсқасында қолданылады деп болжауға болады. Google стандарты ең алдымен браузерлер арасындағы байланысқа бағытталған; сонымен бірге дауыстық трафиктің негізгі бөлігі бұрынғысынша кәдімгі телефон желісінде қалады және онымен IP желілері арасындағы шлюздер пайдаланудың қарапайымдылығы немесе жылдамырақ тарату үшін ғана емес, сонымен қатар көбірек ойыншыларға мүмкіндік беретін монетизация құралы ретінде қажет. оларды дамыту. Басқа стандарттың пайда болуы әзірлеушілерге бірден екі үйлесімсіз технологияны қолдаудың жағымсыз қажеттілігіне әкеліп қана қоймай, сонымен қатар болашақта пайдаланушыға мүмкін болатын функционалдылық пен қол жетімді техникалық шешімдердің кең таңдауын беруі мүмкін. Күте тұрыңыз және көріңіз.
Жергілікті ағынды қосуHTML файлымыздың тегтерінің ішінде медиа ағыны үшін жаһандық айнымалыны жариялайық:
Var localStream = null;
getUserMedia әдісінің бірінші параметрі сұралған медиа ағынының параметрлерін көрсетуі керек - мысалы, жай ғана аудио немесе бейнені қосыңыз:
Var streamConstraints = («аудио»: шын, «бейне»: шын); // Аудиоға да, бейнеге де рұқсат сұрау
Немесе қосымша параметрлерді көрсетіңіз:
Var streamConstraints = ( "аудио": шын, "бейне": ( "міндетті": ( "maxWidth": "320", "maxHeight": "240", "maxFrameRate": "5"), "қосымша": ) );
getUserMedia әдісінің екінші параметрін кері шақыру функциясына жіберу керек, ол сәтті болса шақырылады:
Функция getUserMedia_success(stream) ( console.log("getUserMedia_success():", stream); localVideo1.src = URL.createObjectURL(stream); // Медиа ағынын HTML элементіне localStream = ағынмен қосыңыз; // және оны сақтаңыз әрі қарай пайдалану үшін жаһандық айнымалыда)
Үшінші параметр - кері шақыру функциясы, қате болған жағдайда шақырылатын қате өңдегіш
getUserMedia_error(қате) функциясы ( console.log("getUserMedia_error():", қате); )
getUserMedia әдісіне нақты қоңырау бірінші түйме басылған кезде микрофон мен камераға кіруге сұрау болып табылады.
getUserMedia_click() функциясы ( console.log("getUserMedia_click()"); navigator.webkitGetUserMedia(streamConstraints, getUserMedia_success, getUserMedia_error); )
Жергілікті түрде ашылған файлдан медиа ағынына қол жеткізу мүмкін емес. Егер біз мұны істеуге тырыссақ, біз қатені аламыз:
NavigatorUserMediaError (код: 1, PERMISSION_DENIED: 1)"
Алынған файлды серверге жүктеп, оны браузерде ашып, пайда болған сұрауға жауап ретінде камера мен микрофонға кіруге рұқсат етейік.
"Параметрлер", "Қосымша параметрлерді көрсету" сілтемесі, "Құпиялылық" бөлімі, "Мазмұн" түймесі арқылы Chrome қол жеткізе алатын құрылғыларды таңдауға болады. Firefox және Opera браузерлерінде кіру рұқсат етілгенде құрылғылар ашылмалы тізімнен тікелей таңдалады.
HTTP протоколын пайдаланған кезде, бет жүктелгеннен кейін медиа ағынына қатынасқан сайын рұқсат сұралады. HTTPS жүйесіне ауысу медиа ағынына бірінші рет кіргенде ғана сұрауды бір рет көрсетуге мүмкіндік береді.
Бетбелгі белгішесінде пульсирленген шеңберге және мекенжай жолағының оң жағындағы камера белгішесіне назар аударыңыз:
RTCMediaConnectionRTTCMediaConnection – қатысушылар арасында желі арқылы медиа ағындарын орнатуға және беруге арналған нысан. Бұған қоса, бұл нысан медиа сеансының сипаттамасын (SDP) жасауға, NAT немесе брандмауэрлерді (жергілікті және STUN пайдалану) өту үшін ICE үміткерлері туралы ақпаратты алуға және TURN серверімен әрекеттесуге жауап береді. Әрбір қатысушыда бір қосылымға бір RTCMediaConnection болуы керек. Медиа ағындары шифрланған SRTP хаттамасы арқылы беріледі.
TURN серверлеріICE үміткерлерінің үш түрі бар: хост, srflx және реле. Хост жергілікті түрде алынған ақпаратты қамтиды, srflx - түйін сыртқы серверге (STUN) ұқсайды және реле - TURN сервері арқылы трафикті проксиге жіберуге арналған ақпарат. Егер біздің түйін NAT артында болса, онда хост кандидаттарында жергілікті мекенжайлар болады және пайдасыз болады, srflx кандидаттары тек белгілі бір NAT түрлеріне көмектеседі және реле аралық сервер арқылы трафикті өткізудің соңғы үміті болады.
192.168.1.37 мекенжайы және udp/34022 порты бар хост түріндегі ICE кандидатының мысалы:
A=кандидат:337499441 2 udp 2113937151 192.168.1.37 34022 типті хост буыны 0
STUN/TURN серверлерін көрсетудің жалпы пішімі:
Var servers = ( "iceServers": [ ( "url": "stun:stun.stunprotocol.org:3478" ), ( "url": "turn:user@host:port", "credential": "password" ) ]);
Интернетте көптеген қоғамдық STUN серверлері бар. Мысалы, үлкен тізім бар. Өкінішке орай, олар тым аз мәселелерді шешеді. STUN-тан айырмашылығы, жалпыға қолжетімді TURN серверлері іс жүзінде жоқ. Бұл TURN сервері желі арнасын да, сервердің өзін де айтарлықтай жүктей алатын медиа ағындары арқылы өтетіндігіне байланысты. Сондықтан TURN серверлеріне қосылудың ең оңай жолы - оны өзіңіз орнату (сізге жалпыға қолжетімді IP қажет болатыны анық). Барлық серверлердің ішінде, менің ойымша, ең жақсысы rfc5766-turn-server. Тіпті Amazon EC2 үшін дайын сурет бар.
TURN көмегімен бәрі біз қалағандай жақсы емес, бірақ белсенді даму жүріп жатыр, мен біраз уақыттан кейін WebRTC мекенжай аудармасы (NAT) және желіаралық қалқандар арқылы өту сапасы бойынша Skype-қа тең болмаса, деп үміттенгім келеді. , кем дегенде байқалады жақын келеді.
RTTCMediaConnection қосылымды орнату үшін басқару ақпаратымен алмасудың қосымша механизмін қажет етеді - ол бұл деректерді жасағанымен, оны жібермейді және басқа қатысушыларға беру бөлек жүзеге асырылуы керек.
Тасымалдау әдісін таңдау әзірлеушіге жүктеледі - кем дегенде қолмен. Қажетті деректермен алмасу орын алғаннан кейін RTTCMediaConnection медиа ағындарын автоматты түрде орнатады (мүмкіндігінше, әрине).
ұсыныс-жауап үлгісіМультимедиа ағындарын орнату және өзгерту үшін ұсыныс/жауап үлгісі (RFC3264-те сипатталған) және SDP (сеанс сипаттамасы хаттамасы) пайдаланылады. Оларды SIP протоколы да пайдаланады. Бұл модельде екі агент бар: Ұсыныс - жаңасын жасау немесе барын өзгерту үшін сеанстың SDP сипаттамасын жасайтын агент (Ұсыныстың SDP) және жауап беруші - сеанстың SDP сипаттамасын келесіден алатын агент басқа агент және өзінің сеанс сипаттамасымен жауап береді (Жауап SDP). Сонымен бірге, спецификация агенттер арасында SDP жіберуге жауапты жоғары деңгейлі протоколды (мысалы, SIP немесе біздің жағдайдағыдай өзінің веб-розеткалар) қажет етеді.
Екі RTTCMediaConnection арасында медиа ағындарын сәтті орнату үшін қандай деректерді беру керек:
- Қосылымды бастайтын бірінші қатысушы ол жіберуді бастағалы тұрған медиа ағынының ықтимал сипаттамаларын сипаттайтын SDP деректер құрылымын (SIP жүйесінде дәл сол хаттама үшін пайдаланылады) жіберетін Ұсынысты қалыптастырады. Бұл деректер блогы екінші қатысушыға берілуі керек. Екінші қатысушы SDP-мен Жауапты қалыптастырады және оны біріншісіне жібереді.
- Бірінші және екінші қатысушылар ICE ықтимал кандидаттарын анықтау процедурасын орындайды, оның көмегімен екінші қатысушы оларға медиа ағынын жібере алады. Үміткерлер анықталғандықтан, олар туралы ақпарат басқа қатысушыға берілуі керек.
Қалыптастыру ұсынысы Ұсынысты жасау үшін бізге екі функция қажет. Біріншісі сәтті қалыптасқан жағдайда шақырылады. CreateOffer() әдісінің екінші параметрі оны орындау кезінде қате пайда болған жағдайда шақырылатын кері шақыру функциясы болып табылады (егер жергілікті ағын қол жетімді болса).
Оған қоса, екі оқиға өңдегіші қажет: жаңа ICE кандидатын анықтау кезінде onicecandidate және алыс жақтан медиа ағынын қосу кезінде onaddstream. Файлымызға қайта оралайық. HTML-ге элементтері бар жолдардан кейін тағы біреуін қосамыз:
ұсыныс жасау
Ал элементі бар жолдан кейін (болашақ үшін):
Сондай-ақ JavaScript кодының басында RTCPeerConnection үшін жаһандық айнымалыны жариялаймыз:
Var pc1;
RTCPeerConnection конструкторын шақырған кезде STUN/TURN серверлерін көрсету керек. Олар туралы қосымша ақпарат алу үшін бүйірлік тақтаны қараңыз; барлық қатысушылар бір желіде болса, олар талап етілмейді.
Var серверлері = null;
SDP ұсынысын дайындау параметрлері
Var offerConstraints = ();
createOffer() әдісінің бірінші параметрі Ұсынысты сәтті қалыптастыру кезінде шақырылатын кері шақыру функциясы болып табылады
pc1_createOffer_success(төмендеу) ( console.log("pc1_createOffer_success(): \ndesc.sdp:\n"+desc.sdp+"desc:", азайту); pc1.setLocalDescription(төмен); // S RTCPeerConnection генерациялаған RTCPeerConnection DP орнату setLocalDescription әдісін қолдану // Алыс тарап өзінің Answer SDP жіберген кезде, оны setRemoteDescription әдісі арқылы орнату қажет болады // Екінші жағы іске асырылмайынша, біз ештеңе істемейміз // pc2_receivedOffer(desc);
Екінші параметр - қате болған жағдайда шақырылатын кері шақыру функциясы
Функция pc1_createOffer_error(қате)( console.log("pc1_createOffer_success_error(): қате:", қате); )
Және ICE кандидаттары анықталған кезде жіберілетін кері шақыру функциясын жариялайық:
Функция pc1_onicecandidate(event)( if (event.candidate) ( console.log("pc1_onicecandidate():\n"+ event.candidate.candidate.replace("\r\n", ""), event.candidate); // Екінші жағы орындалмайынша, біз ештеңе істемейміз // pc2.addIceCandidate(new RTCIceCandidate(event.candidate) ) )
Сондай-ақ алыс жақтан медиа ағынын қосуға арналған кері шақыру функциясы (болашақ үшін, өйткені қазір бізде тек бір RTCPeerConnection бар):
pc1_onaddstream(оқиға) функциясы ( console.log("pc_onaddstream()"); remoteVideo1.src = URL.createObjectURL(event.stream); )
«CreateOffer» түймесін басқан кезде, біз RTCPeerConnection жасаймыз, onicecandidate және onaddstream әдістерін орнатамыз және createOffer() әдісіне қоңырау шалу арқылы ұсыныс SDP құруды сұраймыз:
Функция createOffer_click() ( console.log("createOffer_click()"); pc1 = new webkitRTCPeerConnection(servers); // RTCPeerConnection жасау pc1.onicecandidate = pc1_onicecandidate; // ICE кандидаттарын өңдеуге арналған кері шақыру функциясы //_ddstreonaddstreona pc1.am;amc. Алыс жақтан медиа ағыны пайда болған кезде шақырылатын кері шақыру функциясы әлі жоқ pc1.addStream(localStream); Ұсыныстың қалыптасуын сұраңыз pc1_createOffer_success , pc1_createOffer_error, offerConstraints)
Файлды rtctest2.html деп сақтап, оны серверге жүктеп, оны браузерде ашып, консольде оның жұмысы кезінде қандай деректер жасалатынын көрейік. Бір ғана қатысушы болғандықтан екінші бейне әлі шықпайды. Еске салайық, SDP - бұл медиа сеанс параметрлерінің сипаттамасы, қолжетімді кодектер, медиа ағындары және ICE кандидаттары берілген қатысушыға қосылудың мүмкін нұсқалары.
Жауап SDP қалыптастыру және ICE кандидаттарын алмасуҰсыныстың SDP және ICE үміткерлерінің әрқайсысы басқа тарапқа берілуі керек және оларды алғаннан кейін RTCPeerConnection ұсыныс SDP үшін setRemoteDescription әдістерін және алыс жақтан алынған әрбір ICE кандидаты үшін addIceCandidate әдістерін шақырады; сол сияқты Answer SDP және қашықтағы ICE кандидаттары үшін қарама-қарсы бағытта. Жауаптың SDP өзі Ұсынысқа ұқсас құрылады; айырмашылығы мынада, шақырылатын createOffer әдісі емес, createAnswer әдісі және оған дейін RTCPeerConnection әдісі setRemoteDescription қоңырау шалушыдан алынған ұсыныс SDP-ге жіберіледі.
HTML-ге тағы бір бейне элементін қосамыз:
Біріншісінің мәлімдемесі бойынша екінші RTCPeerConnection үшін жаһандық айнымалы:
Var pc2;
Ұсыныс және жауап SDP өңделудеЖауаптың SDP қалыптасуы Ұсынысқа өте ұқсас. Ұсынысқа ұқсас Жауап сәтті қалыптасқан кезде шақырылатын кері шақыру функциясында біз жергілікті сипаттаманы береміз және алынған SDP Жауабын бірінші қатысушыға береміз:
pc2_createAnswer_success(төмендеу) функциясы ( pc2.setLocalDescription(төмен); console.log("pc2_createAnswer_success()", түсіндірме.sdp); pc1.setRemoteDescription(төмендету); )
Жауапты жасау кезінде қате болған жағдайда шақырылатын кері шақыру функциясы Ұсынысқа толығымен ұқсас:
pc2_createAnswer_error(қате) функциясы ( console.log("pc2_createAnswer_error():", қате); )
Жауап SDP қалыптастыру параметрлері:
Var answerConstraints = ( "міндетті": ( "OfferToReceiveAudio":шын, "OfferToReceiveVideo":шын ) );
Екінші қатысушы Ұсынысты алған кезде, біз RTCPeerConnection жасаймыз және Ұсыныс сияқты Жауапты қалыптастырамыз:
pc2_receivedOffer(desc) ( console.log("pc2_receiveOffer()", жою); // Бірінші қатысушы сияқты екінші қатысушы үшін RTCPeerConnection нысанын жасаңыз pc2 = жаңа webkitRTCPeerConnection(серверлер); pc2.onicecandidateec =pc2.onicecandidateec ; // ICE кандидаты pc2.onaddstream = pc_onaddstream пайда болған кезде оны орнату; қатысушыда біріншісі бар) // Енді екінші RTCPeerConnection дайын болғанда, біз оған алынған SDP ұсынысын береміз (біріншіге жергілікті ағынды өткіздік) pc2.setRemoteDescription(жаңа RTCSessionDescription(түсіру)); // Жауап хабары үшін деректерді жасау үшін екінші қосылымды сұрау pc2.createAnswer(pc2_createAnswer_success, pc2_createAnswer_error, answerConstraints );
Біздің мысалдағы SDP ұсынысын бірінші қатысушыдан екінші қатысушыға ауыстыру үшін оны pc1 функциясында алып тастаймыз. ұсыныс жасау başarı() қоңырау желісі:
Pc2_receivedOffer(төмендету);
ICE кандидаттарын өңдеуді жүзеге асыру үшін бірінші қатысушының pc1_onicecandidate() екінші қатысушысының ICE кандидатының дайындығы оқиғасының өңдеушісіне түсініктеме берейік:
Pc2.addIceCandidate(жаңа RTCIceCandidate(event.candidate));
Екінші қатысушының ICE кандидатының дайындығы оқиғасын өңдеушісі біріншіге ұқсайды:
pc2_onicecandidate(оқиға) функциясы ( if (event.candidate) ( console.log("pc2_onicecandidate():", event.candidate.candidate); pc1.addIceCandidate(жаңа RTCIceCandidate(event.candidate)); ) )
Бірінші қатысушыдан медиа ағынын қосуға арналған кері шақыру функциясы:
pc2_onaddstream(оқиға) функциясы ( console.log("pc_onaddstream()"); remoteVideo2.src = URL.createObjectURL(event.stream); )
Байланысты аяқтауHTML-ге тағы бір түймені қосамыз
Трубканы қою
Және қосылымды тоқтату функциясы
btnHangupClick() функциясы ( // HTML элементтерінен жергілікті бейнені ажыратыңыз, жергілікті медиа ағынын тоқтатыңыз, орнату = null localVideo1.src = ""; localStream.stop(); localStream = null; // Әрбір қатысушы үшін HTML-ден бейнені өшіріңіз. элементтер, қосылымды жабыңыз, көрсеткішті орнатыңыз = null remoteVideo1.src = "" pc1 = remoteVideo2.src = "";
Оны rtctest3.html деп сақтап, серверге жүктеп, браузерде ашайық. Бұл мысал бір шолғыш қойындысындағы екі RTCPeerConnections арасындағы медиа ағындарының екі жақты берілуін жүзеге асырады. Қатысушылар арасында Ұсыныс және Жауап SDP, ICE кандидаттарымен және желі арқылы басқа ақпараттармен алмасуды ұйымдастыру үшін тікелей шақыру процедураларының орнына қатысушылар арасында көліктің қандай да бір түрін, біздің жағдайда – веб-розеткалар арқылы алмасуды жүзеге асыру қажет болады.
Экрандық трансляцияgetUserMedia функциясы да келесі параметрлерді көрсету арқылы экранды және ағынды MediaStream ретінде түсіре алады:
Var mediaStreamConstraints = ( аудио: жалған, бейне: ( міндетті: ( chromeMediaSource: "экран"), қосымша: ) );
Экранға сәтті кіру үшін бірнеше шарттарды орындау қажет:
- chrome://flags/,chrome://flags/ ішіндегі getUserMedia() ішіндегі скриншот жалауын қосу;
- бастапқы файл HTTPS (SSL бастауы) арқылы жүктелуі керек;
- аудио ағынды сұрауға болмайды;
- Бір шолғыш қойындысында бірнеше сұраулар орындалмауы керек.
WebRTC әлі аяқталмағанымен, оған негізделген бірнеше кітапхана пайда болды. JsSIP Asterisk және Camalio сияқты SIP қосқыштарымен жұмыс істейтін браузерге негізделген бағдарламалық телефондарды жасауға арналған. PeerJS деректер алмасу үшін P2P желілерін құруды жеңілдетеді, ал Holla браузерлерден P2P байланысы үшін қажетті әзірлеу көлемін азайтады.
Node.js және socket.ioЖелі арқылы екі RTCPeerConnections арасында SDP және ICE үміткерлерінің алмасуын ұйымдастыру үшін socket.io модулімен Node.js пайдаланамыз.
Node.js соңғы тұрақты нұсқасын орнату (Debian/Ubuntu үшін) сипатталған
$ sudo apt-get орнату python-software-properties python g++ жасау $ sudo add-apt-repository ppa:chris-lea/node.js $ sudo apt-get жаңарту $ sudo apt-get орнату nodejs
Басқа операциялық жүйелер үшін орнату сипатталған
Тексерейік:
$ echo "sys=require("util"); sys.puts("Сынақ хабары");" > nodetest1.js $ nodejs nodetest1.js
npm (Node Package Manager) көмегімен socket.io және қосымша экспресс модулін орнатамыз:
$ npm socket.io express орнатыңыз
Сервер жағы үшін nodetest2.js файлын жасау арқылы оны сынап көрейік:
$ nano nodetest2.js var app = require("express")() , server = require("http").createServer(app) , io = require("socket.io").listen(server); server.listen(80); // Егер 80 порты тегін app.get("/", функция (req, res) болса ( // Түбір бетіне кіру кезінде res.sendfile(__dirname + "/nodetest2.html"); // HTML файлын жіберіңіз ) ); io.sockets.on("қосылу", функция (розетка) ( // қосу кезінде socket.emit("сервер оқиғасы", ( сәлем: "әлем" )); // хабарлама жіберу socket.on("клиент оқиғасы" , функция (деректер) ( // және клиент console.log(data); ) хабарлама келген кезде оқиға өңдеушісін жариялайды);
Клиенттік тарап үшін nodetest2.html:
$ nano nodetest2.html var socket = io.connect("/"); // Websocket серверінің URL мекенжайы (бет жүктелген сервердің түбірлік беті) socket.on("сервер оқиғасы", функция (деректер) ( console.log(data); socket.emit("клиент оқиғасы", ( " аты": "мән" )))));
Серверді бастайық:
$ sudo nodejs nodetest2.js
және браузерде http://localhost:80 (егер 80-ші портта жергілікті түрде жұмыс істеп тұрса) бетін ашыңыз. Егер бәрі сәтті болса, браузердің JavaScript консолінде қосылу кезінде браузер мен сервер арасындағы оқиғалардың алмасуын көреміз.
RTCPeerConnection арасында веб-розеткалар арқылы ақпарат алмасу Клиент бөлігіНегізгі мысалды (rtcdemo3.html) rtcdemo4.html жаңа атауымен сақтайық. Элементке socket.io кітапханасын қосамыз:
Ал JavaScript сценарийінің басында - веб-розеткаларға қосылу:
Var socket = io.connect («http://localhost»);
Басқа қатысушының функцияларына тікелей қоңырауды оған веб-розеткалар арқылы хабарлама жіберу арқылы ауыстырайық:
CreateOffer_success(төмендеу) функциясы ( ... // pc2_receivedOffer(төмен); socket.emit("ұсыныс", азайту); ... ) функциясы pc2_createAnswer_success(төмендету) ( ... // pc1.setRemoteDescription(төмен); socket .emit("жауап", түсіндірме); ).
hangup() функциясында екінші қатысушының функцияларын тікелей шақырудың орнына біз веб-розеткалар арқылы хабарлама жібереміз:
btnHangupClick() функциясы ( ... // remoteVideo2.src = ""; pc2.close(); pc2 = null; socket.emit("hangup", ()); )
Хабарламаларды қабылдау өңдеушілерін қосыңыз:
Socket.on("ұсыныс", функция (деректер) ( console.log("socket.on("ұсыныс"):", деректер); pc2_receivedOffer(деректер); )); socket.on("жауап", функция (деректер) (е console.log("socket.on("жауап"):", деректер); pc1.setRemoteDescription(жаңа RTCSessionDescription(деректер)); )); socket.on("ice1", функция (деректер) ( console.log("socket.on("ice1"):", деректер); pc2.addIceCandidate(жаңа RTCIceCandidate(деректер)); )); socket.on("ice2", функция (деректер) ( console.log("socket.on("ice2"):", деректер); pc1.addIceCandidate(жаңа RTCIceCandidate(деректер)); )); socket.on("қосу", функция (деректер) ( console.log("socket.on("hangup"):", деректер); remoteVideo2.src = ""; pc2.close(); pc2 = null; ) );
Сервер бөлігіСервер жағында nodetest2 файлын rtctest4.js жаңа атауымен сақтаңыз және io.sockets.on("қосылу", функция (сокет) ( ... ) функциясының ішінде біз клиенттік хабарламаларды қабылдау және жіберуді қосамыз:
Socket.on("ұсыныс", функция (деректер) ( // Біз "ұсыныс" хабарын алған кезде, // бұл мысалда бір ғана клиенттік қосылым болғандықтан, // хабарды сол ұяшық арқылы қайта жібереміз. .emit("offer" , data // Егер хабарды жіберушіден басқа барлық қосылымдар арқылы жіберу қажет болса: // soket.broadcast.emit("ұсыныс", деректер )); socket.on("жауап", функция (деректер) ( socket.emit("жауап", деректер); )); socket.on("ice1", функция (деректер) ( socket.emit("ice1", деректер); )); socket.on("ice2", функция (деректер) ( socket.emit("ice2", деректер); )); socket.on("қосу", функция (деректер) ( socket.emit("қосу", деректер); ));
Сонымен қатар, HTML файлының атын өзгертейік:
// res.sendfile(__dirname + "/nodetest2.html"); // HTML файлын жіберу res.sendfile(__dirname + "/rtctest4.html");
Серверді іске қосу:
$ sudo nodejs nodetest2.js
Екі клиенттің коды бір шолғыш қойындысында орындалғанына қарамастан, біздің мысалдағы қатысушылар арасындағы барлық өзара әрекеттесу толығымен желі арқылы жүзеге асырылады және қатысушыларды «бөлу» ешқандай ерекше қиындықтарды қажет етпейді. Дегенмен, біз жасаған іс те өте қарапайым болды - бұл технологиялар жақсы, өйткені оларды пайдалану оңай. Тіпті кейде алдамшы. Атап айтқанда, STUN/TURN серверлерінсіз біздің мысал мекенжай аудармасы мен брандмауэр болған жағдайда жұмыс істей алмайтынын ұмытпайық.
ҚорытындыАлынған мысал өте қарапайым, бірақ егер сіз оқиға өңдеушілерін шақырушы мен шақырылатын тарап арасында айырмашылығы болмайтындай етіп сәл әмбебаптандырсаңыз, екі pc1 және pc2 нысандарының орнына RTCPeerConnection массивін жасаңыз және элементтерді динамикалық құру мен жоюды жүзеге асырыңыз. , содан кейін сіз толығымен қолдануға болатын бейне чатты аласыз. WebRTC-пен байланысты арнайы ерекшеліктер жоқ және журналмен бірге келетін дискіде бірнеше қатысушыларға арналған қарапайым бейне сұхбаттың мысалы (сонымен қатар мақаладағы барлық мысалдардың мәтіндері) бар. Дегенмен, сіз Интернетте көптеген жақсы мысалдарды таба аласыз. Атап айтқанда, мақаланы дайындау кезінде мыналар пайдаланылды: simpl.info getUserMedia, simpl.info RTCPeerConnection, WebRTC Reference App.
Жақында WebRTC арқасында дауыстық және бейне байланыстарды түсінуімізде ғана емес, сонымен бірге Интернетті тұтастай қабылдауымызда да революция болады деп болжауға болады. WebRTC браузерден шолғышқа қоңырау шалу технологиясы ретінде ғана емес, сонымен қатар нақты уақыттағы байланыс технологиясы ретінде де орналастырылған. Біз талқылаған бейне байланыс - оны пайдаланудың ықтимал нұсқаларының аз ғана бөлігі. Скринкастинг пен ынтымақтастық мысалдары, тіпті RTCDataChannel арқылы браузерге негізделген P2P мазмұнды жеткізу желісі қазірдің өзінде бар.
Бүгінгі таңда WebRTC - браузерлерде аудио және бейне ағынының «ыстық» технологиясы. Консервативті технологиялар, мысалы, HTTP Streaming және Flash, жазылған мазмұнды (сұраныс бойынша бейне) тарату үшін қолайлы және нақты уақыт пен онлайн-хабарламалар тұрғысынан WebRTC-тен айтарлықтай төмен, яғни. Көрермендерге не болып жатқанын «тікелей» көруге мүмкіндік беру үшін ең аз бейне кідірісі қажет.
Нақты уақыттағы жоғары сапалы байланыстың мүмкіндігі WebRTC архитектурасының өзінен туындайды, мұнда UDP хаттамасы бейне ағындарын тасымалдау үшін пайдаланылады, ол бейнені минималды кідірістермен берудің стандартты негізі болып табылады және нақты уақыттағы байланыс жүйелерінде кеңінен қолданылады.
Байланыстың кешігуі онлайн-хабар тарату жүйелерінде, вебинарларда және бейне көзімен, соңғы пайдаланушылармен интерактивті байланысты қажет ететін және шешімді қажет ететін басқа қолданбаларда маңызды.
WebRTC-ті сынап көрудің тағы бір жақсы себебі - бұл сөзсіз тренд. Бүгінгі күні кез келген Android Chrome браузері бұл технологияны қолдайды, ол миллиондаған құрылғыларға ешқандай қосымша бағдарламалық жасақтама немесе конфигурация орнатпай-ақ трансляцияны көруге дайын кепілдік береді.
WebRTC технологиясын іс жүзінде сынау және оған қарапайым онлайн хабар таратуды іске қосу үшін біз Flashphoner WebRTC Media & Broadcasting Server сервер бағдарламалық құралын қолдандық. Мүмкіндіктер WebRTC ағындарын бір-көп режимінде тарату мүмкіндігін, сондай-ақ RTSP протоколы арқылы IP камералары мен бейнебақылау жүйелерін қолдауды көрсетеді; Бұл шолуда біз веб-веб-таратуларға және олардың мүмкіндіктеріне тоқталамыз.
WebRTC Media & Broadcasting Server орнатуWindows жүйесіне арналған сервердің нұсқасы болмағандықтан және VMWare+Linux сияқты виртуалды машинаны орнатқым келмегендіктен, үйдегі Windows компьютерімде онлайн таратылымдарды тексере алмадым. Уақытты үнемдеу үшін біз бұлтты хостингтің мысалын алуды шештік:
Бұл Амстердам деректер орталығында алдын ала орнатылған бағдарламалық құралсыз Centos x86_64 6.5 нұсқасы болды. Осылайша, біздің қолымызда тек сервер және оған ssh қатынасы бар. Linux консоль командаларымен таныс адамдар үшін WebRTC серверін орнату қарапайым және ауыртпалықсыз болады. Сонымен, біз не істедік:
1. Мұрағатты жүктеп алыңыз:
$wget https://site/download-wcs5-server.tar.gz
2. Орамнан шығару:
$tar -xzf download-wcs5-server.tar.gz
3. Орнату:
$cd FlashphonerWebCallServer
Орнату кезінде сервердің IP мекенжайын енгізіңіз: XXX.XXX.XXX.XXX
4. Лицензияны іске қосыңыз:
$cd /usr/local/FlashphonerWebCallServer/bin
$./activation.sh
5. WCS серверін іске қосыңыз:
$service webcallserver іске қосылады
6. Журналды тексеріңіз:
$tail - f /usr/local/FlashphonerWebCallServer/logs/flashphoner_manager.log
7. Екі процестің орнында екенін тексеріңіз:
$ps aux | grep Flashphoneer
Орнату процесі аяқталды.
WebRTC онлайн таратылымдарын сынауТрансляцияларды сынау қарапайым мәселе болып шықты. Серверден басқа, ондаған Javascript, HTML және CSS файлдарынан тұратын веб-клиент бар және біз орнату кезеңінде /var/www/html қалтасына орналастырдық. Веб-клиент HTML5 Websockets арқылы сервермен байланыс орнатуы үшін сервердің IP мекенжайын flashphoner.xml конфигурациясына енгізу керек болды. Тестілеу процесін сипаттайық.
1. Chrome браузерінде index.html сынақ клиенті бетін ашыңыз:
2. Трансляцияны бастау үшін экранның ортасындағы «Бастау» түймесін басу керек.
Мұны жасамас бұрын веб-камера қосылғанына және пайдалануға дайын екеніне көз жеткізу керек. Веб-камера үшін арнайы талаптар жоқ, мысалы, біз 1280x800 рұқсатымен ноутбукке орнатылған стандартты камераны қолдандық.
Chrome браузері міндетті түрде камера мен микрофонға қол жеткізуді сұрайды, осылайша пайдаланушы оның бейнесі Интернет серверіне жіберілетінін түсінеді және оған рұқсат береді.
3. Интерфейс бейне ағынының камерадан WebRTC серверіне сәтті таратылуын білдіреді. Жоғарғы оң жақ бұрышта индикатор ағынның серверге өтіп жатқанын көрсетеді; төменгі бұрышта бейнені жіберуді тоқтату үшін «Тоқтату» түймесі бар.
Төмендегі жолақтағы сілтемеге назар аударыңыз. Онда осы ағын үшін бірегей идентификатор бар, сондықтан кез келген адам қарауға қосыла алады. Бұл сілтемені браузеріңізде ашыңыз. Оны алмасу буферіне көшіру үшін «Көшіру» түймесін басыңыз.
Вебинарлар, лекциялар, онлайн бейне хабарлар немесе интерактивті теледидар сияқты нақты қосымшаларда әзірлеушілер бұл идентификаторды көрермендердің белгілі топтарына таратуды жүзеге асыруы керек, сонда олар қалаған ағындарға қосыла алады, бірақ бұл қазірдің өзінде қолданбаның логикасы. . WebRTC Media & Broadcasting Server оған әсер етпейді, тек бейнені таратады.
5. Байланыс орнатылып, көрермен экранда ағынды көреді. Енді ол төменгі оң жақ бұрыштағы басқару элементтерін пайдаланып басқа біреуге сілтеме жібере алады, ағынды ойнатуды тоқтата алады немесе толық экран режимін қоса алады.
Сынақтар кезінде кідіріс мінсіз болып көрінді. Деректер орталығына пинг шамамен 100 миллисекунд болды және кідіріс көзге көрінбейді. Осы жерден біз нақты кідіріс буферлеу уақыты үшін бірдей 100 плюс немесе минус бірнеше ондаған миллисекундтар деп болжауға болады. Flash бейнесімен салыстырғанда: мұндай сынақтарда Flash WebRTC сияқты әрекет етпейді. Сонымен, егер сіз қолыңызды ұқсас желіде жылжытсаңыз, экрандағы қозғалыс бір-екі секундтан кейін ғана көрінеді.
Сапаға келетін болсақ, текшелерді кейде қозғалыстармен ажыратуға болатынын ескереміз. Бұл VP8 кодекінің сипатына және оның негізгі мақсатына сәйкес келеді - қолайлы сапамен және байланыс кідірістерінсіз нақты уақыттағы бейне байланысты қамтамасыз ету.
Серверді орнату және конфигурациялау өте оңай; оны іске қосу ssh арқылы консольден пәрмендерді орындай алатын және мәтіндік редакторды қолдана алатын озық пайдаланушы деңгейінде Linux-ті білуден басқа ешқандай маңызды дағдыларды қажет етпейді. Нәтижесінде біз браузерлер арасында бір-көп онлайн-трансляциясын орната алдық. Қосымша көрермендерді ағынға қосу да ешқандай қиындық тудырмады.
Трансляция сапасы вебинарлар мен онлайн-хабарламалар үшін өте қолайлы болып шықты. Біраз сұрақ тудырған жалғыз нәрсе - бейне резолюция. Камера 1280x800-ді қолдайды, бірақ сынақ кескініндегі ажыратымдылық 640x480-ге өте ұқсас. Бұл мәселені әзірлеушілермен түсіндіру керек сияқты.
Веб-камерадан тестілеу туралы бейнеWebRTC сервері арқылы
Бұл мақаланың мақсаты – құрылымымен және жұмыс принципімен танысу үшін тең дәрежелі бейне чаттың (p2p бейне чат) демо үлгісін пайдалану. Осы мақсатта біз webrtc.io-demo демо-пайдаланушылы бейне чатты қолданамыз. Оны мына сілтемеден жүктеп алуға болады: https://github.com/webRTC/webrtc.io-demo/tree/master/site.
Айта кету керек, GitHub - бұл веб-жобаларды бірлесіп әзірлеуге арналған сайт немесе веб-сервис. Онда әзірлеушілер өз әзірлемелерінің кодтарын орналастыра алады, оларды талқылап, бір-бірімен байланыса алады. Сонымен қатар, кейбір ірі IT-компаниялар осы сайтта өздерінің ресми репозиторийлерін орналастырады. Ашық бастапқы жобалар үшін қызмет тегін. GitHub ашық, тегін бастапқы код кітапханаларына арналған репозиторий болып табылады.
Сонымен, жеке компьютердің C дискісінде GitHub сайтынан жүктеп алынған «тең-теңімен» бейне сұхбатының демонстрациялық үлгісін «webrtc_demo» қолданбасы үшін жасалған каталогқа орналастырамыз.
Күріш. 1
Құрылымнан (1-сурет) көрінетіндей, тең дәрежелі бейне сұхбат JavaScript бағдарламалау тілінде жүзеге асырылған клиент script.js және server server.js сценарийлерінен тұрады. Скрипт (кітапхана) webrtc.io.js (КЛИЕНТ) – тең дәрежелі схеманы пайдалана отырып, браузерлер арасында нақты уақыттағы байланысты ұйымдастыруды қамтамасыз етеді: «клиент-клиент», және webrtc.io.js (CLIENT) және webrtc. io.js (СЕРВЕР), WebSocket протоколын пайдалана отырып, олар клиент-сервер архитектурасын пайдаланып браузер мен веб-сервер арасында дуплексті байланысты қамтамасыз етеді.
webrtc.io.js (SERVER) сценарийі webrtc.io кітапханасына кіреді және node_modules\webrtc.io\lib каталогында орналасқан. index.html бейне чат интерфейсі HTML5 және CSS3-те жүзеге асырылады. webrtc_demo қолданбасының файлдарының мазмұнын html редакторларының бірі арқылы көруге болады, мысалы, «Блокнот++».
Біз компьютердің файлдық жүйесінде бейне сұхбаттың жұмыс принципін тексереміз. Компьютерде серверді (server.js) іске қосу үшін node.js орындалу ортасын орнату қажет. Node.js браузерден тыс JavaScript кодын іске қосуға мүмкіндік береді. Сіз node.js файлын мына сілтемеден жүктей аласыз: http://nodejs.org/ (07/15/13 жағдайындағы v0.10.13 нұсқасы). node.org веб-сайтының негізгі бетінде жүктеу түймесін басып, http://nodejs.org/download/ сайтына өтіңіз. Windows пайдаланушылары үшін алдымен win.installer (.msi) жүктеп алыңыз, содан кейін компьютерде win.installer (.msi) бағдарламасын іске қосыңыз және Бағдарлама файлдары каталогында nodejs және "npm бума менеджерін" орнатыңыз.
Күріш. 2
Осылайша, node.js JavaScript кодын әзірлеуге және іске қосуға арналған ортадан, сондай-ақ менеджер немесе npm пакет менеджері арқылы орнатуға болатын ішкі модульдер жинағынан тұрады.
Модульдерді орнату үшін қолданбалар каталогындағы пәрмен жолында пәрменді орындау қажет (мысалы, "webrtc_demo"): npm install module_name. Модульдерді орнату процесі кезінде npm менеджері орнату орындалған каталогта node_modules қалтасын жасайды. Жұмыс барысында nodejs модульдерді node_modules каталогынан автоматты түрде қосады.
Сонымен, node.js орнатқаннан кейін пәрмен жолын ашыңыз және npm бума менеджерін пайдаланып webrtc_demo каталогының node_modules қалтасындағы экспресс модульді жаңартыңыз:
C:\webrtc_demo>npm орнату экспресс
Экспресс модулі node.js үшін веб-рамка немесе қолданбаларды әзірлеуге арналған веб-платформа болып табылады. Экспресске жаһандық қол жеткізу үшін оны келесі жолмен орнатуға болады: npm install -g express .
Содан кейін webrtc.io модулін жаңартыңыз:
C:\webrtc_demo>npm webrtc.io орнатыңыз
Содан кейін пәрмен жолында серверді іске қосамыз: server.js:
C:\webrtc_demo>түйін server.js
Күріш. 3
Міне, сервер сәтті жұмыс істеуде (3-сурет). Енді веб-шолғышты пайдаланып, серверге IP мекенжайы бойынша хабарласып, index.html веб-бетін жүктей аласыз, одан веб-шолғыш клиенттің сценарий кодын - script.js және webrtc.io.js сценарий кодын шығарады және оларды орындаңыз. Тең-теңімен бейне чатты басқару үшін (екі браузер арасында байланыс орнату үшін) webrtc қолдайтын екі шолғыштың node.js жүйесінде жұмыс істейтін сигнал серверіне хабарласу керек.
Нәтижесінде байланыс қосымшасының клиент бөлігінің интерфейсі (бейне чат) камера мен микрофонға кіруге рұқсат сұрауымен ашылады (4-сурет).
Күріш. 4
«Рұқсат ету» түймесін басқаннан кейін мультимедиялық байланыс үшін камера мен микрофон қосылады. Сонымен қатар, бейне чат интерфейсі арқылы мәтіндік деректер арқылы байланысуға болады (Cурет 5).
Күріш. 5
Айта кету керек. Сервер сигналдық сервер болып табылады және негізінен пайдаланушы браузерлері арасында байланыс орнатуға арналған. Node.js WebRTC сигналын қамтамасыз ететін server.js сервер сценарийін басқару үшін пайдаланылады.
Кіріспе. WebRTC негізіндегі P2P бейне чаты Skype және басқа байланыс құралдарына балама болып табылады. WebRTC негізіндегі p2p бейне сұхбатының негізгі элементтері браузер және контакт сервері болып табылады. P2P бейне чаттары – сервер ақпарат ағындарын жіберуге қатыспайтын тең дәрежелі бейне чаттар. Ақпарат ешқандай қосымша бағдарламаларсыз пайдаланушылардың браузерлері (теңдері) арасында тікелей тасымалданады. Браузерлерден басқа, p2p бейне чаттары пайдаланушыларды тіркеуге, олар туралы деректерді сақтауға және пайдаланушылар арасында ауысуды қамтамасыз етуге арналған байланыс серверлерін пайдаланады. Соңғы WebRTC және HTML5 технологияларын қолдайтын шолғыштар лезде мәтіндік хабар алмасуды және файлдарды жіберуді, сондай-ақ IP желілері арқылы дауыстық және бейне байланысты қамтамасыз етеді.
Сонымен, чаттар, веб чаттар, веб-интерфейстегі дауыстық және бейне чаттар, IMS, VoIP композиттік пакеттік коммутацияланған желілер арқылы онлайн байланыстарды қамтамасыз ететін қызметтер. Әдетте, байланыс қызметтері пайдаланушы құрылғыларында (ДК, смартфондар және т.б.) клиенттік қосымшаларды орнатуды немесе браузерлерде плагиндер мен кеңейтімдерді орнатуды талап етеді. Қызметтердің өз коммуникациялық желілері бар, олардың көпшілігі клиент-сервер архитектурасына салынған.
Байланыс қызметтері - дауыс, бейне, деректер және мәтіндік арналар біріктірілмеген, IMS-тен басқа қолданбалар. Әрбір қызметтің желілерінде, . Айта кету керек, бұл қолданбалар бір уақытта бірнеше байланыс желілерінде жұмыс істей алмайды, яғни. Қолданбалар әдетте бір-бірімен байланыса алмайды, бұл әрбір байланыс желісі үшін бөлек қолданбаны орнатуды талап етеді.
Нақты уақыттағы байланыс қызметтерін біріктіру мәселесі (чат, телефония, бейнеконференция), т.б. дауыс, бейне, деректер арналарын біріктіру және оларға бір қолданбаны (браузер) пайдалана отырып қол жеткізу WebRTC хаттамасы негізінде бір-теңімен немесе p2p бейне чаттары (тең-теңімен, нүкте-нүкте) арқылы шешілуі мүмкін. Негізінде, WebRTC қолдайтын шолғыш байланыс қызметтерімен жұмыс істейтін барлық пайдаланушы құрылғылары (ДК, смартфондар, iPad, IP телефондары, ұялы телефондар және т.б.) үшін бірыңғай интерфейске айналады.
Бұл нақты уақыттағы байланыстарды қамтамасыз ететін барлық технологияларды браузерде енгізуді қамтамасыз ететін WebRTC. P2p бейне чаттарының мәні мультимедиялық және мәтіндік деректер сервердің немесе қосымша бағдарламалардың қатысуынсыз пайдаланушылардың браузерлері арасында (қашықтан қарау) тікелей тасымалданады. Осылайша, браузерлер серверлерде сақталған барлық дерлік Интернет-ақпараттық ресурстарға қол жеткізуді қамтамасыз етіп қана қоймайды, сонымен қатар нақты уақыттағы барлық байланыс қызметтеріне және пошта қызметтеріне (дауыс поштасы, электрондық пошта, SMS және т.б.) қол жеткізу құралына айналады.
p2p бейне чаттарының серверлері (байланыс серверлері) тек пайдаланушыларды тіркеуге, пайдаланушылар туралы деректерді сақтауға және пайдаланушылардың браузерлері арасында байланыс орнатуға (ауысуға) арналған. Алғашқы p2p бейне сұхбаттары флеш технологиялары арқылы жүзеге асырылды. Flash p2p бейне чаттары, мысалы, әлеуметтік желілерде қолданылады. Flash p2p бейне чаттары жоғары сапалы мультимедиялық деректерді беруді қамтамасыз етпейді. Сонымен қатар, p2p флэш бейне чаттарындағы микрофон мен бейне камерадан дауыс пен бейне ағынын шығару үшін веб-шолғышта флэш плагинін орнату қажет.
Бірақ телекоммуникациялық қызметтердің жаңа буыны Интернет арқылы байланысу үшін WebRTC протоколдарын және HTML5 спецификациясын қолдайтын браузерлер мен байланыс серверлерін ғана пайдаланатын веб-коммуникацияларды қамтиды. Мұндай браузермен жабдықталған кез келген пайдаланушы құрылғысы (ДК, iPad, смартфондар және т.б.) жоғары сапалы дауыстық және бейне қоңырауларды, сондай-ақ жедел мәтіндік хабарламалар мен файлдарды тасымалдауды қамтамасыз ете алады.
Сонымен, веб-коммуникацияның жаңа технологиясы (p2p чаттар, бейне чаттар) WebRTC протоколы болып табылады. WebRTC HTML5, CSS3 және JavaScript-пен бірге әртүрлі веб-қосымшаларды жасауға мүмкіндік береді. WebRT веб-коммуникацияларды (тең-теңімен желілер) нақты уақыт режимінде бір-теңімен архитектурасын пайдалана отырып ұйымдастыруға арналған. WebRTC негізіндегі P2P чаттары файлдарды тасымалдауды, сондай-ақ браузердегі сыртқы қондырмалар мен плагиндерді қолданбай тек веб-шолғыштарды пайдаланып, интернет арқылы пайдаланушылар арасындағы мәтіндік, дауыстық және бейне байланысты қамтамасыз етеді.
p2p чаттарында сервер тек екі шолғыш арасында p2p байланысын орнату үшін пайдаланылады. WebRTC протоколына негізделген p2p чатының клиенттік бөлігін жасау үшін HTML5, CSS3 және JavaScript пайдаланылады. Клиент қолданбасы WebRTC API арқылы браузерлермен әрекеттеседі.
WebRTC үш JavaScript API арқылы жүзеге асырылады:
- RTCPeerConnection;
- MediaStream(getUserMedia);
- RTCDataChannel.
Браузерлер медиа деректерін UDP үстінде жұмыс істейтін SRTP протоколы арқылы тасымалдайды. NAT Интернет арқылы p2p қосылымдарын пайдаланатын NAT маршрутизаторларының артындағы браузерлер (клиенттер) үшін проблемалар туғызатындықтан, STUN NAT аудармашыларын айналып өту үшін пайдаланылады. STUN – UDP тасымалдау протоколының үстінде жұмыс істейтін клиент-сервер протоколы. P2p чаттарында, әдетте, жалпыға ортақ STUN сервері пайдаланылады, ал одан алынған ақпарат, егер олар NAT артында болса, екі браузер арасындағы UDP қосылымы үшін пайдаланылады.
WebRTC қолданбаларын енгізу мысалдары (p2p чаттар, дауыстық және бейне веб чаттар):
1. WebRTC негізіндегі P2P бейне чатын Bistri (бір рет басу арқылы бейне чат, p2p чат) Bistri сайтында ашуға болады. Bistri браузерде қосымша бағдарламалар мен плагиндерді орнатпай жұмыс істейді. Жұмыстың мәні келесідей: көрсетілген сілтеме арқылы p2p бейне чатын ашыңыз, ашылатын интерфейсте тіркелгеннен кейін серіктестерді шақырыңыз, содан кейін теңдесті клиенттер тізімінен желіде тұрған серіктесті таңдап, «бейне қоңырау» түймесін басыңыз. ” түймесі.
Нәтижесінде MediaStream (getUserMedia) микрофон + веб-камераны түсіреді, ал сервер таңдалған серіктеспен сигналдық хабарламалармен алмасады. Сигнал хабарламаларымен алмасудан кейін PeerConnection API дауыс және бейне ағындарын жіберуге арналған арналарды жасайды. Сонымен қатар, Bistri жылдам мәтіндік хабарлар мен файлдарды тасымалдайды. Суретте. 1 Bistri p2p бейне чат интерфейсінің скриншотын көрсетеді.
Күріш. 1. P2P бейне чат Бистри
2. Twelephone (p2p видео чат, p2p чат, SIP Twelephone) – бұл клиенттік қосымша HTML5 және WebRTC негізінде құрастырылған, ол дауыстық және бейне қоңыраулар жасауға, сондай-ақ лезде мәтіндік хабарламаларды жіберуге мүмкіндік береді, яғни. Twelephone сынақ p2p чатын, бейне чатты және SIP Twelephone телефонын қамтиды. Айта кету керек, Twelephone SIP протоколын қолдайды және енді сіз Twitter тіркелгісін телефон нөмірі ретінде пайдаланып SIP телефондарынан дауыстық және бейне қоңыраулар шалуға және қабылдауға болады. Сонымен қатар, микрофон арқылы мәтіндік хабарламаларды дауыспен енгізуге болады, ал дауысты тану бағдарламасы мәтінді «Хабар жіберу» жолына енгізеді.
Twelephone — қосымша бағдарламалық құралсыз 25-нұсқадан бастап Google Chrome браузері негізінде жұмыс істейтін веб-телефония. Twelephone құрылғысын Крис Матье жасаған. Twelephone сервері Node.js сайтында құрастырылған. Сервер (байланыс сервері) тек екі браузер немесе WebRTC клиенттері арасында p2p байланысын орнату үшін пайдаланылады. Twelephone қолданбасының жеке авторизация құралдары жоқ, бірақ Twitter-дегі тіркелгіге қосылуға бағытталған.
Суретте. 2 Twelephone p2p бейне чат интерфейсінің скриншотын көрсетеді.
Күріш. 2. P2P телефон телефоны
3. Топтық p2p бейне чаты Conversat.io соңғы WebRTC және HTML5 технологияларына негізделген. Conversat бейне чаты SimpleWebRTC кітапханасы негізінде әзірленген және бір бөлмеде 6-ға дейін теңдес-клиенттер арасындағы қарым-қатынасқа арналған (байланыс үшін «Сөйлесуге ат қою» жолында серіктес клиенттерге арналған ортақ бөлменің атын көрсетіңіз). P2P бейне чаты Conversat пайдаланушыларға байланыс серверінде тіркелмей байланыс қызметтерін ұсынады. Суретте. 3-суретте Conversat p2p бейне чат интерфейсінің скриншоты көрсетілген.
Күріш. 3. P2P топтық бейне чат Conversat.io
WebRTC негізіндегі P2P бейне чаттарына қатысу үшін пайдаланушыларда WebRTC протоколын және HTML5 спецификациясын қолдайтын браузер орнатылған болуы керек. Қазіргі уақытта 25 нұсқасынан басталатын Google Chrome браузерлері және Mozilla Firefox Nightly WebRTC протоколын және HTML5 спецификациясын қолдайды. WebRTC қолданбалары кескін және дыбысты жіберу сапасы жағынан Flash қолданбаларынан жоғары.
WebRTC (Web Real-Time Communications) – веб-қосымшалар мен сайттарға аудио және/немесе бейне мультимедиа ағындарын түсіруге және таңдаулы түрде беруге, сондай-ақ міндетті түрде делдалдарды пайдаланбай браузерлер арасында еркін деректер алмасуға мүмкіндік беретін технология. WebRTC технологиясы кіретін стандарттар жиынтығы пайдаланушыға плагиндерді немесе кез келген басқа үшінші тарап бағдарламалық құралын орнатпай-ақ деректер алмасуға және бір-теңімен телеконференциялар өткізуге мүмкіндік береді.
WebRTC бірнеше өзара байланысты қолданбалы бағдарламалау интерфейстерінен (API) және бірге жұмыс істейтін протоколдардан тұрады. Мұнда таба алатын құжаттама WebRTC негіздерін, деректер мен медиа ағыны үшін қосылымды орнату және пайдалану жолын және т.б. түсінуге көмектеседі.
ҮйлесімділікWebRTC енгізу әлі бастапқы кезеңде болғандықтан және әрбір браузерде WebRTC функциясы болғандықтан, кодпен жұмыс істеуді бастамас бұрын Google-дың Adapter.js политолтыру кітапханасын пайдалануды ұсынамыз.
Adapter.js оны қолдайтын мәтінмәндер арасындағы WebRTC іске асыруларындағы айырмашылықтарды біркелкі жою үшін сыналар мен көп толтыруларды пайдаланады. Adapter.js сонымен қатар жеткізуші префикстерін және басқа сипат атауларының айырмашылықтарын өңдейді, бұл WebRTC жүйесінде ең үйлесімді нәтижелермен әзірлеуді жеңілдетеді. Кітапхана NPM бумасы ретінде де қол жетімді.
Adapter.js кітапханасын қосымша зерттеу үшін қараңыз.
WebRTC тұжырымдамалары және қолданылуыWebRTC көп мақсатты болып табылады және -мен бірге Интернетке арналған қуатты мультимедиялық мүмкіндіктерді, соның ішінде аудио және бейне конференцияларды қолдауды, файлдарды ортақ пайдалануды, экранды түсіруді, сәйкестікті басқаруды және DTMF дыбыстық теруді қоса алғанда, бұрынғы телефон жүйелерімен өзара әрекеттесу мүмкіндігін қамтамасыз етеді. Түйіндер арасындағы қосылымдар арнайы драйверлерді немесе плагиндерді пайдаланбай, көбінесе аралық қызметтерсіз жасалуы мүмкін.
Екі түйін арасындағы байланыс RTCPeerConnection интерфейс нысаны ретінде ұсынылған. Қосылым орнатылып, ашылғаннан кейін RTCPeerConnection нысанын пайдаланып, қосылымға медиа ағындарын ( MediaStream ) және/немесе деректер арналарын ( RTCDataChannel s ) қосуға болады.
Медиа ағындары медиа ақпаратының кез келген санынан (тректерден) тұруы мүмкін. Бұл тректер MediaStreamTrack интерфейс нысандарымен ұсынылған және аудио, бейне, мәтінді (субтитрлер немесе тарау тақырыптары сияқты) қоса, медиа деректерінің бір немесе бірнеше түрін қамтуы мүмкін. Көптеген ағындар кем дегенде бір аудио тректен (бір аудио трек) немесе бейне жолдан тұрады және оларды ағындар (нақты уақыттағы медиа) ретінде жіберуге және қабылдауға немесе файлға сақтауға болады.
Сондай-ақ, RTCDataChannel интерфейс нысанын пайдаланып ерікті деректермен алмасу үшін екі түйін арасындағы байланысты пайдалануға болады, ол қызметтік ақпаратты, қор нарығының деректерін, ойын күйі пакеттерін, файлдарды тасымалдау немесе жеке деректер арналарын жіберу үшін пайдаланылуы мүмкін.
қосымша мәліметтер мен тиісті нұсқаулықтар мен оқулықтарға сілтемелер қажет
WebRTC интерфейстеріWebRTC әртүрлі тапсырмаларды орындау үшін бірге жұмыс істейтін интерфейстерді қамтамасыз ететіндіктен, біз оларды санаттарға бөлдік. Жылдам шарлау үшін бүйірлік тақтаның индексін қараңыз.
Қосылымды орнату және басқаруБұл интерфейстер WebRTC қосылымдарын конфигурациялау, ашу және басқару үшін пайдаланылады. Олар екі жақты мультимедиялық қосылымды орнату үшін ең жақсы конфигурацияны таңдау үшін әрбір түйіннің мүмкіндіктері туралы ақпарат алмасу үшін пайдаланылатын бір қабатты медиа қосылымдарын, деректер арналарын және интерфейстерді білдіреді.
RTCPeerConnection Жергілікті компьютер мен қашықтағы түйін арасындағы WebRTC қосылымын білдіреді. Екі түйін арасында сәтті деректерді тасымалдауды өңдеу үшін пайдаланылады. RTCSessionDescription Сеанс параметрлерін көрсетеді. Әрбір RTCSessionDescription келіссөздер процесінің қай бөлігін (ұсыныс/жауап) сипаттайтынын көрсететін түрдің сипаттамаларын және сеанс үшін SDP дескрипторын қамтиды. RTCIceCandidate RTCPeerConnection қосылымын орнатуға арналған Интернет қосылымының (ICE) сервер үміткерін білдіреді. RTCIceTransport Интернетке қосылу құралы (ICE) ақпаратын білдіреді. RTCPeerConnectionIceEvent ICE үміткерлерінде болатын оқиғаларды көрсетеді, әдетте RTCPeerConnection . Осы оқиға нысанына бір түрі жіберіледі: icecandidate. RTCRtpSender RTCPeerConnection түріндегі нысан үшін MediaStreamTrack түріндегі нысан арқылы деректер ағынын және берілуін басқарады. RTCRtpReceiver RTCPeerConnection түріндегі нысан үшін MediaStreamTrack түріндегі нысан арқылы деректерді қабылдауды және декодтауды басқарады. RTCTrackEvent Жаңа кіріс MediaStreamTrack нысаны жасалғанын және RTCRtpReceiver нысаны RTCPeerConnection нысанына қосылғанын көрсетеді. RTCCertificate RTCPeerConnection нысанын пайдаланатын сертификатты білдіреді. RTCDataChannel Екі қосылым түйіні арасындағы екі бағытты деректер арнасын көрсетеді. RTCDataChannelEvent RTCDataChannel түріндегі нысан RTCPeerConnection datachannel түріндегі нысанға тіркелгенде көтерілетін оқиғаларды білдіреді. RTCDTMFSender RTCPeerConnection түріндегі нысан үшін қос тонды көп жиілікті (DTMF) сигнализациясының кодталуын және берілуін басқарады. RTCDTMFToneChangeEvent Кіріс қос тонды көп жиілікті (DTMF) тонды өзгерту оқиғасын көрсетеді. Бұл оқиға көпіршіктенбейді (егер басқаша көрсетілмесе) және жойылмайды (егер басқаша көрсетілмесе). RTCStatsReport Өткізілген MediaStreamTrack нысанының күйін асинхронды түрде хабарлайды. RTCIdentityProviderRegistrar Идентификатор провайдерін (idP) тіркейді. RTCIdentityProvider Браузердің жеке куәлік декларациясын жасауды немесе тексеруді сұрау мүмкіндігін қосады. RTCIdentityAssertion Ағымдағы қосылымның қашықтағы түйін идентификаторын білдіреді. Егер түйін әлі орнатылмаған және расталмаған болса, интерфейс сілтемесі null мәнін қайтарады. Орнатқаннан кейін өзгермейді. RTCIdentityEvent Сәйкестендіру провайдері (idP) мәлімдеме оқиғасының нысанын көрсетеді. RTCPeerConnection түріндегі объектінің оқиғасы. Бір түр осы identityresult оқиғасына жіберіледі. RTCIdentityErrorEvent Сәйкестендіру провайдерімен (idP) байланысты қате оқиғасы нысанын көрсетеді. RTCPeerConnection түріндегі объектінің оқиғасы. Бұл оқиғаға қатенің екі түрі жіберіледі: idpassertionerror және idpvalidationerror. Нұсқаулар WebRTC архитектурасына шолу Әзірлеушілер WebRTC жасау және пайдалану үшін пайдаланатын API астында желілік протоколдар мен қосылым стандарттарының жинағы орналасқан. Бұл шолу осы стандарттарды көрсету болып табылады. WebRTC ерікті деректерді, аудио, бейне ағындарын немесе олардың кез келген комбинациясын шолғышта тасымалдау үшін түйіннен түйінге режимінде қосылымды ұйымдастыруға мүмкіндік береді. Бұл мақалада біз WebRTC сеансының қызмет ету мерзімін қарастырамыз, ол қосылым орнатылуынан бастап, ол қажет болмай қалғанда тоқтатылғанға дейін жалғасады. WebRTC API шолуы WebRTC бірнеше өзара байланысты қолданбалы бағдарламалау интерфейстерінен (API) және екі немесе одан да көп түйіндер арасында деректер мен медиа ағындарын алмасуды қолдау үшін бірге жұмыс істейтін протоколдардан тұрады. Бұл мақалада осы API интерфейстерінің әрқайсысына қысқаша шолу және олар қандай мақсатта қызмет етеді. WebRTC негіздері Бұл мақала кросс-шолғышты RTC қолданбасын жасау арқылы көрсетеді. Осы мақаланың соңында сізде жұмыс істейтін нүктеден нүктеге деректер мен медиа арна болуы керек. WebRTC протоколдары Бұл мақала WebRTC API толықтыратын хаттамаларды ұсынады. Бұл нұсқаулық түйіннен түйінге қосылымды және байланыстыруды қалай пайдалануға болатынын сипаттайды