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

Contents

MSE Player

Вы можете использовать наш low latency плеер с открытым исходным кодом.

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

Модуль для поддержки MSE можно скачать по адресу: http://flussonic-ip:8080/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)
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>