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

Содержание

MSE Player

Здесь мы расскажем, как использовать наш MSE плеер с открытым исходным кодом в вашем frontend-проекте для того, чтобы организовать проигрывание видео с низкой задержкой. Плеер давно работает в нашем модуле embed.html, который использует HTML5, не требует Flash и работает там, где WebRTC не может.

Этот плеер вы видите в веб-интерфейсе Flussonic and Watcher, а также его можно открыть отдельно из браузера по специальной ссылке:

http://flussonic-ip/STREAMNAME/embed.html?realtime=true

О механизме рассказано в разделе HTML5 (MSE-LD) воспроизведение с низкой задержкой

JavaScript-модуль плеера можно использовать в ваших приложениях. Мы опубликовали исходники на GitHub: https://github.com/flussonic/mse-player

На этой странице:

Установка модуля

Быстрый старт без NPM

Модуль для поддержки MSE можно скачать по адресу: http://flussonic-ip:80/flu/assets/FlussonicMsePlayer.js

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

<script type="text/javascript" src="/flu/assets/FlussonicMsePlayer.js"></script>

Затем инициализируйте плеер и прикрепите его к <video/>. Далее начните воспроизведение:

...
<body>
  <video id="player"/>
...
<script type="text/javascript">
  window.onload = function() {
    var element = document.getElementById('player');
    window.player = new FlussonicMsePlayer(element, streamUrl);
    window.player.play();
  }
</script>
</body>
...

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

— Запустите:

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

— и импортируйте его в JS:

import FlussonicMsePlayer from '@flussonic/flussonic-mse-player'
...
const player = new FlussonicMsePlayer(element, url, opts)

Пример приложения с webpack и нашим плеером MSE.

Вы можете найти исходный код плеера MSE на github: flussonic/mse-player

Методы и события FlussonicMsePlayer

var player = new FlussonicMsePlayer(element, streamUrl, opts)
element <video> DOM элемент
streamUrl — адрес видео потока

Методы:

play() — начать воспроизведение
stop() — остановить воспроизведение
setTracks([videoTrackId, audioTrackId]) — установить видео, аудио треки воспроизведения
getVideoTracks() — получить доступные видео треки(использовать в onMediaInfo)
getAudioTracks() — получить доступные аудио треки(использовать в onMediaInfo)

События

onProgress(currentTime) — срабатывает при воспроизведении видео и отдает текущее проигрываемое время
onMediaInfo(metadata) — срабатывает при получении данных потока. Содержит общую информацию о вопроизводимом видео. А также, в случае мультибитрейт видео, информацию о всех его треках. Внутри этой функции или после срабатывания доступны методы getVideoTracks()/getAudioTracks()

Установка треков в мультибитрейтном видео

Например, есть видео с тремя видео треками: v1(800k), v2(400k), v3(200k) и двумя аудио: a1(32k), a2(16k).

Чтобы по умолчанию игрались v2 и a1, укажем в конструкторе FlussonicMsePlayer такой URL-адрес:

'ws://flussonic-ip/s/mse_ld?tracks=v2a1'

Получить все доступные треки можно двумя способами:

  • С помощью присвоения атрибуту onMediaInfo функции-колбеку, которая при загрузке видеопотока вернет его метаданные:
{
  width: ...,
  height: ...,
  streams: [
    {
      track_id: "v1", bitrate: ..., codec: ..., content: "video", fps: ..., ...
      ...
  track_id: "a1", bitrate: ..., codec: ..., content: "audio", fps: ..., ...  
}

] }

  • Или с помощью методов getVideoTracks()/getAudioTracks(), которые после срабатывания onMediaInfo вернут доступные видео/аудио треки соответственно.

С помощью метода setTracks([videoTrackId, audioTrackId]) вы можете установить нужные треки для воспроизведения.

Полный пример использования

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <style>
    .player-container {
      border: 1px solid black;
    }

    #player {
      position: relative;
      width: 100%;
    }

    .mbr-controls {
      display: none;
    }
  </style>
<body>
  <div class="player-container">
    <video id="player"/>
  </div>
  <div class="mbr-controls">
    <div>
      <label for="videoTracks">video tracks</label>
      <select name="videoTracks" id="videoTracks"></select>
    </div>
    <div>
      <label for="audioTracks">audio tracks</label>
      <select name="audioTracks" id="audioTracks"></select>
    </div>
    <button onclick="window.setTracks()">set tracks</button>
  </div>

  <button onclick="window.player.play()">Play</button>
  <button onclick="window.player.stop()">Stop</button>
  <script type="text/javascript" src="/flu/assets/FlussonicMsePlayer.js"></script>
  <script>
    window.onload = onLoad();

      function onLoad() {

        var element = document.getElementById('player');
        var videoTracksSelect = document.getElementById('videoTracks');
        var audioTracksSelect = document.getElementById('audioTracks');
        var mbrControls = document.querySelector('.mbr-controls');

        var url = (window.location.protocol == "https:" ? "wss:" : "ws:")+ '//'+window.location.host+'/clock/mse_ld';

        window.player = new FlussonicMsePlayer(element, url);

        window.player.onProgress = function(currentTime) {
          console.log(currentTime);
        };

        window.player.onMediaInfo = (rawMetaData) => {
          var videoTracks = window.player.getVideoTracks()
          var audioTracks = window.player.getAudioTracks()
          var videoOptions = videoTracks.map((v, i) => (
            `<option value="${v['track_id']}">${v['bitrate']} ${v['codec']} ${v['fps']} ${v['width']}x${v['height']}</option>`
          ))

          var audioOptions = audioTracks.map(v => (
            `<option value="${v['track_id']}">${v['bitrate']} ${v['codec']} ${v['lang']}</option>`
          ))

          videoTracksSelect.innerHTML = videoOptions.join('')
          audioTracksSelect.innerHTML = audioOptions.join('')

          mbrControls.style.display = 'block'
        }

        window.setTracks = () => {
          var videoTrackId = videoTracksSelect.options[videoTracksSelect.selectedIndex].value
          var audioTrackId = audioTracksSelect.options[audioTracksSelect.selectedIndex].value

          window.player.setTracks([videoTrackId, audioTrackId])
        }
      }
  </script>
