webrtc бар веб-қосымшалар. Браузердегі камера

OpenTok, PubNub және WebRTC

WebRTC негізіндегі байланыс қызметтерін дамытуға арналған OpenTok және PubNub бұлттық платформалары

Қазіргі уақытта веб-бейне чаттар барған сайын танымал бола бастады. Web Video Chat – бұл веб-сервер мен браузерлер негізінде құрылған интерактивті байланысқа арналған веб-қосымша.

Веб-бейне чаттарды құрудың барлық қолданыстағы технологияларының ішінде (Ajax; Java; Flash технологиялары; ASP.Net + Silverlight; WebRTC API негізіндегі HTML5 + JavaScript және т.б.) ең көп. перспективалы технология WebRTC API болып табылады. WebRTC технологиясы негізінде құрастырылған веб чаттар браузерлерде қосымша плагиндер немесе кеңейтімдерді орнатпай мәтінді, дауысты, бейнені және деректерді (файлдарды) жоғары сапалы тасымалдауды қамтамасыз етеді. WebRTC бейне сұхбатының негізгі элементтері браузер және контакт сервері болып табылады.

WebRTC қолдайтын шолғыш байланыс қызметтерімен жұмыс істейтін барлық пайдаланушы құрылғылары (ДК, смартфондар, iPad, IP телефондары, ұялы телефондар және т.б.) біртұтас интерфейске айналады. WebSocket, HTML5, CSS3 және JavaScript бар WebRTC келесі буын веб-байланыс қызметтерін жасауға мүмкіндік береді. WebRTC технологиясы үш JavaScript API арқылы жүзеге асырылады.

Тең-теңімен жұмыс істеуі үшін WebRTC қолдайтын екі шолғыш ip-мекен-жайы бойынша node.js жүйесінде жұмыс істейтін сигналдық серверге (мысалы, WebSocket сервері) кіруі керек. Сервер браузерлер арасында ақпарат ағындарын тасымалдауға қатыспайды, бірақ сигналдық сервер болып табылады және пайдаланушылардың браузерлері арасында байланыс орнатуға арналған.

WebRTC API негізіндегі байланыс қолданбаларын іске асыру және оларды Интернеттегі веб-тораптарға (веб-сайттарға) біріктіру үшін барлық хосттар WebRTC-ті қолдамайтындығына байланысты WebRTC-ті қолдайтын және API және SDK-ді қамтамасыз ететін арнайы платформаларды пайдалануға болады.

API байланыс қолданбаларының осы API қамтамасыз ететін платформамен (веб-қызмет) өзара әрекеттесуін қамтамасыз етеді, ал SDK осы SDK қамтамасыз ететін платформамен өзара әрекеттесе алатын байланыс қолданбаларының дамуын қамтамасыз етеді.

Бұл платформаларға: TokBox-тан OpenTok, PubNub, VoxImplant, Twilio, NTT Communications-тен SkyWay, Kandy.io, SightCall және т.б. Байланыс серверін жасау үшін жалға алынған виртуалды VPS серверінде веб-байланыс қолданбаларына арналған Node.js орналастыруға немесе Node.js негізінде жобаларды қолдайтын бұлттық платформа хостингін (PaaS) пайдалануға болатынын атап өткен жөн, мысалы, OpenShift/Red Hat, Heroku/ Salesforce, AWS Elastic Beanstalk/Amazon және т.б.

Сонымен қатар, байланыс қосымшасын жасау үшін HTML5 Websockets, WebRTC және Flash технологияларына негізделген Flashphoner Web Call Server платформасын (аудио және бейне ағындарының браузер негізіндегі онлайн таратылымдарын ұйымдастыруға арналған серверлік бағдарламалық құрал) сатып алуға және орнатуға болады. ол интернетте. -OC Linux астында сервер немесе жалға алынған виртуалды VPS сервері. Қазіргі уақытта Flashphoner өзінің WebRTC серверін (Web Call Server 5) Amazon Web Services бұлттық хостингінде орналастырды.

В бұл шолу WebRTC технологиясына негізделген ең танымал бұлттық байланыс веб-қызметтерін қарастырайық - TokBox және PubNub ұсынған OpenTok.

TokBox-тан OpenTok

OpenTok – жетекші коммуникация болып табылатын бұлтқа негізделген PaaS (Platform as a Service) платформасы веб-платформаВеб-сайттарға біріктіру үшін RTC және мобильді қосымшаларбейне байланыс және хабар алмасу құралдары. OpenTok бүкіл әлем бойынша деректер орталықтарын қамтитын бөлінген инфрақұрылымға ие.

TokBox OpenTok ашық платформасы әзірлеушілерге кросс-платформалық WebRTC API негізіндегі бейне чаттарды веб-қосымшаларға (веб-сайттарға), Java/Android және IOS қолданбаларына ендіру мүмкіндігін береді.

OpenTok архитектурасы WebRTC OpenTok кітапханасының клиенттік бөлігінен (мысалы, OpenTok.js) тұрады, ол қолданбаның клиенттік бөлігіне (веб-бет) кірістірілген бейнебайланысты және әзірлеуге арналған құралдар жинағын (OpenTok Client SDKs) қамтамасыз етеді. клиенттік қосымшалар (JavaScript / Web қолданбалары, Java OS /Android және IOS).

