WebRTC (Web Real Time Communications) - це стандарт, який описує передачу потокових аудіо, відео даних і контенту від браузера і до браузеру в режимі реального часу без установки плагінів необхідних розширень. Стандарт дозволяє перетворити браузер в крайовий термінал відеоконференцзв'язку, досить просто відкрити веб-сторінку, щоб почати спілкування.

Що таке WebRTC?

У цій статті ми розглянемо все, що необхідно знати про технології WebRTC для звичайного користувача. Розглянемо переваги і недоліки проекту, розкриємо деякі секрети, розповімо як працює, де і для чого застосовується WebRTC.

Що потрібно знати про WebRTC?

Еволюція стандартів і технологій відеозв'язку

Як працює WebRTC

На стороні клієнта

• Користувач відкриває сторінку, яка містить HTML5 тег
• Браузер запитує доступ до веб-камері і мікрофону користувача.
• JavaScript код на сторінці користувача контролює параметри з'єднання (IP-адреси і порти сервера WebRTC або інших WebRTC клієнтів) для обходу NAT і Firewall.
• При отриманні інформації про співрозмовника або про потік зі змікшованого на сервері конференцією, браузер починає узгодження використовуваних аудіо і відео кодеків.
• Починається процес кодування і передача потокових даних між WebRTC клієнтами (в нашому випадку, між браузером і сервером).

На стороні WebRTC сервера

Для обміну даними між двома учасниками відеосервер не потрібно, але якщо потрібно об'єднати в одній конференції кілька учасників, сервер необхідний.

Відеосервер буде отримувати медіа-трафік з різних джерел, перетворювати його і відправляти користувачам, які в якості терміналу використовують WebRTC.

Також WebRTC сервер буде отримувати медіа-трафік від WebRTC бенкетів та передавати його учасникам конференції, які використовують програми для настільних комп'ютерів або мобільних пристроїв, В разі наявності таких.

переваги стандарту

• Не потрібно установка ПО.
• Дуже висока якість зв'язку, завдяки:
  • використанню сучасних відео(VP8, H.264) і аудіокодеків (Opus).
  • Автоматичне підстроювання якості потоку під умови з'єднання.
  • Вбудована система луна і шумозаглушення.
  • Автоматичне регулювання рівня чутливості мікрофонів учасників (АРУ).
• Високий рівень безпеки: всі з'єднання захищені і зашифровані згідно з протоколами TLS і SRTP.
• Є вбудований механізм захоплення контенту, наприклад, на робочий стіл.
• Можливість реалізації будь-якого інтерфейсу управління на основі HTML5 і JavaScript.
• Можливість інтеграції інтерфейсу з будь-якими back-end системами за допомогою WebSockets.
• Проект з відкритим вихідним кодом- можна впровадити в свій продукт або сервіс.
• Справжня крос-платформенность: один і той же WebRTC додаток буде однаково добре працювати на будь-який операційній системі, Деськтопной або мобільного, за умови, що браузер підтримує WebRTC. Це значно економить ресурси на розробку ПО.

недоліки стандарту

• Для організації групових аудіо і відеоконференцій потрібно сервер ВКС, який би мікшував відео і звук від учасників, тому що браузер не вміє синхронізувати кілька вхідних потоків між собою.
• Все WebRTC рішення несумісні між собою, тому що стандарт описує лише способи передачі відео і звуку, залишаючи реалізацію способів адресації абонентів, відстеження їх доступності, обміну повідомленнями та файлами, планування та іншого за вендором.
• Іншими словами ви не зможете зателефонувати з WebRTC додатки одного розробника в WebRTC додаток іншого розробника.
• Мікшування групових конференцій вимагає великих обчислювальних ресурсів, тому такий тип відеозв'язку вимагає покупки платної підпискиабо інвестування в свою інфраструктуру, де на кожну конференцію потрібно 1 цієї статті фізична ядро ​​сучасного процесора.

Секрети WebRTC: як вендори отримують користь із проривний веб-технології

WebRTC для ринку ВКС

Збільшення числа ВКС-терміналів

Технологія WebRTC вплинула на розвиток ринку ВКС. Після виходу в світ перших браузерів з підтримкою WebRTC в 2013 році потенційна кількість терміналів відеоконференцзв'язку по всьому світу відразу збільшилася на 1 млрд. Пристроїв. По суті, кожен браузер став ВКС терміналом, який не поступається своїм апаратним аналогам з точки зору качетсва зв'язку.

Використання в спеціалізованих рішеннях

Використання різних JavaScript бібліотек і API хмарних сервісів з підтримкою WebRTC дозволяє легко додати підтримку відеозв'язку в будь-які веб-проекти. Раніше для передачі даних в реальному часі розробникам доводилося вивчати принципи роботи протоколів і використовувати напрацювання інших компаній, які найчастіше вимагають додаткового ліцензування, що збільшувало витрати. Уже зараз WebRTC активно використовується в сервісах виду "Зателефонувати з сайту", "Он-лайн чат підтримки", і т.п.

