Транслюємо відеопотік з веб-сторінки WebRTC на Facebook і YouTube одночасно, SavePearlHarbor

Ще одна копія хабора

Головне меню

Навігація за записами

Почнемо, мабуть із Facebook. Насамперед необхідно знайти кнопкуПочати прямий ефір. Ця кнопка може виглядати так:

Далі потрібно ще раз натиснути кнопкуВ ефір

І натиснути на посиланняClick hereдля трансляції із зовнішніх пристроїв, а не з самого Facebook.

Далі клацаємоСтворити стрім

В результаті, Facebook дає дані RTMP потоку:

А ім'я RTMP потоку — це довгий унікальний рядок:1489000000111961?ds=1&s

Саме ці два параметри нам потрібні для трансляції. Давайте їх поки що відкладемо і дізнаємося RTMP параметри для YouTube.

Щоб почати стримувати з YouTube, потрібно зайти на сайт https://youtube.com/live та натиснути на кнопкуUpload

Далі вибираємо Live Streaming і тиснемоGet Started.

Повинна з'явитися панель стрімінгу, плеєр та RTMP-налаштування:

У результаті ми точно знаємо куди надсилати RTMP-потоки:

Web Call Server

Для цієї мети можна завантажити приклад HTML-сторінки та скрипту для стрімінгу тут і розгорнути на своєму веб-сервері три файли з цього архіву:

flashphoner.js- це файл API. Його останню версію можна завантажити у збірці Web SDK.

Відео захоплюється з камери браузера (в даному випадку з віртуальною), і йде на сервер WCS5 за технологією WebRTC, кодеками VP8+Opus або H.264+Opus залежно від пристрою та версії браузера.

Для цього потрібно надіслати серверу REST/HTTP запит наступного змісту:

Такий запит можна протестувати з тулу AdvancedREST Console, яка виглядає так:

Надсилаємо аналогічний запит для YouTube

Або з REST-консолі:

Сервер поверне 200 OK і забере потік на YouTube:

У результаті бачимо, що стрім транслюється і лунає на обидва сервіси: і на Facebook, і на YouTube.

Тепер можна запросити список всіх потоків, що транслюються, з того ж REST API:

Сервер поверне список потоків, які в даний момент ретранслюються на Facebook та YouTube:

Зупиняємо ретрансляції двома викликами/push/terminate

Відключаємось від Facebook:

Відключаємось від YouTube:

Працювати з REST API, мабуть, доводилося кожному чи майже кожному розробнику. Тому ми тут не описуватимемо код, що реалізує відправку REST/HTTP запитів.

flashphoner.js- це файл, який знаходиться в складання Web SDK і описувати його сенсу немає.

Ця сторінка містить div-елементlocalVideo, в якому відображатиметься захоплення з камери, і кнопкуStart​​для початку трансляції.

Скрипт трансляції працює з чотирма основними функціями API:

Завантажити архів зі скриптамиstreamer.htmlтаstreamer.jsможна тут.

Щоб трансляція запрацювала з Google Chrome, потрібно викласти скрипти трансляції на веб-хостинг, який працює за https.

---