Facebook и YouTube предоставляют сервисы трансляций, которые позволяют вещать Live-видеопотоки на широкую аудиторию зрителей. В этой статье мы расскажем, как захватить видеопоток с веб-страницы по технологии WebRTC и отправить этот видеопоток одновременно в Facebook и на YouTube для прямой трансляции — сразу в два сервиса.
Перед тем как начать трансляцию, выясним, какие RTMP endpoints предоставляют Facebook и Youtube для стриминга. Далее нам нужно будет послать по этим RTMP адресам видеопотоки.
Начнем, пожалуй с Facebook. Первым делом нужно отыскать кнопку Начать прямой эфир. Эта кнопка может выглядеть так:
Далее нужно еще раз нажать кнопку В эфир
И кликнуть по ссылке Click here для трансляции с внешних устройств, а не с самого Facebook.
Как Сделать Рестрим На Ютуб И Твич | Плагин Multiple RTMP
Далее кликаем Создать стрим
В результате, Facebook дает данные RTMP потока:
Из скриншота видно, что адрес сервера: rtmp://rtmp-api.facebook.com:80/rtmp/
А имя RTMP потока — это длинная уникальная строка:
1489000000111961?ds=1a=ATj9giGjaTTfgpNHBP
Именно эти два параметра нам потребуются для трансляции. Давайте их пока отложим и узнаем RTMP параметры для YouTube.
YouTube
Чтобы начать стримить с YouTube, нужно зайти на сайт https://youtube.com/live и нажать на кнопочку Upload
Далее выбираем Live Streaming и жмем Get Started.
Должна показаться панель стриминга, плеер и RTMP-настройки:
Из настроек видим, что RTMP адрес сервера rtmp://a.rtmp.youtube.com/live2, а имя потока скрыто и становится видимым по нажатию на кнопку Reveal.
Имя RTMP-потока для YouTube выглядит так: 8r0t-z4d-9xyj-2bcd
В итоге мы точно знаем куда слать RTMP-потоки:
| YouTube | ||
| RTMP-адрес | rtmp://rtmp-api.facebook.com:80/rtmp/ | rtmp://a.rtmp.youtube.com/live2 |
| Имя потока | 1489000000111961?ds=1a=ATj9giGjaTTfgpNHBP | 8r0t-z4d-9xyj-2bcd |
Web Call Server
Сервер будет отвечать за прием видеопотока с вебкамеры по WebRTC и доставку на Facebook и YouTube по RTMP.
[RTMP] Стрим, прямая трансляция с камеры видеонаблюдения без ПК. Зачем это нужно и как настроить.
Сначала отправляем на сервер видеопоток с веб-камеры из браузера Google Chrome.
Для этой цели можно скачать пример HTML-страницы и скрипта для стриминга здесь и развернуть на своем веб-сервере три файла из этого архива:
- streamer.html
- streamer.js
- flashphoner.js
Код стандартного демо-примера для стриминга доступен здесь. Допустим мы открыли демо. Коннектимся к серверу и отправляем на сервер WebRTC видеопоток с именем 5dfd. Это работает так:
Видео захватывается с камеры браузера (в данном случае с виртуальной), и уходит на сервер WCS5 по технологии WebRTC, в кодеках VP8+Opus или H.264+Opus в зависимости от устройства и версии браузера.
Следующим шагом будет перенаправление этого видео на Facebook.
Web Call Server имеет REST API, которое позволяет, зная имя потока, перенаправить WebRTC видеопоток на RTMP.
https://wcs5-eu.flashphoner.com:8888/rest-api/push/startup
В результате WCS перенаправляет WebRTC видеопоток на Facebook по длинному адресу:
rtmp://rtmp-api.facebook.com:80/rtmp/1489000000111961?ds=1a=ATj9giGjaTTfgpNHBP
В этом адресе совмещены RTMP URL и имя видеопотока.
Через несколько секунд в Facebook появится видео:
https://wcs5-eu.flashphoner.com:8888/rest-api/push/startup
Сервер вернет 200 OK и заберет поток на YouTube:
В итоге видим, что стрим транслируется и раздается на оба сервиса: и на Facebook и на YouTube.
https://wcs5-eu.flashphoner.com:8888/rest-api/push/find_all
Останавливаем ретрансляции двумя вызовами /push/terminate
https://wcs5-eu.flashphoner.com:8888/rest-api/push/terminate
https://wcs5-eu.flashphoner.com:8888/rest-api/push/terminate
Пишем JavaScript / HTML код
Работать с REST API, пожалуй, приходилось каждому или почти каждому разработчику. Поэтому мы не будем здесь описывать код, реализующий отправку REST/HTTP запросов.
Вместо этого расскажем как видеопоток с веб-страницы и вебкамеры доходит до сервера.
Как мы упоминали выше, для создания минимального клиента, захватывающего видео, необходимо три скрипта:
- streamer.html
- streamer.js
- flashphoner.js
streamer.html
Эта страница содержит div-элемент localVideo, в котором будет отображаться захват с камеры, и кнопку Start для начала трансляции.
The streamer
Скрипт трансляции работает с четырьмя основными функциями API:
- Flashphoner.init(); //отвечает за инициализацию API.
- Flashphoner.createSession(); //отвечает за подключение к серверу
- session.createStream(); //отвечает за создание видеопотока
- session.createStream().publish(); //отвечает за отправку видеопотока
var localVideo; function init() < Flashphoner.init(); localVideo = document.getElementById(«localVideo»); >function start() < Flashphoner.createSession().on(Flashphoner.constants.SESSION_STATUS.ESTABLISHED, function (session) < //session connected, start streaming startStreaming(session); >).on(Flashphoner.constants.SESSION_STATUS.DISCONNECTED, function () < setStatus(«DISCONNECTED»); >).on(Flashphoner.constants.SESSION_STATUS.FAILED, function () < setStatus(«FAILED»); >); > function startStreaming(session) < session.createStream(< name: «stream222», display: localVideo, cacheLocalResources: true, receiveVideo: false, receiveAudio: false >).on(Flashphoner.constants.STREAM_STATUS.PUBLISHING, function (publishStream) < setStatus(Flashphoner.constants.STREAM_STATUS.PUBLISHING); >).on(Flashphoner.constants.STREAM_STATUS.UNPUBLISHED, function () < setStatus(Flashphoner.constants.STREAM_STATUS.UNPUBLISHED); >).on(Flashphoner.constants.STREAM_STATUS.FAILED, function () < setStatus(Flashphoner.constants.STREAM_STATUS.FAILED); >).publish(); > function setStatus(status)
Скачать архив с скриптами streamer.html и streamer.js можно здесь.
Чтобы трансляция заработала из Google Chrome, нужно выложить скрипты трансляции на веб-хостинг, который работает по https.
Web Call Server может быть установлен на отдельном Linux-хосте. Скачать сервер для тестов можно здесь. После того, как сервер установлен и запущен, он будет принимать входящие вебсокет-соединения по адресам: ws://host:8080 и wss://host:8443
Таким образом, мы показали как захватить видео с вебкамеры и доставить видеопоток до сервера с помощью трех скриптов. Если все было сделано правильно, скрипт должен вывести статус PUBLISHING. Это означает, что WebRTC поток успешно доставляется на сервер и может быть ре-транслирован на YouTube или Facebook с помощью REST API.
Ссылки
Web Call Server — WebRTC сервер с возможностью ретрансляции на YouTube и Facebook
Web SDK — JavaScript API для внедрения кода трансляции в веб-страницу.
REST API — управление ретрансляциями WebRTC видеопотоков
Source — исходный код примера трансляции потока с веб-страницы на сервер.
YouTube Live — сервис живых трансляций от YouTube
Facebook Live — сервис живых трансляций от Facebook
- Flashphoner corporate blog
- Website development
- JavaScript
- Programming
- Development of communication systems
Источник: h.amazingsoftworks.com
Создание RTMP/RTSP-publish
- В личном кабинете перейдите в раздел CDN .
- Перейдите на вкладку Трансляции и нажмите кнопку Создать ресурс .
- Выберите тип ресурса. Первый поток создается автоматически. Добавляйте или удаляйте потоки по выбору.
- Введите желаемое название потока или сформируйте его автоматически, нажав иконку Кубики .
- Выберите качество потока из выпадающего списка.
Внимание При способе публикации RTMP/RTSP-publish доступно создание не более 10 потоков.
Ресурс создан. Вы будете перенаправлены на вкладку Инструкция по настройке .
Для публикации выделяются два URL (основной и резервный) и имя потока с указанием авторизационного токена. Выберите конкретный способ публикации для формирования корректных ссылок.
Пример для RTMP-publish:
- URL primary: rtmp://a.r.cdnvideo.net/livemaster/
- URL backup: rtmp://b.r.cdnvideo.net/livemaster/`
- Streams: m97yox4iyw_0k1z5tsvxkb?auth=jkJt47ncuaFo78z1WXgAgJp
Резервный URL следует использовать только при наличии достаточной полосы пропускания. При создании нескольких потоков каждому из них будет выделен свой Stream .
Для публикации нескольких качеств в некоторых энкодерах (например, Wirecast) требуется вводить поле Streams по отдельности. Чтобы показать Streams по отдельности нажмите на Стрелочку вниз .
Если вы пользуетесь, например FMLE 3.2, скопируйте поле целиком.
Проверка трансляции
После получения ссылок для публикации и настройки энкодера мы рекомендуем проверить трансляцию на корректность работы. Для этого перейдите во вкладку Плеер . При правильной настройке энкодера в плеере отобразится запущенная трансляция.
Выберите комфортный способ просмотра: просмотр созданных потоков по отдельности или все вместе.
Используйте фрейм Код для встраивания для размещения плеера на вашем ресурсе.
Транскодирование
Данная услуга предназначена для компаний, у которых нет возможности отдать нам поток со следующими характеристиками, необходимыми для интернет-вещания:
- протокол: RTMP, RTSP, MPEG_TS,
- кодек для видео: h.264,
- кодек для аудио: AAC/mp3.
Если у вас нет возможности предоставить поток с указанными параметрами, а также для сокращения затрат на оборудование и программное обеспечение — используйте услугу транскодирования.
Для подключения услуги транскодирования на странице создания или редактирования RTMP-publish ресурса необходимо:
- Указать исходный поток, который вы будете публиковать.
- Выбрать подходящий пакет транскодирования (параметры пакета можно увидеть, нажав кнопку Подробности ).
- Нажать кнопку Создать ресурс или Сохранить .
Если вы заказываете услугу транскодирования, то для ресурса указывается только один входной поток.
DVR и запись потока
Для подключения услуги в рамках ресурса необходимо активировать переключатель DVR и запись потока .
Если вы хотите, чтобы записываемые потоки шли в рамках одного master плейлиста (например, если записываемые потоки различаются лишь качеством), активируйте опцию Использовать адаптивный playlist (smil) .
Для каждого из сгенерированных потоков можно выбрать свои настройки записи и DVR.
Настройки для потока
- Выберите тип трансляции:
- Кратковременная трансляция — запись идет не более 12 часов, целиком доступна после окончания. Подходит для записи единоразовых мероприятий (вебинаров, спортивных трансляций и т.д.).
- Постоянная трансляция — ведется запись исключительно определенного окна (последние N часов, где N — не больше 12). После окончания трансляции доступно только это окно. Подходит для вещания 24/7 (телеканалов, видеонаблюдения и т.д.).
- (опционально) Активируйте переключатель DVR .
- во время записи при включенном DVR плеер показывает Live-поток с возможностью перемотки до начала записи, при выключенном — оригинальный Live-поток.
- после окончания записи при включенном DVR плеер показывает запись, при выключенном — Live-поток.
Если запись активна, то в интерфейсе появляется возможность сбросить окно DVR (начать накапливать окно заново). Для этого необходимо нажать кнопку Сброс DVR .
Если на шаге 1 вы выбрали кратковременную трансляцию
- время и путь хранения записи;
- Timeout записи;
- способ начала записи.
Настройка Время хранения записи позволяет выбрать период времени после окончания записи, по истечении которого она удаляется, чтобы освободить место в хранилище.
Настройка Путь хранения записи позволяет указать любой путь в хранилище, по которому будет доступна сохранённая запись.
Настройка Timeout записи позволяет выбрать период времени при недоступности Live-потока, в течение которого запись не считается завершенной и продолжается, ожидая возобновления публикации потока.
Настройка Способ начала записи позволяет выбрать, когда именно начнется запись:
- По публикации — запись начнется с минимальной задержкой после начала публикации потока.
- По кнопке — запись начнется в тот момент, когда вы нажмете кнопку Начать запись (становится активной только после создания ресурса). Запись остановится либо после нажатия кнопки Остановить запись , либо после завершения публикации Live-потока.
- По расписанию — запись начнется и закончится в определенные моменты мирового времени (если поток будет опубликован).
Если на шаге 1 вы выбрали постоянную трансляцию
Примените следующие настройки:
- продолжительность DVR;
- Timeout DVR;
- cпособ начала записи.
Настройка Продолжительность DVR позволяет выбрать размер окна, которое будет записано и доступно для DVR. Можно выбрать подходящее значение из выпадающего списка или указать другое (в минутах).
Настройка Timeout DVR позволяет выбрать период времени при недоступности Live-потока, в течение которого запись не считается завершенной и продолжается, ожидая возобновления публикации потока.
Настройка Способ начала записи позволяет выбрать, когда именно начнется запись:
- По публикации — запись начнется с минимальной задержкой после начала публикации потока.
- По кнопке — запись начнется в тот момент, когда вы нажмете кнопку Включить DVR (становится активной только после создания ресурса). Запись остановится либо после нажатия кнопки Отключить DVR , либо после завершения публикации Live-потока.
Источник: cloud.ru
RTMP-трансляции в Telegram
В API-схеме Telegram появилось упоминание поддержки протокола RTMP для ведения трансляций.
Это позволит стримерам вести трансляции не только через приложение Telegram, но и через сторонние программы, например, OBS Studio. Такое ПО позволяет комбинировать источники видео и аудио, автоматизировать трансляцию, отображать чат и сообщения о пожертвованиях. RTMP является стандартом и поддерживается на других платформах для прямых трансляций, например, YouTube и Twitch.
Сейчас для того, чтобы вести трансляцию из стороннего ПО, приходится использовать библиотеки. В частности, прямую трансляцию через OBS можно вести только с помощью эмулированной камеры через Telegram Desktop и Telegram для macOS.
Подписывайтесь на наши каналы в Telegram, Telegram Info и Beta Info, чтобы всегда знать о последних новостях мессенджера.
Источник: tginfo.me