Ex-користувачам Skype для Linux

У 2014 році Microsoft оголосила про припинення підтримки проекту Skype для Linux, що викликало велике роздратування у IT-фахівців. Технологія WebRTC не прив'язана до операційної системи, а реалізована на рівні браузера, тобто Linux користувачізможуть побачити в продуктах і сервісах на основі WebRTC повноцінну заміну Skype.

Конкуренція з Flash

WebRTC і HTML5 стали смертельним ударом для технології Flash, яка і так переживала свої далеко не кращі роки. З 2017 року провідні браузери офіційно перестали підтримувати Flash і технологія остаточно зникла з ринку. Але потрібно віддати Flash належне, адже саме він створив ринок веб-конференцій та запропонував технічні можливості для живого спілкування в браузерах.

відеопрезентації WebRTC

Дмитро Одинцов, TrueConf, Відео + Конференція жовтень 2017

Кодеки в WebRTC

аудіокодеки

Для стиснення аудіо-трафіку в WebRTC використовуються кодеки Opus і G.711.

G.711- найстаріший голосовий кодек з високим бітрейтом (64 kbps), який найчастіше застосовується в системах традиційної телефонії. Основною перевагою є мінімальна обчислювальна навантаження через використання легких алгоритмів стиснення. Кодек відрізняється низьким рівнем компресії голосових сигналів і не вносить додаткової затримки звуку під час спілкування між користувачами.

G.711 підтримується великою кількістю пристроїв. Системи, в яких використовується цей кодек, легші в застосуванні, ніж ті, які засновані на інших аудіокодек (G.723, G.726, G.728 і т.д.). За якістю G.711 отримав оцінку 4.2 в тестуванні MOS (оцінка в межах 4-5 є найвищою і означає гарну якість, аналогічне якості передачі голосового трафіку в ISDN і навіть вище).

