@flussonic/flussonic-dvr-player NPM

flussonic-dvr-player

Flussonic DVR Player is a JavaScript library for playing video archives and live streams. It relies on Flussonic backend.

Installation

Install flussonic-dvr-player from NPM by running the command:

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

or using Yarn:

yarn add @flussonic/flussonic-dvr-player

Usage

You can use the DVR Player as a React component:

import DvrPlayer from '@flussonic/flussonic-dvr-player';
import '@flussonic/flussonic-dvr-player/dist/fonts/font.css';

export const DVRPlayer = ({ options }) => {
  const player = useRef(null);

  useEffect(() => {
    const DVR = DvrPlayer.load(options, player.current);

    return function cleanup() {
      const { DvrInstance } = DVR;
      if (DvrInstance) {
        const instance = DvrInstance();
        if (instance) {
          instance.props.close();
        }
      }
    };
  }, [options]);

  return <div id="dvr-player" ref={player} style={{ height: '100%' }} />;
};

or use it with a script tag:

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@flussonic/flussonic-dvr-player/dist/fonts/font.css">
  <script src="https://cdn.jsdelivr.net/npm/@flussonic/flussonic-dvr-player/dist/FlussonicDvrPlayer.js"></script>
</head>
<body>
  <div id="dvr-player"></div>
  <script type="text/javascript">
    const options = {
      name: 'YOUR_STREAM_NAME', // replace it with your stream name
      streamer_http: window.location.protocol + '//' + window.location.host,
      query: window.location.search.replace(/^\?/, ''),
    };
    const player = document.getElementById('dvr-player');
    window.onload = function () {
      window.FlussonicDvrPlayer = FlussonicDvrPlayer.default.load(options, player);
    };
  </script>
</body>

Where:

player - HTML container for the player

options - a plain object, that can include:

required:

name - stream name
streamer_http - the streamer's URL

additional:

tokenName - custom token name (token by default)
token - authorization token
streamer_rtmp - the stream's rtmp URL
autoPlay - enable autoplay (true|false)
fixedRange - locks the timeline on a current episode (true|false)
proto - playback type for a live (mse | hls), mse by default
from - start time of playback (utc in sec)
to - stop time of playback (utc in sec)
play_duration - stops playback after some playback duration (sec)
thumbnails_enabled - enable/disable thumbnails (true|false)
locale - player locale (ru | en)
zoom - initial zoom for the timeline (sec)
debug - debug mode (true|false)
tracks - starting tracks for the live playback (string, example: v2a1)
timeLineElement - external HTML container for the timeline
onMediaInfo(data) - callback for getting media info data object
onEvent(name, data?) - callback for player events, returns the event name and the possible data about it
panzoom - zoom for video element (true|false)
noMenu - render timeline menu element (true|false)
centeredSeek - timeline seek with auto-centering (true|false)
motionUrl - url for motion events
enableMp4Download - enable/disable download video segments (true|false)
statsSendEnable - enable sending stats (true|false)
statsSendTime - stats data sending interval (sec)
localtime - use local user time (true|false)
export_limit - export episode selection time limit (sec)
start_track - adaptive track selection (lowest | best)
dvr - dvr mode (true|false)
enoughBufferTime - enough buffer time to disable a loading indicator (sec)

mosaic play mode:

streams - an array of stream names for mosaic
multiTimeline - enable split timeline mode (true|false)
streamingChannels - a plain object, that can include:
- renderTitles - show titles of streams (true|false)
- streams - an array of objects, that can include:
  - subName - name of the stream
  - address - stream may have its own address on the other Flussonic server
  - main - should be selected first (true|false)
  - auth_token - token name with a token (token=${token})
  - order - order of the playback window (number)