MSE Player

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

Почему MSE Player?

Использует HTML5 и не требует Flash, что значит, что он поддерживается любым клиентским устройством (браузер, смартфон).
Имеет преимущества перед WebRTC. А точнее: WebRTC требует UDP, а MSE — HTTP, что позволяет MSE проще проходить через корпоративные файерволы и прокси. Кроме того, WebRTC и MSE поддерживают разные кодеки, например, аудио: MSE поддерживает AAC аудио кодек, а WebRTC — нет, что значит, что условный ТВ-канал проще проиграть через MSE Player.

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

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

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

JavaScript-модуль плеера можно использовать в ваших приложениях. Мы опубликовали исходники на GitHub.

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

Установка модуля
Установка треков в мультибитрейтном видео
Полный пример использования
Синхронный просмотр нескольких DVR архивов
Получение статистики
Добавление элементов управления как в десктопном плеере

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

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

Для этого необходимо пройти всего несколько шагов:

Шаг 1.
Скачайте модуль для поддержки MSE Player по адресу:

http://flussonic-ip:80/flu/assets/FlussonicMsePlayer.js

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

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

Шаг 3.
Инициализируйте плеер и прикрепите его к <video/>.

Шаг 4.
Начните воспроизведение:

...
<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 также необходимо выполнить несколько простых шагов:

Шаг 1.
Запустите следующую команду:

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

Шаг 2.
Импортируйте его в JS:

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

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

Исходный код MSE Player Вы можете найти на Github.

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

var player = new FlussonicMsePlayer(element, streamUrl, opts)

Параметры:

element — <video> DOM элемент,
streamUrl — адрес видеопотока,
opts — опции плеера.

Вы можете отслеживать работу MSE Player через Sentry, настроив параметр sentryConfig(string) (см. табл. ниже).
В опциях (opts) плеера можно настроить некоторые параметры, список которых приведён ниже:

Параметры	Тип	Описание
`progressUpdateTime`	целое число (секунды)	интервал времени, через который плеер будет отдавать информацию о проигрываемом времени, т.е. периодичность
`errorsBeforeStop`	целое число	количество ошибок проигрывания, которое будет обработано плеером до полной остановки
`connectionRetries`	целое число	количество попыток переподключения до полной остановки плеера
`preferHQ`	Булево значение	принудительное включение максимально возможного качества видео
`retryMuted`	Булево значение	попытка беззвучного запуска при неудачном запуске со звуком
`maxBufferDelay`	целое число (секунды)	значение максимальной задержки буфера. Если живое воспроизведение отстает от реального времени больше, чем на указанное значение, то лишнее отбрасывается.
`sentryConfig`	строковый	имя источника данных (DSN) от Sentry

Методы:

Ниже приведена таблица с возможными методами:

Метод	Описание
`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>

  </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 — это объект с настройками плеера, куда нужно добавить настройки DVR-мозаики с ключом streamingChannels.

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

Пример конфигурации 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 Player поддерживает новые элементы управления, которые есть в обычных настольных плеерах, такие как пауза, пуск или выключение звука. Элементы управления являются частью MediaElement, который может быть присоединен к плееру как отдельная часть после инициализации.

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

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

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

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

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