</body>
</html>

Синхронный просмотр нескольких DVR архивов

Flussonic позволяет просматривать несколько DVR архивов одновременно и, что ещё важнее, перемещаться внутри всех архивов синхронно.

Для проигрывания нескольких DVR во Flussonic MSE player нужно сформировать поток, который состоит из нескольких потоков, у которых есть DVR. Пользователи смогут видеть все потоки сразу в виде мозаики и перемещаться внутри всех архивов синхронно.

При инициализации плеера добавьте переменную config:

this.player = new FlussonicMsePlayer(this._videoElement, url, config);

Переменная config - это объект с настройками плеера. Туда с ключом streamingChannels нужно добавить настройки DVR-мозаики.

В примере ниже создаём мозаику, но не указываем названия потоков, т.е. этих названий не будет видно в плеере.

Пример конфигурации DVR мозаики размером 3х2 (без названий для потоков)

streamingChannels: {
// cols: 3, // Количество столбцов в мозаике, необязательный параметр
// rows: 2, // Количество строк в мозаике, необязательный параметр
    streams: [
    {
        subName: 'camera01', // Имя потока, оно должно совпадать с именем в UI
        main: true, // Поток будет выбран по умолчанию, необязательный параметр
        auth_token: 'example', // Токен для авторизации
        address: 'example' // Путь к другому серверу с Flussonic, необязательный параметр
        order: 1 // Порядок слева направо
    },
    {
        subName: 'camera02',
        order: 2
    },
    {
        subName: 'camera03',
        order: 3
    },
    {
        subName: 'camera04',
        order: 4
    },
    {
        subName: 'camera05',
        order: 5
    },
    ]
}

Название потоков в DVR-мозаике

По умолчанию имена видеопотоков не отображаются в DVR плеере (embed.html?dvr=true). Однако их можно отображать в мозаике, где они служат для идентификации потоков, например, при просмотре множества потоков с разных камер.

Чтобы показывать имя каждого потока в DVR плеере в режиме мозаики, передайте поток через streamigChannels с опциями renderTitles и title.

Настройки DVR мозаики с именами потоков:

streamingChannels: {
{
    renderTitles: true, // Показывать ли имена потоков, необязательный параметр
    cols: 3, // Количество столбцов в мозаике, необязательный параметр
    rows: 2, // Количество строк в мозаике, необязательный параметр
    streams: [
        {
            subName: 'camera01', // Имя потока, оно должно совпадать с именем в UI
            title: 'Входная дверь', // Какое имя выводить для этой камеры в DVR плеере, необязательный параметр
            auth_token: 'example', // Токен для авторизации
            address: 'example' // Путь к другому серверу с Flussonic, необязательный параметр
            main: true, // Поток будет выбран по умолчанию, необязательный параметр
            order: 1 // Показывать потоки слева направо, необязательный параметр
        },
        {
            subName: 'camera02',
            title: 'Гараж',
            order: 2
        },
            // и т.д.
    ]
}

Получение статистики

При инициализации плеера добавьте переменную config:

this.player = new FlussonicMsePlayer(this._videoElement, url, config);

Переменная config - это объект с настройками плеера.

С помощью опции onStats, которую следует передавать с параметром config, возвращается объект, содержащий статистику по буферам плеера и время получения статистики.

Добавление элементов управления как в десктопном плеере (Flussonic 20.10)

Теперь Flussonic MSE плеер поддерживает новые элементы управления, которые есть в обычных настольных плеерах, такие как пауза, пуск или выключение звука. Элементы управления являются частью MediaElement, который может быть присоединен к плееру как отдельная часть после инициализации.

С помощью метода attachMedia(element) можно прикрепить <video /> элемент к плееру отдельно, после инициализации плеера. Также можно передать MediaElement через параметры плеера, тогда он прикрепится автоматически.

Для управления плеером через MediaElement вам пригодятся события: onMediaAttached, onPause, onResume.

С помощью события onMediaAttached можно точно знать, когда плеер присоединен к <video /> и готов к началу проигрывания. Пример использования:

onMediaAttached: () => {
      element.play()
    },

Плеер слушает нативные события HTTP элемента <video /> (в котором вы передаете плеер на веб-страницу), такие как play/pause/unmute и может реагировать на них. С помощью onPause и onResume можно реагировать на события паузы и восстановления проигрывания. Например, можно рисовать элементы интерфейса (большой значок паузы).