MSE-плеер¶

Здесь мы расскажем, как использовать наш MSE-плеер с открытым исходным кодом в Вашем 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.

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

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

Для установки с помощью 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>

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

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