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

Содержание

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>

Синхронный просмотр нескольких DVR архивов

Flussonic позволяет просматривать несколько DVR архивов одновременно и, что ещё важнее, перемещаться внутри всех архивов синхронно.

Для проигрывания нескольких DVR во Flussonic MSE player нужно сформировать поток, который состоит из нескольких потоков, у которых есть DVR. Пользователи смогут видеть все потоки сразу в виде мозаики и перемещаться внутри всех архивов синхронно.

При инициализации плеера добавьте переменную config:

this.player = new FlussonicMsePlayer(this._videoElement, url, config);

Переменная config - это объект с настройками плеера. Туда с ключом streamingChannels нужно добавить настройки DVR-мозаики.

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

Пример конфигурации 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
        },
            // и т.д.
    ]
}

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

С помощью опции onStats, которую следует передавать с параметром config, возвращается объект, содержащий статистику по буферам плеера и время получения статистики.