Opus- це кодек з низькою затримкою кодування (від 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 входить обробка сигналу (очищення його від сторонніх шумів, Регулювання гучності мікрофона) і контроль над використовуваними аудіо і відеокодеками).
• RTCData Channel(Забезпечує двосторонню передачу даних через встановлений з'єднання).

Перш ніж отримати доступ до мікрофона і камері користувача, браузер запитує на це дозвіл. В Google Chromeможна заздалегідь налаштувати доступ в розділі "Налаштування", в Opera і Firefox вибір пристроїв здійснюється безпосередньо в момент отримання доступу, зі списку. Запит на дозвіл буде з'являтися завжди при використанні протоколу HTTP і одноразово, якщо використовувати HTTPS:

RTCPeerConnection. Кожен браузер, який бере участь в WebRTC конференції, повинен мати доступ до даного об'єкта. Завдяки використанню RTCPeerConnection медіаданні від одного браузера до іншого можуть проходити навіть через NAT і мережеві екрани. Для успішної передачі медіапотоків учасники повинні обмінятися такими даними за допомогою транспорту, наприклад, веб-сокетів:

• учасник-ініціатор направляє другому учаснику Offer-SDP (структура даних, з характеристиками медіапотоку, які він буде передавати);
• другий учасник формує "відповідь" - Answer-SDP і пересилає його ініціатору;
• потім між учасниками організовується обмін ICE-кандидатами, якщо такі виявлені (якщо учасники знаходяться за NAT або мережевими екранами).

Після успішного завершення даного обміну між учасниками організовується безпосередньо передача медіапотоків (аудіо і відео).

RTCData Channel. Підтримка протоколу Data Channel з'явилася в браузерах порівняно недавно, тому даний API можна розглядати виключно у випадках використання WebRTC в браузерах Mozilla Firefox 22+ і Google Chrome 26+. З його допомогою учасники можуть обмінюватися текстовими повідомленнями в браузері.

Підключення по WebRTC

Підтримувані десктопні браузери

• Google Chrome (17+) і всі браузери на основі движка Chromium;
• Mozilla FireFox (18+);
• Opera (12+);
• Safari (11+);

Підтримувані мобільні браузери для Android

• Google Chrome (28+);
• Mozilla Firefox (24+);
• Opera Mobile (12+);
• Safari (11+).

WebRTC, Microsoft і Internet Explorer

Дуже довго Microsoft зберігала мовчання з приводу підтримки WebRTC в Internet Explorerі в своєму новим браузері Edge. Хлопці з Редмонда не дуже полюбляють давати в руки користувачів технології, які вони не контролюють, ось така ось політика. Але поступово справа зрушила з мертвої точки, тому що ігнорувати WebRTC далі було вже не можна, і був анонсований проект ORTC, похідний від стандарту WebRTC.

За словами розробників ORTC - це розширення стандарту WebRTC з поліпшеним набором API на основі JavaScript і HTML5, що в перекладі на звичайну мову означає, що все буде те ж саме, тільки контролювати стандарт і його розвиток буде Microsoft, а не Google. Набір кодеків розширено підтримкою H.264 і деяким аудіокодеками серії G.7ХХ, використовуваними в телефонії і апаратних ВКС системах. Можливо з'явиться вбудована підтримка RDP (для передачі контенту) і обміну повідомленнями. До речі, користувачам Internet Explorer не пощастило, підтримка ORTC буде тільки в Edge. Ну і, природно, такий набір протоколів і кодеків малою кров'ю стикується зі Skype for Business, що відкриває для WebRTC ще більше бізнесзастосувань.

WebRTC дозволяє реалізувати real-time аудіо / відео зв'язок через браузер

У цьому топіку я розповім як реалізувати найпростіше WebRTC додаток.

1. getUserMedia - отримання доступу до медіа пристроїв (мікрофон / вебкамера)

Нічого складного, за допомогою 10 рядків javascript-коду ви зможете побачити і почути себе в браузері (демо).

Створена index.html :

До елементу video ви можете застосувати css3-фільтри.

Засмучує тут те, що на даному етапі розвитку WebRTC я не можу сказати браузеру «цього сайту я довіряю, завжди давай йому доступ до моєї камері і мікрофону» і потрібно натискати Allow після кожного відкриття / оновлення сторінки.

Ну і не зайвим буде нагадати, що якщо ви дали доступ до камери в одному браузері, інший при спробі отримати доступ отримає PERMISSION_DENIED.

2. Signaling server (сигнальний сервер)

Тут я порушую послідовність більшості «webrtc getting started» інструкцій тому як вони другим кроком демонструруют можливості webRTC на одному клієнті, що особисто мені тільки додало плутанини в пояснення.

Сигнальний сервер - це координуючий центр WebRTC, який забезпечує комунікацію між клієнтами, ініціалізацію і закриття з'єднання, звіти про помилки.

Сигнальний сервер в нашому випадку це Node.js + socket.io + node-static, він буде слухати порт 1234.
Плюс до всього node-static може віддати index.html, що зробить наш додаток максимально простим.

В теці програми встановимо необхідне:

Npm install socket.io npm install node-static

На сьогоднішній день WebRTC є «гарячої» технологією для потокового аудіо та відео в браузерах. Консервативні технології, такі як HTTP Streaming і Flash, більше підходять для роздачі записаного контенту (video on demand) і істотно поступаються WebRTC в плані реалтайм і онлайн трансляцій, тобто там, де потрібна мінімальна затримка відео, що дозволяє глядачам бачити те, що відбувається «в прямому ефірі».

Можливість якісної комунікації в реальному часі походить від самої архітектури WebRTC, де для транспорту відеопотоків використовується UDP протокол, який є стандартною основою для передачі відео з мінімальними затримками і широко використовується в комунікаційних системах реального часу.

Комунікаційна затримка важлива в системах онлайн трансляцій, вебінарах та інших додатках, де потрібно інтерактивний зв'язок з джерелом відео, кінцевих користувачів і потребує вирішення.

Інша вагома причина спробувати WebRTC - це, безумовно, тренд. Сьогодні кожен Android Chrome браузерпідтримує цю технологію, що гарантує мільйони пристроїв, готових до перегляду трансляції без установки будь-якого додаткового ПЗ і конфігурацій.

Для того, щоб перевірити технологію WebRTC в справі і запустити на ній просту онлайн трансляцію, ми використовували серверне ПЗ Flashphoner WebRTC Media & Broadcasting Server. У фічах заявлена ​​можливість транслювати WebRTC потоки в режимі «один до багатьох» (one-to-many), а так само підтримка IP камер і систем відеоспостереження через RTSP протокол; в цьому огляді ми зосередимося на web-web трансляціях і їх особливості.

Установка WebRTC Media & Broadcasting Server

Оскільки для Windows системи версії сервера не виявилося, а встановлювати виртуалку типу VMWare + Linux не хотілося, протестувати онлайн трансляції на домашньому Windows комп'ютеріне вийшло. Щоб заощадити час вирішили взяти інстанси на хмарному хостингу на зразок такого:

Це був Centos x86_64 версії 6.5 без будь-якого встановленого ПЗ в датацентрі Амстердама. Таким чином, все, що ми отримали в розпорядження, - це сервер і ssh доступ до нього. Для тих, хто знайомий з консольними командами Linux, установка WebRTC сервера обіцяє пройти просто і безболісно. Отже, що ми зробили:

1. Завантажити архів:

$ Wget https: //сайт/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 start

6. Перевірити лог:

$ Tail - f /usr/local/FlashphonerWebCallServer/logs/flashphoner_manager.log

7. Перевірити, що два процеси на місці:

$ Ps aux | grep Flashphoner

Процес установки закінчений.

Тестування WebRTC онлайн-трансляцій

Тестування трансляцій виявилося справою нехитрою. На додаток до сервера є web-клієнт, який складається з десятка Javascript, HTML і CSS файлів і було розгорнуто нами в папку / var / www / html на етапі установки. Єдине, що довелося зробити, це вписати IP адреса сервера в конфіг flashphoner.xml, щоб web-клієнт міг встановити з'єднання з сервером по HTML5 Websockets. Опишемо процес тестування.

1. Відкриваємо сторінку тестового клієнта index.html в Chrome браузері:

2. Для того щоб почати трансляцію, потрібно натиснути кнопку «Start» посередині екрану.
Перед тим як це зробити, необхідно переконатися що веб-камера підключена і готова до роботи. Особливих вимог до вебкамере немає, ми, наприклад, використовували стандартну вбудовану в ноутбук камеру з роздільною здатністю 1280 × 800.

Chrome браузер обов'язково попросить доступ до камери і мікрофону для того щоб користувач розумів, що його відео буде відправлено на Інтернет-сервер і дозволив це зробити.

3. Інтерфейс являє собою успішну трансляцію відеопотоку з камери на WebRTC сервер. У правому верхньому куті індикатор вказує, що потік йде на сервер, в нижньому кутку кнопка «Стоп» для зупинки відправки відео.

Зверніть увагу на посилання в поле знизу. Вона містить унікальний ідентифікатор цього потоку, так будь-який бажаючий може приєднатися до перегляду. Досить відкрити це посилання в браузері. Щоб її скопіювати в буфер обміну потрібно клікнути на кнопку «Copy».

У реальних додатках начебто вебінарів, лекцій, онлайн відео трансляцій або інтерактивного TV розробникам доведеться реалізовувати роздачу цього ідентифікатора певним групам глядачів для того, щоб вони змогли підключитися до потрібних потокам, але це вже логіка роботи програми. WebRTC Media & Broadcasting Server її не стосується, а займається лише роздачею відео.

5. З'єднання встановлено і глядач бачить потік на екрані. Тепер він може відправити посилання комусь іншому, зупинити відтворення потоку або включити повноекранний режим, Користуючись контролю в правому нижньому кутку.

Результати тестування WebRTC сервера онлайн трансляцій

Під час тестів затримка виглядала ідеальною. Пінг до датацентру склав близько 100 мілісекунд і затримка була помітна оком. Звідси, можна припустити, що реальна затримка становить ті ж 100 плюс мінус кілька десятків мілісекунд на час буферизації. Якщо порівнювати з Flash відео: в подібних тестах Flash поводиться не так добре, як WebRTC. Так, якщо на схожій мережі ворухнути рукою, то рух на екрані можна побачити лише через одну / дві секунди.

Щодо якості відзначимо, що на рухах іноді можна розрізнити кубики. Це відповідає природі кодека VP8 і його основному завданню - забезпечити відео зв'язок в реальному часі з прийнятною якістю і без затримок в комунікації.

Сервер досить простий в установці та налаштування, для його запуску не потрібно будь-яких серйозних навичок крім знання Linux на рівні просунутого користувача, який вміє виконувати команди з консолі через ssh і користуватися текстовим редактором. У підсумку нам вдалося налагодити онлайн трансляцію one-to-many між браузерами. Підключення додаткових глядачів до потоку теж не викликало проблем.

Якість трансляції виявилося цілком прийнятним для вебінарів і онлайн нарад. Єдине, що викликало деякі питання, - це дозвіл відео. Камера підтримує 1280 × 800, але дозвіл на тестовій зображенні дуже схоже на 640 × 480. Мабуть, це питання потрібно уточнювати у розробників.

Відео з тестування трансляції з веб-камери
через WebRTC-сервер

У цій статті я хочу розповісти, як використовуючи технології WebRTC і Бітрікс, створити своє мультимедійне веб-додаток :)

