Документация на Flussonic Media Server

  1. Быстрый старт
  2. How To
  3. Потоковое вещание
    1. Публикация
    2. Прием мультикаста
    3. Варианты источников
    4. Переключение источников
    5. Плейлисты
    6. Наложение логотипа
    7. Миксер
    8. WebRTC публикация
    9. SDI
    10. Отправка на другие сервера
    11. Распознавание DVB субтитров
  4. Транскодер
    1. Логотип
    2. Hardware
    3. Скриншоты
    4. Мозаика
  5. DRM
    1. Simple CAS
    2. Conax DRM
    3. BuyDRM (KeyOS)
  6. Авторизация
    1. Конструктор бэкендов
    2. Сервис сбора статистики
    3. Domain lock
    4. Middleware
    5. Secure links
    6. Ограничение сессий
    7. Мультиавторизация
    8. Бан IP адресов
    9. DVR
    10. Aliaser
  7. API
    1. HTTP API
    2. Events API
    3. MySQL API
    4. SQL API для кластеров
    5. SNMP
  8. Кластер
    1. Ретрансляция
    2. Кластерный захват
    3. Балансировщик нагрузки
    4. Пиринг
    5. Организация CDN
  9. VOD
    1. Кэш
    2. Облако
    3. Транскодирование файлов
  10. DVR
    1. Настройка
    2. Timeshift
    3. Catchup
    4. Проигрывание
    5. Экспорт в MP4
    6. Доступ по протоколам
    7. Timelapse
    8. API
    9. Кластеризация DVR
    10. Репликация
    11. Облако
  11. Воспроизведение
    1. HLS
    2. embed.html
    3. HTML5 с низкой задержкой
    4. Плеер HTML5 с низкой задержкой
    5. MPEG-TS
    6. RTMP
    7. DASH
    8. HDS
    9. RTSP
    10. multicast, CBR UDP
    11. WebRTC проигрывание
    12. H.265
  12. Администрирование
    1. Установка
    2. Обновление

    3. Конфигурация
    4. Мониторинг
    5. Производительность
    6. Лицензия
    7. LUA скрипты
    8. Безопасность
    9. Let's Encrypt
    10. Миграция
  13. IPTV
    1. Захват спутникового видео
    2. Транскодирование
    3. Middleware в IPTV OTT
    4. Экспорт EPG со спутника
    5. Группы каналов

WebRTC Проигрывание

WebRTC — это P2P протокол общения между двумя клиентами, регламентирующий передачу данных по заранее установленному соединению.

Например, для связи двух браузеров по протоколу WebRTC необходимо зайти на один и тот же сайт в интернете. Также, можно использовать посредника — сигнальный сервер.

Процесс установления P2P-соединения между двумя клиентами заключается в обмене текстовыми описаниями медиапотоков в формате SDP. Сигнальный сервер — посредник, позволяет передать SDP от одного клиента к другому.

Стандартная схема P2P коммуникации через WebRTC подразумевает организацию двух сессий: аудио-видео от клиента А к Б и наоборот: от Б к А.

Flussonic Media Server может выступать в роли одновременно сигнального сервера и клиента: как принимающего видеопоток, так и отдающего.

Таким образом можно говорить о публикации видео на Flussonic Media Server по WebRTC и о проигрывании видео по WebRTC.

Проигрывание с Flussonic Media Server по WebRTC Anchor Anchor x2

Для того, чтобы запустить процесс установления WebRTC соединения с Flussonic Media Server нужно открыть WebSocket соединение с Flussonic Media Server по адресу

ws://flussonic-ip/STREAMNAME/webrtc

где flussonic-ip — адрес и порт Flussonic Media Server.

Поддерживаются протоколы ws и wss.

Результатом обмена SDP с помощью сигнального сервера должен стать локальный объект PeerConnection с заданными свойствами LocalDescription и RemoteDescription, содержащий локальное и удаленное SDP описание соответственно.

Итак, нужно создать PeerConnection и задать обработчик onicecandidate.

После установления WebSocket соединения сервер отправит в веб сокет приглашение (SDP offer), на клиенте его нужно обработать (задать в качестве RemoteDescription для созданного ранее PeerConnection) и отправить ответ (SDP answer).

WebRTC Проигрывание

Также нужно указать сформированный ответ в качестве LocalDescription для объекта PeerConnection.

function openWebSocketConnection(options) {
  var url =
    options.protocol + "://" +
    options.server + ":" +
    options.port + "/" +
    options.stream + "/webrtc";

  websocket = new WebSocket(url);
  websocket.onopen = initPeerConnection;
  websocket.onmessage = onWebSocketMessage;
}

function initPeerConnection() {
  peerConnection = new window.RTCPeerConnection(null);
  peerConnection.stream_id = "remote1";
  peerConnection.onicecandidate = gotIceCandidate;
  peerConnection.ontrack = gotRemoteTrack;
}

function sendWebSocketMessage(data) {
  websocket.send(JSON.stringify(data));
}

function onWebSocketMessage(event) {
  var message = JSON.parse(event.data);

  switch (message.type) {
    case "offer":
      var description = new window.RTCSessionDescription(message);
      peerConnection.setRemoteDescription(description)
        .then(function() {
          return peerConnection.createAnswer();
        })
        .then(function (answer) {
          return peerConnection.setLocalDescription(answer);
        })
        .then(function () {
          sendWebSocketMessage(peerConnection.localDescription);
        });
    break;
    case "candidate":
      var candidate = new window.RTCIceCandidate(message.candidate);
      peerConnection.addIceCandidate(candidate);
    break;
  }
}

В обработчике onicecandidate объекта PeerConnection нужно реализовать отправку сообщения IceCandidate в открытый веб сокет. После этого Flussonic через веб сокет вернет сообщение, содержащее IceCandidate SDP, которое мы используем для установки прямого соединения через объект PeerConnection. На этом этапе мы можем быть уверены, что обе стороны знают SDP друг друга и можно приступать к общению напрямую.

function gotIceCandidate(event){
  var candidate = event.candidate;
  if (candidate) {
    sendWebSocketMessage({
      type: 'candidate',
      stream_id : "local1",
      label: candidate.sdpMLineIndex,
      id: candidate.sdpMid,
      candidate: candidate
    });
  }
}

Для получения видео с сервера нужно описать обработчик ontrack объекта PeerConnection. Следует заранее создать Video Media Element с помощью тега Video и в обработчике ontrack выставить свойство srcObject.

function gotRemoteTrack(event){
  if (event.track.kind === "video") {
    video.srcObject = event.streams[0];
  }
}

После установления прямого P2P соединения сервер начнет отправку видео и его можно будет увидеть в HTML5 теге Video.

Полный код примера доступен здесь