Flussonic Media Server documentation

Contents

MSE Player

You can use our open-source low latency player in your app.

Quick start without NPM

You can get the module for support of MSE LD player at http://flussonic-ip:8080/flu/assets/FlussonicMsePlayer.js

First, add the script to your HTML file:

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

Second, initialize the player, attach it to a <video/> element and then 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>
...

Installing with NPM and webpack

Run:

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

Then import it into JS:

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

Sample app with webpack and our MSE player.

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

The FlussonicMsePlayer class

var player = new FlussonicMsePlayer(element, streamUrl)

element — <video> a DOM element.

streamUrl — the 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 when metadata of the stream is available. The metadata includes 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 includes three video tracks: v1(800k), v2(400k), v3(200k) and two audio tracks: a1(32k), a2(16k).

To set default tracks to v2 and a1, use the tracks URL parameter 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 tracks for playback, 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) =&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>