Трохи про технології

Технологія WebRTC з'явилася порівняно недавно, перший чернетку був представлений в листопаді 2012 року і буквально за рік технологія досягла хорошого рівня і її вже можна і потрібно використовувати.

Технологія пропонує розробникам можливість створити мультимедійні веб-додатки (відео / аудіо дзвінки) без необхідності завантажувати та встановлювати додаткові плагіни.
Її мета полягає в побудові єдиної платформи для комунікацій в реальному часі, яка буде працювати в будь-якому браузері і на будь-якій операційній системі.

Зовсім недавно список програм, які підтримуються був дуже малий і складався всього з одного браузера: Google Chrome.
За останній рік цей список значно розширився і технологію почали підтримувати майже всі сучасні браузери :)

В даний момент це: Mozilla Firefox 27+ і засновані на WebKit браузери - Google Chrome 29+, Opera 18+, яндекс.браузер 13+.
Є надія, що в цей список скоро повинен увійти Safari, так як компанія увійшла в робочу групу WebRTC в лютому 2014.

На жаль, компанія Microsoft не планує впроваджувати WebRTC і створюють свою технологію CU-RTC-Web, але можливо вони зроблять свою технологію більш-менш сумісною.
Для користувачів Internet Explorer ми пропонуємо випускати десктоп додаток на основі Chromium і пропонувати її користувачам браузерів без підтримки цієї технології.

Про те як ми використовуємо технології WebRTC і про роботу десктопного додатка, я розповідав на Зимової партнерської конференції 1С-Бітрікс, Ви можете подивитися мій доповідь онлайн або скачати відео :)