Оның үстіне, ажырамас бөлігі OpenTok архитектуралары – бұл әрбір пайдаланушы үшін бірегей OpenTok сеанс идентификаторларын (sessionId) және таңбалауыштарды (токен) динамикалық генерациялауды қамтамасыз ететін қолданбаның серверлік инфрақұрылымын (пайдаланушыларды басқару және аутентификациялау үшін) әзірлеуге арналған сервер SDK (OpenTok Server SDKs), сонымен қатар OpenTok мұрағаттарымен жұмыс. Веб-сервер сәйкес сеанс идентификаторын және таңбалауышын өткізеді, содан кейін клиент сеансқа қосылу үшін пайдалана алады.

OpenTok серверінің SDK файлдары негізгі үшін қол жетімді бағдарламалау тілдерісерверлік қосымшалар: Java, .NET, Node.js, PHP, Python, Ruby. Айта кету керек, егер қолданбаның серверлік жағы басқа бағдарламалау тілін қажет етсе, ол тізімделген тізім, содан кейін TokBox OpenTok сеанстарын жасау және OpenTok мұрағаттарымен жұмыс істеу үшін OpenTok REST API ұсынады.

Осылайша, Интернет түйіндері үшін байланыс қосымшаларын жасау үшін OpenTok серверінің SDK файлдарын WebRTC OpenTok клиенттік кітапханасымен және OpenTok Client SDK құралдарымен бірге пайдалану керек.

OpenTok платформасын Интернет-хостында орнатылған WebRTC бейне чатын жасау үшін пайдалану үшін алдымен TokBox.com сайтында тіркелгі жасау керек. Тегін OpenTok тіркелгісі отыз күн бойы жарамды. Тіркелген пайдаланушының OpenTok байланыс қолданбасын әзірлеуге қажетті API кілтін (ApiKey) алу мүмкіндігі бар. API кілті OpenTok әзірлеуші ​​тіркелгісін анықтайды.

TokBox әзірлеуші ​​тіркелгісіндегі OpenTok әзірлеуші ​​​​нұсқаулығын (https://tokbox.com/developer/guides/) пайдаланып, OpenTok Client SDK файлдарын пайдаланып байланыс қолданбасын (бейне чат веб-бетін) жасауға болады. Қолданбаңыз үшін OpenTok құрылымын пайдалану үшін веб-бетіңізге OpenTok.js кітапханасын қосу керек.

https://static.opentok.com/webrtc/ .../opentok.js

Бағдарламаның жұмысына қажетті сеанс идентификаторы (SESSIONID) және таңбалауыш (токен) әдетте бағдарламалы түрде веб-серверсервер SDK (OpenTok Server SDK) бірімен.

Бірақ OpenTok серверінің SDK файлдарынсыз қолданбаның сынақ нұсқасын жасау үшін API кілті (ApiKey) негізінде әзірлеуші ​​құралдар тақтасын пайдаланып сеанс идентификаторы мен осы сеанс идентификаторының таңбалауышын қолмен алуға болады. Клиентке сеансқа рұқсат беретін таңбалауыш қажет.

"apiKey" кілті, сеанс идентификаторы "sessionId" және "токен" таңбалауышы сияқты айнымалы мәндердің мысалдары келесідей көрінеді:

var apiKey = "17493650";
var sessionId= "2_MX40NT...tWXR-UH4";
var token= "T1==cGFyd...2RhdGE9";

Сеанс идентификаторы (SESSIONID) және таңбалауышы (таңбалауышы) бар сеанс нысанын жасағаннан кейін қолданба сеанс нысанын инициализациялайды.

var session = OT.initSession(apiKey, sessionId);

Содан кейін клиент сеансқа қосылады және аудио және бейне ағындары жарияланады:

session.connect(токен, функция(қате))
publisher = OT.initPublisher("жариялаушы");
session.publish(жариялаушы);
});

Клиент сеансқа қосылғаннан кейін қолданба Publisher OpenTok нысанын инициализациялайды және басқа клиенттер оны көре алатындай сол сеанс үшін аудио және бейне ағынын жариялайды.

session.on((
streamCreated: функция(оқиға) (
session.subscribe(оқиға.ағын, "жазылушы");
}});

Осылайша, әзірлеуші ​​​​нұсқаулығына сәйкес сіз OpenTok платформасы негізінде WebRTC бейне сұхбатының негізін жасай аласыз, оны өз сайтыңызда іске асыруға болады. 2-сурет TokBox әзірлеуші ​​тіркелгісінде жасалған осы WebRTC бейне чатының скриншот интерфейсін көрсетеді.

Әрі қарай, сіз жасауыңыз керек сервер бөлігібағдарламалау тілдерінің біріне арналған OpenTok серверінің SDK көмегімен бейне чат. OpenTok серверінің SDK файлдары OpenTok сеанстарын бағдарламалы түрде жасауға, таңбалауыштарды жасауға және OpenTok мұрағаттауымен жұмыс істеуге мүмкіндік береді.

Айта кету керек, TokBox медиа ағындарын тасымалдаудың екі режимін пайдаланады (Media Streams):

