npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@flussonic/flussonic-dvr-player

v24.12.1-11-gd4e0358

Published

Flussonic DVR player

Downloads

936

Readme

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 { DvrUnmount } = DVR;
      if (DvrUnmount) DvrUnmount();
    };
  }, [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)
  • 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)

Methods

  • play() - starts the playback
  • stop() - stops the playback, sets srcObject of <video> to null
  • restartPlayer() - restarts playback
  • changeLanguage(lang) - changes the language