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

@ceeblue/videojs-plugins

v1.1.0

Published

Videojs set of plugins for playing streams from the Ceeblue cloud

Downloads

53

Readme

videojs-plugins

npm

Set of Videojs plugins for playing streams from the Ceeblue cloud.

This plugin contains:

Table of Contents

Installation

Download the package from @ceeblue/videojs-plugins or build it manually from the github sources:

npm install
npm run build

Include @ceeblue/videojs-plugins in your HTML code as usual with the link to Videojs and this library.

Example:

<script src="https://vjs.zencdn.net/8.7.0/video.min.js"></script>
<script src="./dist/videojs-plugins.js"></script>

WebRTCSource

Parameters

src

The src field contains the URL of the WebRTC endpoint.

The protocol can be WebSocket (wss) to get the best of the custom Ceeblue signaling or HTTP (https) to use the standard WHEP signaling protocol.

Here is the expected format:

[wss|https]://<host>[/<pathname>]/<streamName>[?id=<accessToken>][&audio=<audioTrackId>][&video=<videoTrackId>]

And here is an example of a WebSocket URL:

wss://la-8.live.ceeblue.tv/as+12346f7c-e5db-450b-9603-c3644274779b

The following options can be set in the query:

  • id The access token in case the stream is private.
  • audio the audio track ID or none to disable audio.
  • video the video track ID or none to disable video.

type

It is important for the MIME-type to be empty to use the WebRTC source.

iceserver

Ice-server structure in JSON string format with TURN URL used to establish the WebRTC connection, mainly for TCP fallback.

Do not enclose the object in an array. If you have multiple TURN servers, you can add them in the urls array. If not set, the plugin will use the default TURN server

Example:

Replace <host> by your endpoint hostname

{
  "urls": ["turn:<host>?transport=tcp", "turn:<host>:3478"],
  "username": "csc_demo",
  "credential": "UtrAFClFFO"
}

audiobutton

false to disable the WebRTC audio track selection button, true by default.

data

true to listen to all timed metadata tracks, false otherwise. true by default.

This has no effect on the player, to get the timed metadata in your application you need to use the textTracks() API of Videojs, you can check examples/player.html for a usage example.

Source Object

Call the player.src() method with a WebRTC URL.

Example:

Replace <host> by your endpoint hostname and <streamName> by your stream name.

<script type="module">
  import {} from "/path/to/video.min.js";
  import {} from "/path/to/ceeblue/videojs-plugins.min.js";
  ...
  const player = videojs('video-tag');
  player.src({
    src: 'wss://<host>/<streamName>',
    iceserver: '{
      "urls": ["turn:<host>?transport=tcp", "turn:<host>:3478"],
      "username": "csc_demo",
      "credential": "UtrAFClFFO"
    }',
    audiobutton: true,
    data: false
  });
  player.start();
</script>

<source> HTML tag

The WebRTC source can be set directly in the HTML Source tag.

Example:

Replace <host> by your endpoint hostname and <streamName> by your stream name.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/ceeblue/videojs-plugins.min.js"></script>

<div id="video_container">
    <video id=video-player width=960 height=540 class="video-js vjs-default-skin" controls>
        <source src="wss://<host>/webrtc/<streamName>" 
            iceserver='{"urls": ["turn:<host>?transport=tcp", "turn:<host>:3478"], "username": "csc_demo", "credential": "UtrAFClFFO"}'>
    </video>
</div>
<script>
  var player = videojs('video-player');
</script>

QualityButton

If you are not using the SourceController, the QualityButton plugin can be called with a simple command to create the video menu button using the qualityLevels of the current source (see videojs-contrib-quality-levels):

<script>
  var player = videojs('video-player');
  player.qualityButton();
</script>

SourceController

The SourceController allows you to configure fallback sources if the current source is not working (for example, if WebRTC is not supported in the browser). It is also used for seamlessly switching from one source to the other.

The constructor of SourceController takes three arguments :

  • The videojs player,
  • The Connect.Params, the ceeblue connection parameters (see Connect class),
  • The list of sources in order of priority. A source can be a string from the SourceType list or a Source Object in order to set custom options.

To start the SourceController call the start() function with the SourceType to start with, or no argument to start from the first source.

The SourceType object in SourceController.js defines the list of possible sources, The Source object must have the src field and the type field set to the MIME type of the source (empty for WebRTC, see WebRTCSource).

Example:

Replace <endPoint> by your endPoint, host by the endPoint hostname and <streamName> by your stream name.

  const sourceController = new SourceController(
    player
  );
  sourceController.on('sourcechanged', (source) => {
    console.log('sourcechanged', source); // null means no more sources available
  });
  sourceController.start(
    {
      endPoint: '<endPoint>',
      streamName: '<streamName>'
      query: 'id=<accessToken>'
    }, 
    [
      {
        // A WebRTC source with custom options
        src: 'wss://<host>/<streamName>',
        iceserver: '{"urls": ["turn:<host>?transport=tcp", "turn:<host>:3478"], "username": "csc_demo", "credential": "UtrAFClFFO"}',
      },
      'llhls',
      'dash',
      {
        // A fallback source with a custom type
        src: 'http://vjs.zencdn.net/v/oceans.mp4',
        type: 'video/mp4'
      }
    ]);

Disabling QualityButton

By default the SourceController creates a QualityButton for the current source but you can disable it in the player's options with the qualityButton option:

const player = videojs(videoEl, { qualityButton: false});

Examples

Examples can be found in the examples/ directory:

  • player.html An advanced example using WebRTC, the SourceController, and the QualityButton, with a UI for setting parameters and displaying timed metadata.
  • simple-player.html A simple example using SourceController with default parameters.
  • webrtc-player.html A simple example with a WebRTC source configured with the HTML <source> tag.

All examples include the HTML code to include the library and player, and the JavaScript code to configure the player. You can add query parameters to the URL to test the different options.

For example:

Replace <host> with your endpoint host name, <streamName> with your stream name, and <accessToken> with the viewer access token provided by the Ceeblue Cloud API (optional, only if the stream is private).

https://localhost:8080/examples/player.html?host=<host>&stream=<streamName>&accessToken=<accessToken>

Documentation

This monorepo also contains built-in documentation about the APIs in the library, which can be built using the following npm command:

npm run docs

Open the index.html file in the docs folder with your browser to access the documentation. (./docs/api/index.html).

Contribution

All contributions are welcome. Please see our contribution guide for details.

License

By contributing code to this project, you agree to license your contribution under the GNU Affero General Public License.