• релелік (релейлік), бұл режимде медиа ағындары тікелей пирингтер арасында (мысалы, бір-бірден бейне сұхбатта пайдаланушылардың браузерлері арасында) беріледі;
• бағытталады (бағыттау), бұл режим клиенттер арасында аудио-бейне ағындарын бағыттау үшін OpenTok Media Router пайдаланады (мысалы, онлайн жиналыстар үшін көп пайдаланушы немесе топтық бейне чатта).

PubNub

PubNub – мыналарға арналған жаһандық ағындық желі: IoT (заттардың интернеті), мобильді және веб. PubNub - бұлтқа негізделген нақты уақыттағы веб-хабар алмасу қызметі, ол әртүрлі платформалар арасындағы веб-байланысты ұйымдастыруға арналған: Ұялы телефондар, планшеттер, веб-браузерлер, веб-сайттар және т.б. PubNub кросс-платформалық байланыс қосымшаларын жасау және оларды веб-қосымшаларға (веб-сайттарға) және қолданбаларға енгізу үшін негізгі бағдарламалау тілдеріне арналған 70-тен астам SDK ұсынады. мобильді құрылғылар(Java/Android және IOS).

PubNub қызметі қолдайтын тілдер мен SDK тізімі мына бетте берілген: https://github.com/pubnub/pubnub-api. Айта кету керек, API-ден басқа арнайы бағдарламалық платформалар PubNub сонымен қатар REST API интерфейстерін қолдайды. Мысалы, PubNub WebRTC SDK веб-коммуникацияларды (тең-теңімен желілер) бір-теңімен архитектурасын пайдаланып браузерлер арасында нақты уақытта ұйымдастыруға арналған. PubNub платформасы мен WebRTC технологиясы негізіндегі коммуникациялық қосымшаның құрамдас бөліктері арасындағы өзара әрекеттесу архитектурасы күріште көрсетілген. 3.

WebRTC бейне чат құрамдастары арасындағы өзара әрекеттесу схемасынан (3-сурет) келесідей, PubNub платформасы WebRTC қосымшалары үшін масштабталатын сигналдық сервер (келіссөздер сервері) ретінде пайдаланылады. Бұған қоса, PubNub платформасы келесілерді қамтамасыз етеді қосымша мүмкіндіктерқатысу (желіде қолжетімді пайдаланушылар туралы ақпаратты немесе пайдаланушылардың жаңартылған тізімін беру), сақтау/қайта ойнату (пайдаланушыларға белгілі бір уақыт аралығында өткен сөйлесулердің тарихын көруге мүмкіндік беру) және тіркеу ретінде.

Қарым-қатынаста WebRTC қолданбалары x, PubNub негізіне негізделген, шолғыш пен келіссөз сервері арасында хабар алмасудың екі әдісі (WebSockets және AJAX) пайдаланылады. PubNub WebRTC қолданбасын PubNub платформасына қосу үшін жаңа API ұсынады. PubNub WebRTC API пайдаланушылардың браузерлері арасында WebRTC PeerConnection API арқылы тең дәрежелі архитектурада қосылуға мүмкіндік беру үшін сигнал береді. Браузерлер арасында сигналдық хабарламалармен алмасудан кейін бейне ағындары мен ерікті деректермен алмасу үшін олардың арасында дуплексті байланыс орнатылады. Браузер байланыстарын PubNub үйлестіреді.

PubNub қызметі нақты уақыттағы хабар алмасу мақсатында браузерлер арасында «теңімен» байланысын орнатуға қажетті барлық құрамдастардың өзара әрекеттесуін ғана емес, сонымен қатар оларды жаһандық желіағынды деректер.

PubNub бейне чат платформасын пайдалану үшін алдымен тегін тіркелгі жасау үшін PubNub қызметіне тіркелу керек. Тіркелген пайдаланушы API кілттерін ала алады жазылу_кілтіжәне жариялау_кілті PubNub байланыс қолданбасын әзірлеу үшін қажет. Содан кейін тіркелгіңізге қауіпсіздік, қатысу және сақтау сияқты мүмкіндіктерді қосуға болады.

API кілттерін алғаннан кейін негізгі бағдарламалау тілдерінің бірінде SDK пайдалана отырып, PubNub платформасы негізінде байланыс қолданбасын жасауға немесе демонстрациялық қолданбаларды (үлгілерді) пайдалануға болады. Оқу құралыбайланыс қосымшасын жасау мына бетте ұсынылған: https://www.pubnub.com/docs/tutorials/pubnub-publish-subscribe. PubNub WebRTC SDK негізінде бейне сұхбат құруға арналған анықтамалық нұсқаулық https://www.pubnub.com/docs/webrtc-javascript/pubnub-javascript-sdk сайтында қаралады.

WebRTC бейне чатын нөлден жасау үшін, оқулыққа сәйкес, бірнеше қарапайым JavaScript API интерфейсін пайдалану керек:

• PubNub кітапханасын HTML бетіне қосыңыз, яғни. клиентті инициализациялау алдында беттің HTML кодына JavaScript PubNub SDK қосу;
• init() - PubNub клиентінің API интерфейсін инициализациялау;
• subscribe() - белгілі бір арнаға жазылу (subscribe() PubNub API әдісіне қоңырау шалыңыз);
• publish() - белгілі бір арнаға хабарлама жіберу (PubNub API-ның publish() әдісіне қоңырау шалыңыз);
• unsubscribe() - Белгілі бір арна жазылымынан бас тарту.

