Flussonic Media Server documentation

MSE Player

You can use low latency player in your app.

Quick start without NPM

You can get it at http://flussonic-ip:8080/flu/assets/FlussonicMsePlayer.js

— First, you should add the script to your HTML file:

<script type="text/javascript" src="/flu/assets/FlussonicMsePlayer.js"></script>

— Futher, create the player, attach to a <video/> element and after start playing:

...
<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>
...

Install with NPM and webpack

Run:

npm install --save @flussonic/flussonic-mse-player

and import it in JS:

import FlussonicMsePlayer from '@flussonic/flussonic-mse-player'
...
const player = new FlussonicMsePlayer(element, url, opts)

Example application with webpack and our MSE player.

You can find source code of MSE player on github: flussonic/mse-player

FlussonicMsePlayer

var player = new FlussonicMsePlayer(element, streamUrl)

element<video> a DOM element.

streamUrl — url of a stream.

Methods:

play() start playing

stop() stop playing

setTracks([videoTrackId, audioTrackId]) set up video and audio tracks for playback

getVideoTracks() return available video tracks(you should use it into onMediaInfo callback method)

getAudioTracks() return available audio tracks(you should use it into onMediaInfo callback method)

Event Callbacks

onProgress(currentTime) - triggered every 100ms while a stream is playing and gives current playback time.

onMediaInfo(metadata) - triggered then metadata of the stream is available. metadata include a common information of the stream such as width, height, information about mbr streams and so on. After this callback triggered you can use getVideoTracks()/getAudioTracks() methods.

Using Mutli Bitrate Tracks

For example, there is a video stream that include three video tracks: v1(800k), v2(400k), v3(200k) and two audio: a1(32k), a2(16k).

To set default tracks you can use tracks url param with track names.

'ws://flussonic-ip/stream_name/mse_ld?tracks=v2a1'

and pass the url to the player constructor.

You can get all available video/audio tracks.

  • inside onMediaInfo(metadata) callback, by parsing metadata:
{
  width: ...,
  height: ...,
  streams: [
    {
      track_id: "v1", bitrate: ..., codec: ..., content: "video", fps: ..., ...
      ...

      track_id: "a1", bitrate: ..., codec: ..., content: "audio", fps: ..., ...  
    }
  ]
}

— inside onMediaInfo(metadata) by calling getVideoTracks()/getAudioTracks() methods.

To set needed tracks for playback you should use setTracks([videoTrackId, audioTrackId]) method.

Complete Example

<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>