flussonic/mse-player

HTML5 zero latency player for Flussonic

flussonic-mse-player

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

Installation

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

Usage

Webpack:

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

example

Script tag:

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

Static Methods:

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

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

Construction:

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.

• connectionRetries?: number - number of reconnection retries if player can't start playback.

• wsReconnect?: boolean - trying to restart websocket connection on error closing.

• preferHQ?: boolean - if true, player will automatically select the highest available quality of the stream.

• retryMuted?: boolean - if true, in some cases, due to "Browser Autoplay Policy Changes" it will try to restart playing process with initialy muted video element.

• maxBufferDelay?: number - maxBufferDelay option for sourceBuffer

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

• onDisconnect(status: object) - triggered on websocket connection lost.

• onError(error: object) - triggered on player errors.

• onEvent(event: object) - triggered on player events.

• onMuted() - triggered on player set muted.

• onPause() - triggered on player set paused.

• onResume() - triggered on player gets resumed from pause.

• onStats(stats: object) - triggered on player stats change. Stats include a common ststistics of the stream: endTime, currentTime, videoBuffer, audioBuffer, timestamp, readyState, networkState.

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

Methods:

• play(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

• restart() - perform a full restart of playing process

• autoTrackSelection(preferBest: boolean) => tracks: Array - if true - returns array with the tracks of highest available quality. If false - returns array with the tracks of the lowest available quality.

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

• setTracks(tracks: Array) -

Types:

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'

TODO

CHANGELOG

mse-player's Issues

Websocket Reconnect model is not working?

Sometimes websocket connection will be broken.
But in this situation player stopped
Please help me
Best regards

Return to nowhere. Autoplay exception bubbling is broken.

mse-player/src/modules/MsePlayer.external.js

Line 320 in b6993c5

return this.playPromise

Return from Promise executor has no effect.

@types and typescript support?

Are typescript support planned? (Планируется ли поддержка typescript из коробки? Очень не хватает)

Uncaught (in promise) DOMException - bad video perfomance

I followed the documentation.

The play() method call leads to an error Uncaught (in promise) DOMException in latest Chrome browser (explanation).

Seem to be Chrome browser does not use hardware acceleration in this case.
With this violation video is played but skipped frames and lags (about 0.5-1 frame per second).

Quick solution: add muted attribute to <video>

it would be nice to designate this in the example in the documentation, so that users would not have a negative first experience.

Error Playing websocket

Please look at this image.
I just got this error.
Please help me

Problem with with opening mse players sametime at many browsers

I have many video players (mse-player) which are using flussonic - so i have 9 mse-players launched at the same time in Fullscreen.

So problem that i have 4 monitors. In each one i open many mse-players in 4 monitors.

When i open first browser and after it, i start to open one more - some players don't open properly. Instead of player i see black window without anything playing within.

I see in a console error that it refers to (https://developers.google.com/web/updates/2017/06/play-request-was-interrupted) and i think it can depend on window.blur and window.focus.

What i've already tried:

1)But unfortunately this article (https://developers.google.com/web/updates/2017/06/play-request-was-interrupted) didn't help me at all

2. I tried to launch this.play() in onPause listener

Stop method doesn't close websocket connection

When we have some trouble with connection to flussonic (when server reboots or something else), player continues to try to recconent socket event after call stop method and destroy player.

Fullscreen feature

Hi, it'd be nice if we could request a fullscreen mode via the mse-player API. Could you please add this feature to the player API?

High memory usage in browser

When playing a stream the memory usage keeps rising until it settles down after a few hours.
For a single stream, the memory usage was around 440mb.
For 5 streams, it grew to 1.35Gb.
For comparison, playing 50 HLS streams with HLS.JS player took up 1.7Gb of memory.

Environment:

• Browser: Chrome 73 (Linux; x64)
• Flussonic: 18.09.1
• MSE-player: 19.2.8
• Tested on a 100 kbit low-res stream

Intent:
Implement real-time mosaic player in a browser

how to get the MSE low latency work?

well,i'm trying to find out how to use MSE api to play some living steams with very low latency!
You guys can share any ideas? your sharing would be particularly great to guid me doing this,^_^

has any plan to support h265？