Публикация по WebRTC

Вы можете опубликовать по WebRTC во Flussonic видео с веб-камеры или создать собственное приложение, которое будет отправлять во Flussonic видео и/или аудио. Ниже приведены инструкции на оба случая.

Публикация осуществляется про стандарту WHIP. О том, что такое WebRTC, WHIP и WHEP, читайте в главе Использование протокола WebRTC.

Содержание:

Настройка WebRTC-потока в Flussonic, в том числе для публикации с веб-камеры.
Рекомендации по созданию клиентского приложения.
Опции публикации по WebRTC, в том числе аудио подкасты по WebRTC и трансляция экрана.
Балансировка нагрузки при публикации по WHIP.

Предварительные требования

Настройте HTTPS. В некоторых браузерах публикация по WebRTC видео и аудио потоков возможна только по защищенному соединению. То есть браузер может запретить доступ к камере и микрофону со страницы, которая располагается не по HTTPS, а по HTTP адресу. Но на локальных адресах (localhost, 127.0.0.1) это допускается.
Не закрывайте UDP-порты. У Flussonic нет фиксированного диапазона портов для WebRTC, т.е. используются те порты, которые выделит ОС. Закрыв те или иные UDP-порты, вы можете случайно попасть на используемые. Чтобы безопасно разрешить прослушивание всех портов по UDP, не используйте на сервере с Flussonic другое ПО.

Настройка WebRTC-потока в Flussonic

На сервере Flussonic добавьте в конфигурацию публикуемый поток:

Перейдите на вкладку Media и создайте поток, нажав кнопку Add stream рядом с названием вкладки Streams.
Затем в настройках потока во вкладке Input укажите publish:// в поле URL. Убедитесь что для Publication выбрано значение enabled.
При необходимости вы можете настроить публикацию по WebRTC, зайдя в options на той же вкладке Input. Доступны следующие параметры: выходной аудиокодек, максимальный и минимальный битрейт, а также параметры ABR.

Теперь вы можете включить публикацию в этот поток с веб-камеры или выполнить на клиенте код для публикации видео в созданный поток. Для публикации потока используйте следующий URL в вашем приложении-клиенте:

http://FLUSSONIC-IP:PORT/STREAM_NAME/whip

См. справочник Streaming API.

Публикация с веб-камеры

Чтобы включить публикацию с веб-камеры в созданный поток, нажмите кнопку Publish From Webcam. Разрешите браузеру доступ к камере и микрофону.

Окно предпросмотра видео с веб-камеры будет отображено здесь же.

При необходимости вы можете защитить публикацию паролем, задать максимально допустимый битрейт и настроить внешнюю авторизацию сессий публикации.

Рекомендации по созданию клиентского приложения

Для написания кода используйте библиотеку Flussonic WebRTC player. Ее можно установить одним из описанных ниже способов.

Описание классов библиотеки доступно на npm.

Установка библиотеки с помощью NPM и webpack

Для варианта с импортом библиотеки в ваш проект через Webpack необходимо загрузить пакет:

npm install --save @flussonic/flussonic-webrtc-player

и импортировать его в ваше приложение:

import {
  PUBLISHER_EVENTS,
  PLAYER_EVENTS,
  Player,
  Publisher,
} from "@flussonic/flussonic-webrtc-player";

См. также демо-приложение по ссылке либо на странице Проигрывание по WebRTC.

Установка без NPM и webpack

В секцию скриптов вашего HTML-файла добавьте:

<script src="https://cdn.jsdelivr.net/npm/@flussonic/flussonic-webrtc-player/dist/index.min.js"></script>

Полный пример кода страницы с плеером приведен на странице Проигрывание по WebRTC.

Опции публикации по WebRTC

Организация аудио-подкастов по WebRTC

Чтобы публиковать только звуковую дорожку, необходимо в опциях экземпляра publisher указать следующую конфигурацию в constraints:

import Publisher from '../publisher';
//...
publisher = new Publisher(
//...

    constraints: {
      video: false,
      audio: true,
    },
//...
);

Опцию video можно совсем не указывать, результат будет такой же — публикация на Flussonic только аудиодорожки.

Чтобы проиграть такой поток, не нужно дополнительных настроек.

Отключение звука в публикации

Для отключения звука в публикации используется метод mute:

import Publisher from '../publisher';
//...
publisher = new Publisher(*your options*);
//...
publisher.mute();
//...

Функцию mute можно привязать к кнопке в клиентском приложении, чтобы пользователь мог сам отключать звук в исходящем потоке во время его публикации. В демо-приложении есть пример такой кнопки.

Захват экрана

WebRTC плеер позволяет публиковать видео, захваченное с экрана, что может быть полезно для демонстраций. Для этого используйте метод shareScreen:

import Publisher from '../publisher';
//...
publisher = new Publisher(*your options*);
//...
shareScreen();
//...

Чтобы переключиться обратно на захват видео с камеры, используйте этот метод повторно. Метод shareScreen можно привязать к кнопке в клиентском приложении, чтобы пользователь во время публикации мог самостоятельно переключаться на захват экрана и обратно, на захват с камеры.

Элемент canvas для наложения пользовательских фильтров

Вы можете использовать элемент canvas для применения любых пользовательских фильтров или эффектов к видео, публикуемому во Flussonic. WebRTC плеер сам создает элемент canvas и передает пользовательское видео через него, т.е. трансляция на Flussonic идет с элемента canvas. Чтобы получить элемент canvas и применить к нему свою логику, используйте функцию canvasCallback(canvasElement) в параметрах Publisher'a.

Пример на странице Проигрывание по WebRTC включает использование canvas. Если вы попробуете запустить этот пример, то увидите, что на публикуемое видео наложен фильтр "sepia", а поверх видео отображается текст "It's publishing to Flussonic!".

Балансировка нагрузки при публикации по WHIP

Благодаря тому, что WHIP основан на HTTP POST-запросах, вы можете применять балансировщик нагрузки для распределения запросов на публикацию между серверами в кластере. Балансировщик будет перенаправлять POST-запросы на серверы в кластере, используя HTTP код перенаправления 307.