Як працює WebRTC?

Після прочитання рядків вище, ви швидше за все вже перехотілося робити WebRTC додаток і практично закрили сторінку :)

Але відставити паніку!У нас в продукті вже все є, дивіться самі:

1. Сигнальний протокол в режимі реального часу ви зможете організувати на основі нашого модуля «Push & Pull» і модуля для сервера nginx - nginx-push-stream-module, як з ними працювати докладно написано в моєму блозі на Бітрікс (Якщо цей варіант вас не влаштовує, ви можете легко замінити на інший продукт, наприклад на Socket.io);

2. Для обходу NATа ми створили хмарний сервіс, Який доступний всім користувачам продукту за адресою turn.calls.bitrix24.com;

і найприємніше :)

4. Ми розробили спеціальний компонент, в якому реалізована вся логіка для того, що б ви могли швидко вникнути і почати писати свій додаток (компонент доступний в модулі «Push & Pull» починаючи з версії 14.1.5);

Запускаємо демо-додаток :)

У модулі «Push & Pull» (/ bitrix / modules / pull /) починаючи з версії 14.1.5 з'явилася папка demoв ній в даний момент два приклади:
1. Приклад роботи з модулем «Push & Pull»;
2. Приклад роботи з WebRTC;

Про другий якраз і хотів поговорити :)

Для початку роботи, виконайте наступні дії:
1. Скопіюйте компонент з папки / bitrix / modules / pull / demo / webrtc / compontents /, наприклад сюди / bitrix / compontens / yourcompanyprefix /
2. Скопіюйте сторінку / bitrix / modules / pull / demo / webrtc / html /, наприклад в корінь вашого сайту;
3. Налаштуйте модуль Push & Pull на роботу з сервером черг;
4. Зареєструйте двох користувачів;

Все, тепер можна зайди на цю сторінку під двома різними користувачами і почати один одному дзвонити :)

Краща документація, це вихідний код

Я коротко опишу призначення кожної функції, які використані в demo_webrtc.js (розташований в компоненті), все інше, сподіваюся, буде зрозуміло з вихідного коду.

Що б краще розуміти компонент і як він працює, прочитайте ці дві статті, це допоможе вам легше орієнтуватися:
Створення своєї JS бібліотеки: JS, CSS, Фрази, Залежності.
Робота з модулем «Push & Pull»

WebRTC: Ініціалізація

YourCompanyPrefix.webrtc ()
Це клас по роботі з WebRTC в ньому описуються значення за замовчуванням і робота з Сигналінг.
На замітку: BX.garbage відпрацює при догляді зі сторінки або перезавантаження, тим самим ви зможете обірвати дзвінок.

BX.inheritWebrtc (YourCompanyPrefix.webrtc);
Цю функцію необхідно виконати відразу після ініціалізації, вона пронаследуюет всі базові класи нашої базової бібліотеки BX.webrtc

WebRTC: UserMedia API

YourCompanyPrefix.webrtc.startGetUserMedia
Функція для запиту доступу до відео-камері і мікрофону

YourCompanyPrefix.webrtc.onUserMediaSuccess
Ця функція викликається коли спрацьовує подія «Успішного отримання доступу до обладнання»

YourCompanyPrefix.webrtc.onUserMediaError
Ця функція викликається коли спрацьовує подія «Помилки при отриманні доступу до обладнання»

WebRTC: PeerConnection API

YourCompanyPrefix.webrtc.setLocalAndSend
Функція встановлює мета-інформацію про поточного користувача і передає її іншому користувачеві
YourCompanyPrefix.webrtc.onRemoteStreamAdded
Ця функція викликається коли спрацьовує подія «Отримано віддалений медіа-потік», для відображення його в тезі video

YourCompanyPrefix.webrtc.onRemoteStreamRemoved
Ця функція викликається коли спрацьовує подія «Відключений віддалений медіа-потік», для виключення його в тезі video

YourCompanyPrefix.webrtc.onIceCandidate
Ця функція викликається коли спрацьовує подія «Про необхідність передачі мета-інформації про кодеках, айпі та іншої інформації» іншому користувачу

YourCompanyPrefix.webrtc.peerConnectionError
Функція викликається при виникненні помилки створення з'єднання між користувачам

YourCompanyPrefix.webrtc.peerConnectionReconnect
Функція відправляє запит на спробу перепідключити користувача до існуючого сеансу, наприклад через виниклу помилки

YourCompanyPrefix.webrtc.deleteEvents
Функція обнуляє всі змінені змінні, для нового дзвінка.

WebRTC: Signaling API

YourCompanyPrefix.webrtc.callInvite
Функція для відправки запрошення іншого користувача в відео-дзвінок

YourCompanyPrefix.webrtc.callAnswer
Функція для відправки підтвердження на установку відео-дзвінка

YourCompanyPrefix.webrtc.callDecline
Функція для відправки скасування або завершення відео-дзвінка