PubNub клиент API инициализациясын келесідей көрсетуге болады:
var PUBNUB = PUBNUB.init((
publish_key: "Сіздің жариялау кілтіңіз",
subscribe_key: "Сіздің жазылу кілтіңіз"
});

PubNub WebRTC негізінде WebRTC бейне чатын жасау үшін ашық үлгісі бар үлгіні пайдалануға болады. бастапқы код: https://www.pubnub.com/developers/demos/webrtc/. Бұл бейне чаттың жұмысын тексеру үшін екі компьютерден көрсетілген мекенжайға хабарласу керек, браузерлерде ашылатын бейне чат интерфейсінде пайдаланушыларға телефон нөмірлері тағайындалады. Байланыс жасау үшін пайдаланушылар «Алушыны теру» мәтіндік өрісіне телефон нөмірлерін енгізіп, телефон тұтқасы түймесін басу керек.

Нәтижесінде бейнекамералардағы кескіндер браузерлерге беріледі және монитор экрандарында көрсетіледі. Сонымен қатар, бұл бейне чат мәтінді жіберу үшін чат ретінде жұмыс істейді. Сөйлесу үшін пайдаланушылар «осы жерде чат» өрісіне мәтінді енгізіп, «Enter» пернесін басу керек. 4-суретте 164 телефон нөмірі бар пайдаланушының бейне чатының скриншоты көрсетілген.

Күріш. 4.WebRTC бар PubNub

5-суретте 128 телефон нөмірі бар пайдаланушының бейне чатының скриншоты көрсетілген.

Күріш. 5.WebRTC бар PubNub

Пайдаланушы әзірлеген веб-интерфейскоммуникациялық қосымша HTML5 және CSS3 гипермәтіндік белгілеу арқылы жасалған. Коммуникациялық қосымшаның клиент бөлігінің коды JS-де әзірленген. Веб-байланыс қолданбасына келесі кітапханалар қосылды: JQuery, PubNub JavaScript SDK және PubNub WebRTC SDK.

Сәлем достар, сіздер білетіндей, біз сіздерді жаңа технологиялармен үнемі жаңартып отырамыз, бүгін мен Google әзірлеген WebRTC технологиясын таныстырамын, ол пайдаланушыларға плагиндерді- Веб-сайттарды немесе қолданбаларды пайдалануды қажет етпей-ақ шолғышта бейне және аудио арқылы тікелей сөйлесуге мүмкіндік береді. . Пайдаланушылар арасындағы бейне және аудио тікелей байланыс браузерде тікелей орын алады.
Mozilla қолдайтын WebRTC технологиясы Firefox браузерлеріЖақында Opera қосылатын кез келген операциялық жүйеде Google Chrome.
WebRTC дегеніміз не және не?
WebRTC — Web Real Time Communication деген сөздің қысқартылған нұсқасы, бұл технология бұл үшін Интернеттегі басқа плагиндерді, қолданбаларды немесе қызметтерді қажет етпестен аудио және бейне чатты тікелей шолғышта ашуға мүмкіндік береді. Қосылым браузерден браузерге тікелей жүзеге асырылады.
Белгілі қызметтер (Skype, Yahoo Messenger, Apple FaceTime, Google Hago және т.б.) трафикті бастау және басқару үшін пайдаланушыларды байланыстыратын серверді қажет ететін жерлерде. Осы қызметтерді пайдалану арқылы біз тіркеліп, клиенттер мен контактілердің тізімін орнатуымыз керек.
WebRTC көмегімен бізге серверлер, қолданбалар немесе интервенцияға қосылатын серверлер қажет емес.
WebRTC артықшылықтары:
1. Ресурсты және батареяны тұтынуды қажет ететін қолданбалар енді болмайды.
2. Чаттар жеке (салыстырмалы түрде).
3. Жергілікті қосылымдар үшін Flos АҚШ серверлері емес, жергілікті жерде байланысуға болады.
4. Қарапайымдылық, қолданудың қарапайымдылығы.
5. Әрі қарай даму мүмкіндігі және басқа бағыттар бойынша.
6. Байланыс тұрақты және сыртқы байланыстарға тәуелді емес, олар кейде өте тұрақсыз.
Оқулықта мен Google-дағы адамдар әзірлеген демонстрацияны қолдандым, бұл демонстрация өте қарапайым, жетілдірілген мүмкіндіктер және жылдам қосылымдар WebRTC қолдайтын қолданбалардың бірін пайдалана алады, оларды пайдалану оңайырақ. Жақында біз WebRTC қолданбалары туралы оқу құралын дайындайтын боламыз.
WebRTC демонстрациясын қалай пайдалануға болады?
Төмендегі сілтемені жай ғана басыңыз, ол чатты автоматты түрде жасайды. осы бөлмені байланыстыру үшін сіз хабарласқыңыз келетін досыңызды / қызыңызды жіберуіңіз керек.
Досыңыз / қызыңыз және сіздікі, бірақ сіз тек ең көп пайдалануыңыз керек соңғы нұсқалары Mozilla Firefoxнемесе Google Chrome.

Demo WebRTC(Кіріспе чат аудио - бейне)

