Skip to content

MSE-плеер

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

Почему MSE Player?

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