flussonic-mse-player is a JavaScript library for playing video relies on flussonic backend, HTML5 video and MediaSource Extensions

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

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

example

Since the library include via script tag it is accesible at window.FlussonicMsePlayer

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

var FlussonicMsePlayer = window.FlussonicMsePlayer
var player = new FlussonicMsePlayer(element, url, opts)

example

• isSupported() - return true if browser is supported Media Source Extension

• replaceHttpByWS(url: string) - return new url where replaced http(s):// by ws(s)://

const player = new FlussonicMsePlayer(element, url, opts)

element -

url - url of a stream

opts is plain object it can include methods:

• debug?: boolean - if true then enable logs in browser console. And export methods humanTime, humanDate to window.

• progressUpdateTime?: number - time period for invoking onProgress.

• onProgress(utc: number) - triggered every 100ms(progressUpdateTime) while a stream is playing and gives current playback time

• onMediaInfo(info: MediaInfo) - triggered when 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.

• onSeeked() - triggered when process of seeking is finished

• onStartStalling() - triggered when playing is stalled

• onEndStalling() - triggered when the video tag is progressed(start playing). onStartStalling()/onEndStalling() useful callback for implementation loading-spinner.

• •••DEPRECATED••• bufferMode: 'segments'|'sequence' - SourceBuffer Object Append Mode. Default value is 'sequence'.

• errorsBeforeStop: number - Amount of errors will be happened before invoke the stop() method.

• play(from?: UtcOrLive, videoTrack?: Track, audioTrack?: Track) => Promise - start playing.

  Return a Promise. Resolved if HTMLMediaElement.play() resolved(HTMLMediaElement.play() Returns a Promise). Overwise rejected with error message.

  if you do autoplay="true" muted="false" video. The play will be rejected(Autoplay Policy Changes)

  For resolve this behaviour you can mute the video before playing. Or you can process play's rejection and show play button.

• pause() - send pause command by websocket

• stop() - close websocket connection; detach mediaSource from given HTMLMediaElement; invoke the HTMLMediaElement stop method

• seek(utc: number) - send seek command by websocket

• setTracks(tracks: Array) -

type MediaInfo = {
  height: number,
  width: number,
  streams: Array<StreamInfo>,
  activeStreams: ActiveStreams,
}

type StreamInfo = {
  bitrate: number,
  codec: string,
  content: string,
  fps: number,
  height: number,
  length_size: number,
  level: string,
  pixel_height: number,
  pixel_width: number,
  profile: "Baseline",
  sar_height: number,
  sar_width: number,
  size: string,
  track_id: TrackId,
  width: number
}

type ActiveStreams = {
  video: TrackId,
  audio: TrackId,
}

type TrackId = 'a1'|'a2'|'a3'| ... 'aN'|'v1'|'v2'|'v3'| ... 'vN'

type UtcOrLive = number | 'live'