Назар аударыңыз:
Демонстрация өте тұрақты емес, ол тек көрсету мақсатында жасалған. Ол шағын қосылым қателері орын алуы мүмкін шектеулі уақыт кезеңі үшін пайдаланылуы мүмкін.
Байланыс мәселесі туындаса, басқа чатты жасап көріңіз.

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 ) қосуға болады.

Медиа ағындары медиа ақпаратының кез келген санынан (тректерден) тұруы мүмкін. MediaStreamTrack интерфейсінің нысандарымен ұсынылған бұл тректер аудио, бейне, мәтінді (субтитрлер немесе тарау тақырыптары сияқты) қоса алғанда, бір немесе бірнеше медиа түрлерін қамтуы мүмкін. Көптеген ағындар кем дегенде бір аудио жолдан (бір аудио трек) немесе бейне жолдан тұрады және оларды ағындар (нақты уақыттағы медиа) ретінде жіберуге және қабылдауға немесе файлға сақтауға болады.

Сондай-ақ, тасымалдау үшін пайдалануға болатын RTCDataChannel интерфейс нысанын пайдаланып ерікті деректермен алмасу үшін екі түйін арасындағы байланысты пайдалануға болады. қызмет туралы ақпарат, қор деректері, ойын күйі пакеттері, файлдарды тасымалдау немесе жеке деректер арналары.

қосымша мәліметтер мен тиісті нұсқаулықтар мен оқулықтарға сілтемелер қажет

WebRTC интерфейстері

Өйткені WebRTC бірге жұмыс істейтін интерфейстерді қамтамасыз етеді әртүрлі тапсырмалар, біз оларды санаттарға бөлдік. Жылдам шарлау үшін бүйірлік тақтаның алфавиттік индексін қараңыз.

Қосылымды орнату және басқару

Бұл интерфейстер WebRTC қосылымдарын орнату, ашу және басқару үшін пайдаланылады. Олар екі жақты мультимедиялық қосылымды орнату кезінде ең жақсы конфигурацияны таңдау үшін әрбір түйіннің мүмкіндіктері туралы ақпарат алмасу үшін пайдаланылатын тең дәрежелі медиа қосылымдарын, деректер арналарын және интерфейстерді білдіреді.

Гидтер

WebRTC браузер арқылы нақты уақыттағы аудио/бейне байланысын жүзеге асыруға мүмкіндік береді

Бұл тақырыпта мен сізге ең қарапайым WebRTC қосымшасын қалай енгізу керектігін айтамын.

1. getUserMedia – медиа құрылғыларға (микрофон/веб-камера) қол жеткізу

Ешқандай күрделі ештеңе жоқ, 10 жолдық JavaScript кодының көмегімен сіз өзіңізді шолғышта (демо) көре аласыз және ести аласыз.

index.html жасаңыз :

Бейне элементіне css3 сүзгілерін қолдануға болады.

Өкінішке орай, WebRTC әзірлеудің осы кезеңінде мен браузерге «Мен бұл сайтқа сенемін, оған әрқашан камера мен микрофонға рұқсат беремін» деп айта алмаймын және әр бетті ашқаннан/жаңартқаннан кейін «Рұқсат ету» түймесін басу керек.

Бір браузерде камераға рұқсат берсеңіз, екіншісі оған кіруге әрекет жасағанда PERMISSION_DENIED алатынын еске түсіру артық болмас.

2. Сигнал сервері (сигнал сервері)

Мұнда мен «webrtc бастау» нұсқауларының көпшілігінің тізбегін бұзамын, өйткені олар екінші қадам ретінде бір клиенттегі webRTC мүмкіндіктерін көрсетеді, бұл мен үшін түсіндірмеге шатасу ғана қосты.

Сигнал беру сервері клиенттер арасындағы байланысты қамтамасыз ететін WebRTC үйлестіру орталығы болып табылады, қосылымды инициализациялау және жабу және қате туралы есеп беру.

Біздің жағдайда сигнал беру сервері - Node.js + socket.io + node-static, ол 1234 портында тыңдайды.
Сонымен қатар, node-static index.html бере алады, бұл біздің қолданбаны мүмкіндігінше қарапайым етеді.

Қолданба қалтасында қажеттіні орнатыңыз:

npm орнату socket.io npm орнату node-static

WebRTC (Web Real Time Communications) — ағындық аудио деректерін, бейне деректерін және мазмұнды плагиндерді немесе басқа кеңейтімдерді орнатусыз нақты уақытта браузерден және шолғышқа тасымалдауды сипаттайтын стандарт. Стандарт браузерді бейнеконференция терминалына айналдыруға мүмкіндік береді, байланыс орнату үшін веб-бетті ашыңыз.

WebRTC дегеніміз не?

Бұл мақалада біз WebRTC технологиясы туралы білуіңіз керек барлық нәрсені қарастырамыз тұрақты қолданушы. Жобаның артықшылықтары мен кемшіліктерін қарастырайық, кейбір құпияларды ашайық, оның қалай жұмыс істейтінін, WebRTC қайда және не үшін қолданылатынын айтайық.

WebRTC туралы не білуіңіз керек?

Бейне стандарттары мен технологияларының эволюциясы

WebRTC қалай жұмыс істейді

Клиент жағында