YourCompanyPrefix.webrtc.callCommand
Функція для відправки інших команд іншому користувачеві (користувач готовий до установки з'єднання, користувач зайнятий і тд)

WebRTC: Базові команди (з бібліотеки core_webrtc.js)

YourCompanyPrefix.webrtc.ready
Перевірка доступний WebRTC в поточному браузері

YourCompanyPrefix.webrtc.signalingReady
Перевірка доступний Сигналінг на поточній сторінці

YourCompanyPrefix.webrtc.toggleAudio
Включення / вимикання мікрофона

YourCompanyPrefix.webrtc.toggleVideo
Включення / вимикання камери
YourCompanyPrefix.webrtc.onIceConnectionStateChange
Функція викликається коли спрацьовує подія «Установка з'єднання»

YourCompanyPrefix.webrtc.onSignalingStateChange
Функція викликається коли спрацьовує подія «Зміна стану зв'язку»

YourCompanyPrefix.webrtc.attachMediaStream
Функція для установки відео / аудіо потоку в тег video

YourCompanyPrefix.webrtc.log
функція логування

Сподіваюся дана стаття буде вам корисна.

OpenTok, PubNub і WebRTC

Хмарні платформи OpenTok і PubNub для розробки комунікаційних сервісів на основі WebRTC

В даний час Web Video Chats стають все більш і більш популярними. Web Video Chat - це веб-додаток для діалогового спілкування, яке базується на основі Web-сервера і браузерів.

З усіх існуючих технологій побудови Web відеочатів (Ajax; Java; Flash-технології; ASP.Net + Silverlight; HTML5 + JavaScript на базі WebRTC API і ін.) Найбільш перспективною технологією є WebRTC API. Web чати, побудовані на базі технології WebRTC, забезпечують якісну передачу тексту, голосу, відео і даних (файлів) без установки в браузери додаткових плагінів або розширень. Основними елементами відеочату на WebRTC є браузер і контактний сервер.

Браузер, що підтримує WebRTC, стає єдиним інтерфейсом для всіх призначених для користувача пристроїв (ПК, смартфонів, Айпад, IP-телефонів, мобільних телефонів і т.д.), які працюють з комунікаційними сервісами. WebRTC з WebSocket, HTML5, CSS3 і JavaScript дозволяють створювати веб-комунікаційні сервіси нового покоління. Технологія WebRTC реалізується трьома інтерфейсами JavaScript API.

Для роботи пирингового необхідно з двох браузерів, що підтримують WebRTC, звернутися по ip-адресою до сигнального сервера (наприклад, WebSocket сервера), що працює на node.js. Сервер не приймає участі в передачі інформаційних потоків між браузерами, а є сигнальним і призначений для установки з'єднання між браузерами користувачів.

У зв'язку з тим, що підтримка WebRTC здійснюється не всіма хостингами, для реалізації комунікаційних програм на основі WebRTC API і інтеграції їх в веб-вузли (веб-сайти) мережі Інтернет можна використовувати спеціальні платформи, що підтримують WebRTC і надають APIs і SDKs.

API забезпечує взаємодію комунікаційних додатків з платформою (Web сервісом), що надає цей API, а SDK забезпечує розробку комунікаційних додатків, які можуть взаємодіяти з платформою, яка надає цей SDK.

До таких платформ відносяться: OpenTok від TokBox, PubNub, VoxImplant, Twilio, SkyWay від NTT Communications, Kandy.io, SightCall і т.д. Слід зазначити, що для створення контактного сервера можна розгорнути Node.js для веб-комунікаційних додатків на орендованому віртуальному сервері VPS або використовувати хостинги хмарних платформ (PaaS), які підтримують проекти на базі Node.js, наприклад, OpenShift / Red Hat, Heroku / Salesforce, AWS Elastic Beanstalk / Amazon і т.д.

Крім того, для створення комунікаційного додатки можна придбати платформу Flashphoner Web Call Server (серверне програмне забезпечення, Призначене для організації браузерних онлайн-трансляцій аудіо- та відео-потоків), яка заснована на HTML5 Websockets, WebRTC і Flash технології, і встановити її на веб-сервер під OC Linux або орендований віртуальний сервер VPS. В даний час компанія Flashphoner розгорнула свій WebRTC сервер (Web Call Server 5) на хмарному хостингу Amazon Web Services.

В даному оглядірозглянемо найбільш популярні хмарні комунікаційні Web-сервіси на основі технології WebRTC - OpenTok від TokBox і PubNub.

OpenTok від TokBox

OpenTok - це хмарна платформа PaaS (платформа як послуга), яка є провідною комунікаційної платформою Web RTC для інтеграції в веб-сайти і мобільні додаткивідео комунікацій і засобів обміну повідомленнями. OpenTok має розподілену інфраструктуру, яка містить центри обробки даних по всьому світу.

Відкрита платформа OpenTok від TokBox забезпечує розробникам можливість вбудовувати Кросплатформені відеочати на основі WebRTC API в Web додатки (веб-сайти), Java / Android і ОС IOS програми.

Архітектура OpenTok складається з клієнтської частини бібліотеки WebRTC OpenTok (наприклад, OpenTok.js), яка забезпечує вбудовування відеозв'язку в клієнтську частину програми (веб-сторінку) і комплект засобів (OpenTok Client SDKs) для розробки клієнтських додатків (JavaScript / Web додатків, ОС Java / Android і ОС IOS).

Крім того, складовою частиною архітектури OpenTok є серверні SDK (OpenTok Server SDKs), які призначені для розробки серверної інфраструктури (для управління і аутентифікації користувачів) додатки, яке забезпечує динамічну генерацію унікальних ідентифікаторів сеансів ID OpenTok (sessionId) і маркерів (token) для кожного користувача, а також роботу з архівами OpenTok. Web сервер передає відповідний ідентифікатор сеансу і маркер, який клієнт може потім використовувати для підключення до сесії.

Серверні SDKs OpenTok доступні для основних мов програмуваннясерверної частини додатків: Java, .NET, Node.js, PHP, Python, Ruby. Слід зазначити, що якщо для серверної частини програми потрібен іншу мову програмування, який не входить в перерахований список, то TokBox надає OpenTok REST API для створення сесій OpenTok і роботи з архівами OpenTok.

Таким чином, для створення комунікаційних додатків для вузлів Інтернет слід використовувати серверні SDKs OpenTok в поєднанні з клієнтської бібліотекою WebRTC OpenTok і засобами OpenTok Client SDKs.

Щоб використовувати платформу OpenTok для створення відеочату WebRTC, вбудованого в вузол мережі Інтернеті, в першу чергу, необхідно створити обліковий запис на TokBox.com. Безкоштовна обліковий запис на OpenTok діє протягом тридцяти днів. Зареєстрований користувач має можливість отримати ключ API (ApiKey), необхідний для розробки комунікаційного додатки OpenTok. Ключ API ідентифікує обліковий запис розробника OpenTok.

Використовуючи керівництво розробника OpenTok (https://tokbox.com/developer/guides/) в акаунті розробника TokBox можна створити комунікаційне додаток (веб-сторінку відеочату) за допомогою OpenTok Client SDKs. Щоб використовувати платформу OpenTok для додатка, необхідно включити бібліотеку OpenTok.js в веб-сторінку.

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

Ідентифікатор сеансу (SESSIONID) і маркер (token) необхідні для функціонування програми зазвичай створюються програмно на Web сервері з одним з серверних SDKs (OpenTok Server SDKs).

Але для створення тестової версії додатка без серверних SDKs OpenTok, можна на основі ключа API (ApiKey) отримати ідентифікатор сеансу і маркер для цього ідентифікатора сесії вручну за допомогою панелі інструментів розробника. Клієнту потрібен маркер, який дає йому доступ до сесії.

Зразки таких змінних як ключ "apiKey", ідентифікатор сесії "sessionId" і маркера "token" мають вигляд:

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

Після створення об'єкта сеансу з ідентифікатором сеансу (SESSIONID) і маркера (token), додаток ініціалізує об'єкт сесії.

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

Потім здійснюється підключення клієнта до сеансу і публікація аудіо і відео потоків:

session.connect (token, function (error) (
publisher = OT.initPublisher ( "publisher");
session.publish (publisher);
});

Після підключення клієнта до сеансу додаток ініціалізує об'єкт Publisher OpenTok і публікує аудіо і відео потік для даної сесії, щоб його могли побачити інші клієнти.

session.on ((
streamCreated: function (event) (
session.subscribe (event.stream, "subscriber");
}});

Таким чином, відповідно до керівництвом розробника можна створити основу відеочату WebRTC на базі платформи OpenTok, який можна впровадити на свій сайт. На малюнку 2 представлений інтерфейс скриншота цього відеочату на WebRTC, створеного в акаунті розробника TokBox.

Далі необхідно створити серверну частину відеочату, використовуючи OpenTok Server SDKs для однієї з мов програмування. OpenTok Server SDKs дозволяють програмно створювати сеанси OpenTok, генерувати маркери, і працювати з архівацією OpenTok.

Слід зазначити, що в TokBox застосовуються два режими передачі медіа потоків (Media Streams):

• relayed (ретрансляція), в цьому режимі медіа потоки передаються безпосередньо між пиринге (наприклад, між браузерами користувачів в чаті один-до-одного);
• routed (маршрутизація), в цьому режимі використовуються OpenTok Media Router для маршрутизації аудіо-відео потоків між клієнтами (наприклад, в розрахованому на багато користувачів або груповому відеочаті для онлайн-нарад).

PubNub

PubNub - це глобальна мережа потокової передачі даних для: IoT (Internet of Things), Mobile і Web. PubNub - це хмарний Web сервіс обміну повідомленнями в режимі реального часу, який призначений для організації веб-комунікацій між різними платформами: мобільними телефонами, планшетами, веб-браузерами веб-вузлів і т.д. PubNub надає більше 70 SDKs для основних мов програмування з метою створення кроссплатформенних комунікаційних додатків і вбудовування їх в Web додатки (веб-сайти) і додатки мобільних пристроїв (Java / Android і ОС IOS).

Список підтримуваних мов і SDKs сервісом PubNub представлений на сторінці: https://github.com/pubnub/pubnub-api. Слід зазначити, що крім API-інтерфейсів до конкретних програмним платформам PubNub також підтримує API REST. Наприклад, PubNub WebRTC SDK призначений для організації веб-комунікацій (пірінгових мереж) в реальному часі між браузерами по тимчасовій архітектурі. Архітектура взаємодії компонентів комунікаційного додатки на основі платформи PubNub і технології WebRTC представлена ​​на рис. 3.

Як випливає зі схеми взаємодії компонентів WebRTC відеочату (рис.3) платформа PubNub використана в якості масштабується сервера сигналізації (сервера узгодження) для WebRTC додатків. Крім того, платформа PubNub забезпечує виконання таких додаткових функцій як присутність (надання інформації про доступні в мережі користувачів або про актуальний списку користувачів), зберігання / відтворення (дозволяє користувачам бачити історію минулих розмов протягом певного періоду часу) і реєстрація.

У комунікаційних WebRTC додатках на основі платформи PubNub застосовуються два способи обміну повідомленнями (WebSockets і AJAX) між браузером і сервером узгодження. PubNub пропонує новий API для підключення WebRTC додатки до платформи PubNub. WebRTC API PubNub виконує сигналізацію між браузерами користувачів, щоб дозволити їм з'єднатися з тимчасової архітектурі, використовуючи API PeerConnection WebRTC. Після обміну сигнальними повідомленнями між браузерами, між ними встановлюється дуплексний зв'язок для обміну відео Ви і довільними даними. Зв'язок браузерів координується PubNub.

Сервіс PubNub забезпечує не тільки взаємодія всіх компонентів необхідних для встановлення зв'язку між браузерами по тимчасовій схемі з метою обміну повідомленнями в реальному часі, а й надає для них глобальну мережупотокової передачі даних.

Щоб використовувати платформу PubNub для створення відеочату, в першу чергу, необхідно зареєструватися на PubNub з метою створення безкоштовної облікового запису. Зареєстрований користувач має можливість отримати API ключі subscribe_keyі publish_key, Необхідні для розробки комунікаційного додатки PubNub. Потім в своєму акаунті можна додати такі функції, як security, присутність і зберігання.

Після отримання API ключів можна приступити до створення комунікаційного додатки на основі платформи PubNub, використовуючи SDKs на одному з основних мов програмування, або використовувати демонстраційні програми (шаблони). Навчальний посібник для створення комунікаційного додатки представлено на сторінці: https://www.pubnub.com/docs/tutorials/pubnub-publish-subscribe. Довідкове керівництво по створенню відеочату на основі PubNub WebRTC SDK розглянуто на сторінці https://www.pubnub.com/docs/webrtc-javascript/pubnub-javascript-sdk.

Для створення відеочату WebRTC з нуля відповідно до керівництвом необхідно застосувати кілька простих API для JavaScript:

• підключити бібліотеку PubNub в HTML сторінку, тобто включити JavaScript PubNub SDK в код HTML сторінкиперед ініціалізацією клієнта;
• init () - форматувати клієнтське API PubNub;
• subscribe () - підписатися на певний канал (викликати метод subscribe () PubNub API);
• publish () - відправити повідомлення на конкретний канал (викликати метод publish () PubNub API);
• unsubscribe () - відмовитися від підписки на певний канал.

Ініціалізація клієнтського API PubNub може бути представлена ​​в наступному вигляді:
var PUBNUB = PUBNUB.init ((
publish_key: "Your Publish Key",
subscribe_key: "Your Subscribe Key"
});

Для створення відеочату WebRTC на основі PubNub WebRTC можна скористатися шаблоном з відкритим вихідним кодом: https://www.pubnub.com/developers/demos/webrtc/. Для перевірки роботи цього відеочату необхідно з двох ПК звернутися за вказаною адресою, в розпочатому в браузерах інтерфейсі відеочату користувачам призначаються номери телефону. Для спілкування користувачі повинні ввести номера телефону в текстове поле "Type Recipient" s "і клацнути на кнопці із зображенням телефонної трубки.

В результаті зображення з відеокамер віддаються в браузери і відображаються на екранах моніторів. Крім того, цей відчути виконує функції чату, щоб надіслати текст. Для листування користувачі повинні ввести текст в поле "chat here" і натиснути клавішу "Enter". На малюнку 4 представлений скріншот відеочату користувача з номером телефону 164.

Мал. 4.PubNub з WebRTC

На малюнку 5 представлений скріншот відеочату користувача з номером телефону 128.

Мал. 5.PubNub з WebRTC

Призначений для користувача інтерфейс Web комунікаційного додатки розроблений за допомогою гіпертекстової розмітки HTML5 та CSS3. Код клієнтської частини комунікаційного додатки розроблений на JS. До Web комунікаційному додатком були підключені бібліотеки: JQuery, PubNub JavaScript SDK і PubNub WebRTC SDK.