Розгортання розрахованої на багато користувачів WebRTC трансляції з web-камери через сервер за 3 хвилини

розрахованої

Схема трансляції

розгортання

Streamer - HTML

У заготівлі html-сторінки Streamer ми використовували такі речі:

1) Скриптflashphoner.js

3) Кнопка Start, за якою відбуватиметься запуск трансляції з викликом функції start().

4) Зверніть увагу, що до body додано обробку подіїonLoadз викликом функції ініціалізації.

У цьому прикладі всього чотири функції:

Ця функція створює підключення до сервера за протоколом websockets. Адреса підключення:wss://domain:8443. На місціdomainповинен бути домен вашого WCS сервера (припускаємо, що сервер вже встановлений, налаштований і має виділений домен, наприклад webrtc.mycompany.com. ПортTCP 8443повинен бути відкритий для вхідних підключень).

З коду цієї функції зрозуміло, що наступною дією після отримання статусуESTABLISHED, буде виклик функціїstartStreamingі відправка потоку на сервер.

Тут ми створюємо новий об'єкт Stream, використовуючи функцію API:session.createStream();. При створенні стриму як основні параметри передаються:

Ім'я потоку бажано генерувати унікальне, але ми для тесту використовуємо просто stream222.

Ця функція відображає статус сесії (session) або потоку (stream) на сторінці HTML.

Виносимо наш скрипт в окремий файлstreamer.js. Код сторінкиstreamer.htmlвиглядатиме так:

Streamer - тестування

У результаті у нас вийшло міні стрімінг-додаток, що складається з трьох скриптів:

● streaming.html ● streaming.js ● flashphoner.js

Копіюємо наші скрипти на web-сервер, щоб почати тестування. Як веб-сервер ми використовуємоApache 2зі стандартним/var/www/html

розгортання

багато

Player - HTML

Сторінку плеєра копіпастим зі стрімера, з тією лише різницею, що використовуватимемо скрипт:player.jsзамістьstreamer.js, і замістьlocalV >

У скрипті плеєра також є деякі відмінності, але підхід залишається тим самим: ініціалізується Flashphoner API, по кнопці Start відкривається з'єднання з сервером через websocket, чекає на подіїESTABLISHEDі починає відтворення потоку.

Список відмінностей скриптуplayer.jsвід скриптуstreamer.js:

● Використовується remoteVideo замість localVideo ● Після встановлення з'єднання викликаємо startPlayback замість startStreaming ● При створенні стримування методом createStream(), передаються параметриreceiveAudio=trueтаreceiveV > ● Викликається метод play() замість publish()

В результаті отримуємо WebRTC-плеєр, що складається з двох скриптів:

Не забуваємо, що для роботи плеєра також необхідний файл APIflashphoner.js, тому копіюємо файли програвача в ту ж папку на web-сервері.

У результаті наш остаточний додаток для WebRTC онлайн трансляцій складається з п'яти файлів:

● streamer.html ● streamer.js ● player.html ● player.js ● flashphoner.js

багато

розгортання

Спробуємо розгорнути трансляцію за 3 хвилини з огляду на наступне:

2) Вже встановлено та налаштовано HTTP сервер, наприкладApache. Web-сервер налаштований для роботи черезHTTPSі має FTP/SFTP/SSH доступ, через який можна залити/завантажити тестові скрипти.

Щоб провести тестування без встановлення, можна скористатися демо-серверомwss://wcs5-eu.flashphoner.com:8443— він відкритий для коннектів та тестування.

Завантажуємо тестові скрипти та розпаковуємо у папці/var/www/htmlна веб-сервері.

Відкриваємо скриптиstreamer.jsтаplayer.jsна редагування, знаходимо та змінюємо:

тутdomain.com— доменне ім'я сервера, на якому встановлено WCS5

Відкриваємоstreamer.htmlу браузері поhttps://і натискаємо Start. Відкриваємо у новій вкладціplayer.htmlі натискаємо Start.

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

Хардкорна конфа за С++. Ми запрошуємо лише профі.