• Пайдаланушы HTML5 тегін қамтитын бетті ашады
• Браузер пайдаланушының веб-камерасына және микрофонына кіруді сұрайды.
• Пайдаланушы бетіндегі JavaScript коды NAT және желіаралық қалқанды айналып өту үшін қосылым параметрлерін (IP мекенжайлары мен WebRTC серверінің порттары немесе басқа WebRTC клиенттері) басқарады.
• Әңгімелесуші туралы немесе серверде араласқан конференциясы бар ағын туралы ақпаратты алған кезде, браузер пайдаланылатын аудио және бейне кодектерімен келіссөздер жүргізе бастайды.
• WebRTC клиенттері арасында (біздің жағдайда, браузер мен сервер арасында) деректерді кодтау және ағынмен жіберу процесі басталады.

WebRTC сервер жағында

Екі қатысушы арасында деректер алмасу үшін бейне сервер қажет емес, бірақ бір конференцияда бірнеше қатысушыны біріктіргіңіз келсе, сервер қажет.

Бейне сервер әртүрлі көздерден медиа трафигін қабылдайды, оны түрлендіреді және оны WebRTC терминал ретінде пайдаланатын пайдаланушыларға жібереді.

WebRTC сервері сондай-ақ WebRTC әріптестерінен медиа трафигін алады және оны жұмыс үстелі немесе мобильді қолданбалар арқылы конференция қатысушыларына береді.

Стандарттың артықшылықтары

• Бағдарламалық құралды орнату қажет емес.
• Осының арқасында өте жоғары байланыс сапасы:
  • Қазіргі бейнені (VP8, H.264) және аудио кодектерді (Opus) пайдалану.
  • Ағынның сапасын қосылу шарттарына автоматты түрде реттеу.
  • Кірістірілген жаңғырық пен шуды болдырмау.
  • Қатысушылардың микрофондарының деңгейін автоматты түрде басқару (AGC).
• Қауіпсіздіктің жоғары деңгейі: барлық қосылымдар қауіпсіз және сәйкес шифрланған TLS протоколдарыжәне SRTP.
• Жұмыс үстелі сияқты мазмұнды түсірудің кірістірілген механизмі бар.
• HTML5 және JavaScript негізіндегі кез келген басқару интерфейсін жүзеге асыру мүмкіндігі.
• WebSockets көмегімен интерфейсті кез келген серверлік жүйелермен біріктіру мүмкіндігі.
• Ашық бастапқы жоба - оны өніміңізге немесе қызметіңізге ендіруге болады.
• Шынайы кросс-платформа: шолғыш WebRTC қолдайтын болса, бірдей WebRTC қолданбасы кез келген операциялық жүйеде, жұмыс үстелінде немесе ұялы телефонда бірдей жақсы жұмыс істейді. Бұл бағдарламалық жасақтаманы әзірлеуге арналған көптеген ресурстарды үнемдейді.

Стандарттың кемшіліктері

• Топтық аудио және бейне конференцияларды ұйымдастыру үшін қатысушылардан бейне мен дыбысты араластыратын бейнеконференция сервері қажет, өйткені браузер бірнеше кіріс ағындарын бір-бірімен синхрондауды білмейді.
• Барлық WebRTC шешімдері бір-бірімен үйлеспейді, өйткені стандарт тек бейне мен дыбысты беру әдістерін сипаттайды, жазылушыларға жүгіну әдістерін іске асыруды қалдырады, олардың қолжетімділігін қадағалау, хабарламалар мен файлдармен алмасу, жоспарлау және жеткізуші үшін басқа да нәрселер.
• Басқаша айтқанда, сіз бір әзірлеушінің WebRTC қолданбасынан басқа әзірлеушінің WebRTC қолданбасына қоңырау шала алмайсыз.
• Топтық конференцияларды араластыру көп есептеу ресурстарын қажет етеді, сондықтан бейнебайланыстың бұл түрі ақылы жазылымды сатып алуды немесе оның инфрақұрылымына инвестициялауды талап етеді, мұнда әрбір конференция заманауи процессордың 1 физикалық ядросын қажет етеді.

WebRTC құпиялары: жеткізушілер бұзылатын веб-технологиядан қалай пайда көреді

Бейнеконференция нарығына арналған WebRTC

Бейнеконференцбайланыс терминалдарының санын көбейту

WebRTC технологиясы бейнеконференциялар нарығының дамуына күшті әсер етті. 2013 жылы WebRTC қолдауы бар алғашқы браузерлер шыққаннан кейін бүкіл әлем бойынша бейнеконференция терминалдарының әлеуетті саны бірден 1 миллиард құрылғыға өсті. Шындығында, әрбір браузер байланыс сапасы жағынан аппараттық аналогтарынан кем түспейтін бейнеконференцбайланыс терминалына айналды.

Арнайы шешімдерде қолданыңыз

Әртүрлі JavaScript кітапханаларын және API интерфейстерін пайдалану бұлттық қызметтер WebRTC қолдауымен кез келген веб-жобаларға бейне қолдауын қосуды жеңілдетеді. Бұрын нақты уақыт режимінде деректерді беру әзірлеушілерден хаттамалардың қалай жұмыс істейтінін және басқа компаниялардың жұмысын пайдалануды үйренуді талап етті, бұл көбінесе қосымша лицензиялауды талап етті, бұл шығындарды арттырады. WebRTC қазірдің өзінде «Сайттан қоңырау шалу», «Онлайн қолдау чаты» және т.б. қызметтерде белсенді түрде қолданылады.

