videojs-mse-over-clspdeprecated

Uses clsp (iot) as a video distribution system, video is is received via the clsp client then rendered using the media source extensions.

Usage no npm install needed!

<script type="module">
  import videojsMseOverClsp from 'https://cdn.skypack.dev/videojs-mse-over-clsp';
</script>

README

videojs-mse-over-clsp

A videojs plugin that adds support for video served over the clsp protocol. Currently, this protocol is available only via Skyline SFS solutions.

Note - this plugin currently only works in Chrome. Note - this highest keyframe/iframe segment frequency this plugin currently supports is 2 per second.

The new network protocol is handled by specifying the following URI format:

clsp:// sfs-ip-address : port-number-of-web-socket / stream-id

  • the ip address is that of the SFS
  • the web socket port is 9001
  • the stream name as defined on the SFS

On the HTML video tag, the type attribute must be the following:

video/mp4; codecs='avc1.42E01E'

This tells the browser exactly what codec to use to decode and play the video. H.264 baseline 3.0 is a least common denominator codec supported on all browsers (according to the MSE development page).

Table of Contents

Requirements

Browsers

Chrome 52+ is required to run this videojs extension. All other browsers are currently not supported.

Dependencies

@babel/polyfill 7.2.5 is required.

video.js 7.4.1 is the recommended version. Version 6.x is not recommended due to it being less performant over time.

If using videojs-errors, which is recommended, 4.2.0 is the recommended version, as it allows us to re-register successive errors to respond to successfive failures as necessary to support stream recovery.

Development Environment

Node 10.15.x is required to run the necessary build and development scripts.

One option for installing node in a development environment is to use the node version manager "n". If you're using Windows, you can get an installer from Node's website.

Vagrant

  1. cp scripts/deploy/Vagrantfile ..
  2. vagrant destroy -f && vagrant up && vagrant ssh
  3. cd /vagrant/clsp-videojs-plugin
  4. rm -rf node_modules
  5. sudo scripts/deploy/provision-bootstrap.sh
  6. yarn install
  7. yarn run serve:vagrant
  8. http://5.5.5.4:8080

Installation

git clone https://github.com/skylineos/clsp-videojs-plugin.git
cd clsp-videojs-plugin
yarn install

Build

Note: If you ae installing on ubuntu the package for nodejs is way out of date, you will need to follow the instructions here to upgrade node: https://github.com/tj/n

After making changes to the plugin, build the project to generate a distributable, standalone file:

yarn run build

The generated files will be available in the dist directory.

Run test server

  1. yarn run serve
  2. navigate to http://localhost:8080 in Chrome
  3. add a clsp url to any of the inputs, then click submit
  4. click play on the video element (if not using an autoplay player)

Usage

To include videojs-mse-over-clsp on your website or web application, use any of the following methods.

<style> Tag

In the <head> of your page, include a line for the videojs and the clsp plugin styles:

<head>
  <link
    rel="stylesheet"
    href="//vjs.zencdn.net/7.4.1/video-js.min.css"
  >
  <link
    rel="stylesheet"
    href="../dist/videojs-mse-over-clsp.css"
  >
  <script
    type="text/javascript"
    src="//cdn.jsdelivr.net/npm/@babel/polyfill@7.2.5/dist/polyfill.min.js"
  ></script>
<head>

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include [video.js][videojs], so that the videojs global is available.

See dist/simple.html for an example.

<video
  id="my-video"
  width="352"
  height="240"
  class="video-js vjs-default-skin"
  controls
>
  <!-- standard streaming over TCP port 9001 -->
  <source
    src="clsp://<SFS IP address>:9001/<stream name>"
    type="video/mp4; codecs='avc1.42E01E'"
  />

  <!-- or for secure clsp -->
  <source
    src="clsps://<SFS IP address>[:443]/<stream name>"
    type="video/mp4; codecs='avc1.42E01E'"
  />
</video>

<script src="//vjs.zencdn.net/7.4.1/video.min.js"></script>
<script src="../dist/videojs-mse-over-clsp.min.js"></script>

<script>
  var player = videojs('my-video');

  player.clsp();
</script>

Webpack

When using with Webpack, you will need to register the global videojs in your webpack config file:

{
  // ...
  alias: {
    'video.js

: path.resolve(__dirname, 'node_modules', 'video.js'),
  }
}

In your code, you will need to set videojs on the window prior to requiring this plugin:

import '@babel/polyfill';
import videojs from 'video.js';

window.videojs = videojs;

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-mse-over-clsp');

const player = videojs('my-video');

player.clsp();

Browserify/CommonJS

When using with Browserify, install videojs-mse-over-clsp via yarn or npm and require the plugin as you would any other module.

require('@babel/polyfill');

const videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-mse-over-clsp');

var player = videojs('my-video');

player.clsp();

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(['video.js', '@babel/polyfill', 'videojs-mse-over-clsp'], function(videojs) {
  var player = videojs('my-video');

  player.clsp();
});

License

See the LICENSE file at the root of this repository.

@todos

  • implement linter
  • create dispose methods for all classes
  • make iov initialize execute once, and by default
  • create demo for failover
  • minify css
  • hot reload?
  • hash in filenames via webpack?

From 0.14

  • minify conduit
  • decouple mqtt conduit logic
  • decouple the MSE abstraction by creating separate mediasource and sourcebuffer abstractions
  • file / class restructure
  • decrease coupling between classes
  • decrease coupling between videojs and iovPlayer
  • improve metrics
  • improve memory management
  • implement destroy method for all classes
  • fix destroy logic
  • improve error handling