Flussonic Media Server documentation

Содержание

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) =&gt; {
      var videoTracks = window.player.getVideoTracks()
      var audioTracks = window.player.getAudioTracks()
      var videoOptions = videoTracks.map((v, i) =&gt; (
        `&lt;option value="${v['track_id']}"&gt;${v['bitrate']} ${v['codec']} ${v['fps']} ${v['width']}x${v['height']}&lt;/option&gt;`
      ))

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

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

      mbrControls.style.display = 'block'
    }

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

      window.player.setTracks([videoTrackId, audioTrackId])
    }
  }

</script> </body> </html>