Linux үшін Skype бағдарламасының бұрынғы пайдаланушылары

2014 жылы Microsoft корпорациясы АТ мамандарының үлкен тітіркенуін тудырған Skype for Linux жобасын қолдауды аяқтайтынын хабарлады. WebRTC технологиясы операциялық жүйеге байланысты емес, бірақ браузер деңгейінде жүзеге асырылады, яғни. Linux пайдаланушылары WebRTC негізіндегі өнімдер мен қызметтерді Skype үшін толыққанды ауыстыру ретінде көре алады.

Flash бағдарламасымен жарыс

WebRTC және HTML5 қазірдің өзінде өтіп жатқан Flash технологиясы үшін өлім соққысы болды ең жақсы жылдар. 2017 жылдан бастап жетекші браузерлер Flash-ті қолдауды ресми түрде тоқтатты және технология ақыры нарықтан жоғалып кетті. Бірақ сіз Flash несиесін беруіңіз керек, өйткені ол веб-конференциялар нарығын құрған және браузерлерде тікелей байланыс үшін техникалық мүмкіндіктерді ұсынған.

WebRTC бейне презентациялары

Дмитрий Одинцов, TrueConf, Бейне+конференция қазан 2017 ж

WebRTC жүйесіндегі кодектер

Аудио кодектер

WebRTC жүйесінде аудио трафикті қысу үшін Opus және G.711 кодектері пайдаланылады.

G.711- жүйелерде жиі қолданылатын жоғары бит жылдамдығы (64 кбит) бар ең ескі дауыстық кодек дәстүрлі телефония. Негізгі артықшылығы - жеңіл сығу алгоритмдерін қолдану есебінен минималды есептеу жүктемесі. Кодек дауыстық сигналдарды қысудың төмен деңгейіне ие және пайдаланушылар арасындағы байланыс кезінде қосымша аудио кідірістерін енгізбейді.

G.711 қолдайды үлкен мөлшерқұрылғылар. Басқа аудио кодектерге (G.723, G.726, G.728, т.б.) негізделген жүйелерге қарағанда, осы кодекті пайдаланатын жүйелерді пайдалану оңайырақ. Сапа бойынша G.711 MOS тестілеуінде 4,2 балл алды (4-5 балл ең жоғары және білдіреді) жақсы сапа, ISDN ішіндегі дауыстық трафикті беру сапасына ұқсас және одан да жоғары).

Опускодтау кідірісі төмен кодек (2,5 мс-тен 60 мс дейін), ауыспалы бит жылдамдығын және жоғары деңгейайнымалы өткізу қабілеттілігі желілері арқылы аудио ағыны үшін өте қолайлы қысу. Opus - біріктіретін гибридті шешім ең жақсы өнімділіккодектер SILK (дауысты қысу, адам сөйлеуінің бұрмалануын жою) және CELT (аудио деректерін кодтау). Кодек еркін қол жетімді, оны пайдаланатын әзірлеушілер авторлық құқық иелеріне роялти төлеудің қажеті жоқ. Басқа аудио кодектермен салыстырғанда, Opus, әрине, көптеген жолдармен жеңеді. Ол MP3, Vorbis, AAC LC сияқты өте танымал төмен жылдамдықты кодектерді басып озды. Opus дыбыстың «суретін» AMR-WB және Speex-ке қарағанда түпнұсқаға жақынырақ қалпына келтіреді. Бұл кодек болашақ болып табылады, сондықтан WebRTC технологиясын жасаушылар оны қолдау көрсетілетін аудио стандарттарының міндетті ауқымына енгізді.

Бейне кодектер

WebRTC үшін бейне кодектерді таңдау мәселелері әзірлеушілерге бірнеше жыл қажет болды, соңында олар H.264 және VP8 пайдалануды шешті. Барлығы дерлік заманауи браузерлерекі кодектерді де қолдайды. Бейнеконференция серверлеріне WebRTC-пен жұмыс істеу үшін тек біреуін қолдау қажет.

VP8ашық лицензиясы бар тегін бейне кодек болып табылады, ол жоғары бейне ағынының декодтау жылдамдығын және кадрдың жоғалуына төзімділігін арттырады. Кодек әмбебап болып табылады, оны аппараттық платформаларға енгізу оңай, сондықтан бейнеконференция жүйелерін әзірлеушілер оны өз өнімдерінде жиі пайдаланады.

Ақылы бейне кодек H.264ағасынан әлдеқайда бұрын белгілі болды. Бұл жоғары бейне сапасын сақтай отырып, бейне ағынын сығудың жоғары дәрежесі бар кодек. Аппараттық бейнеконференцбайланыс жүйелері арасында бұл кодектің жоғары таралуы оны WebRTC стандартында пайдалануды болжайды.

Google және Mozilla VP8 кодектерін белсенді түрде алға жылжытуда, ал Microsoft, Apple және Cisco H.264 (үйлесімділікті қамтамасыз ету үшін) белсенді түрде алға жылжытуда. дәстүрлі жүйелербейнеконференция). Ал мұнда өте үлкен мәселебұлтты WebRTC шешімдерін әзірлеушілер үшін, өйткені конференцияға қатысушылардың барлығы бірдей браузерді пайдаланса, конференцияны бір кодекпен бір рет араластыру жеткілікті, ал браузерлер әртүрлі болса және олардың арасында Safari/Edge болса, онда конференция әртүрлі кодектермен екі рет кодтауға тура келеді, бұл екі есе жоғарылайды жүйелік талаптармедиа серверге және соның нәтижесінде WebRTC қызметтеріне жазылу құны.

WebRTC API

WebRTC технологиясы үш негізгі API интерфейсіне негізделген:

• (веб-браузер камералардан немесе пайдаланушының жұмыс үстелінен аудио және бейне сигналдарын қабылдауға жауапты).
• RTCPeerConnection(камерадан, микрофоннан және жұмыс үстелінен алынған медиа деректерін «алмасу» үшін браузерлер арасындағы қосылымға жауап береді. Сондай-ақ, осы API «міндеттеріне» сигналды өңдеу кіреді (оны тазалау). бөгде шу, микрофонның дыбыс деңгейін реттеңіз) және қандай аудио және бейне кодектер пайдаланылатынын басқарыңыз).
• RTC деректер арнасы(орнатылған қосылым бойынша екі жақты деректерді беруді қамтамасыз етеді).

Пайдаланушының микрофоны мен камерасына қол жеткізбес бұрын браузер осы рұқсатты сұрайды. Google Chrome-да сіз «Параметрлер» бөлімінде кіруді алдын ала конфигурациялай аласыз, Opera және Firefox-та құрылғыларды таңдау ашылмалы тізімнен кіру кезінде тікелей жүзеге асырылады. Пайдалану кезінде рұқсат сұрауы әрқашан пайда болады HTTP протоколыжәне HTTPS пайдаланылса бір рет:

RTCPeerConnection. WebRTC конференциясына қатысатын әрбір браузерде осы нысанға кіру рұқсаты болуы керек. RTCPeerConnection қолданудың арқасында бір шолғыштан екіншісіне медиа деректері тіпті NAT және желіаралық қалқандар арқылы өте алады. Медиа ағындарын сәтті жіберу үшін қатысушылар веб-розеткалар сияқты тасымалдау арқылы келесі деректерді алмасуы керек:

• бастамашы қатысушы екінші қатысушыға Offer-SDP (деректер құрылымы, ол жіберетін медиа ағынының сипаттамалары) жібереді;
• екінші қатысушы «жауапты» жасайды - Answer-SDP және оны бастамашыға жібереді;
• содан кейін ICE кандидаттарымен алмасу қатысушылар арасында, егер олар табылса (қатысушылардың NAT немесе желіаралық қалқандардың артында болса) ұйымдастырылады.

Қатысушылар арасындағы осы алмасу сәтті аяқталғаннан кейін медиа ағындарын (аудио және бейне) тасымалдау тікелей ұйымдастырылады.

RTC деректер арнасы. Data Channel протоколын қолдау браузерлерде салыстырмалы түрде жақында пайда болды, сондықтан бұл API WebRTC пайдаланылған жағдайларда ғана қарастырылуы мүмкін. Mozilla браузерлері Firefox 22+ және Google Chrome 26+. Оның көмегімен қатысушылар алмаса алады мәтіндік хабарларбраузерде.

WebRTC қосылымы

Қолдау көрсетілетін жұмыс үстелі браузерлері

• Google Chrome (17+) және Chromium қозғалтқышына негізделген барлық браузерлер;
• Mozilla Firefox (18+);
• Опера (12+);
• Сафари (11+);

Android үшін қолдау көрсетілетін мобильді браузерлер

• Google Chrome (28+);
• Mozilla Firefox (24+);
• Opera Mobile (12+);
• Сафари (11+).

WebRTC, Microsoft және Internet Explorer

Ұзақ уақыт бойы Microsoft WebRTC қолдауы туралы үнсіз қалды Internet Explorerжәне оның жаңасында Edge браузері. Редмондтық жігіттер технологияны олар басқармайтын пайдаланушылардың қолына беруді ұнатпайды, бұл саясаттың бір түрі. Бірақ бірте-бірте нәрселер орнынан түсті, өйткені. Енді WebRTC-ті елемеу мүмкін болмады және WebRTC стандартынан алынған ORTC жобасы жарияланды.

Әзірлеушілердің пікірінше, ORTC JavaScript және HTML5 негізіндегі API интерфейстерінің жақсартылған жиынтығы бар WebRTC стандартының кеңейтімі болып табылады, ол кәдімгі тілге аударғанда бәрі бұрынғыдай болады, стандартты Google емес, Microsoft ғана басқарады. және оның дамуы. Кодектер жинағы телефонияда және аппараттық бейнеконференция жүйелерінде қолданылатын H.264 және кейбір G.7XX сериялы аудио кодектеріне қолдау көрсету арқылы кеңейтілді. Мүмкін RDP (мазмұнды тасымалдау үшін) және хабар алмасу үшін кірістірілген қолдау болады. Айтпақшы, Internet Explorer пайдаланушыларының жолы болмады, ORTC қолдауы тек Edge-де болады. Және, әрине, мұндай хаттамалар мен кодектер жиынтығы Skype for Business бағдарламасына аз қанмен сәйкес келеді, бұл WebRTC үшін одан да көп іскерлік қосымшаларды ашады.