This module wraps an instance of hls.js to bootstrap it with the Streamroot P2P module.
It provides a bundle that extends the hls.js constructor to create a fully configured player which will use the Streamroot P2P module, giving you the exact same API.
You can integrate this bundle with minimal changes in your application (you only need to add an additional argument to the hls.js constructor). The bundled version of hls.js is v0.8.2.
It also provides a wrapper that allows you to create/configure a player with a specific version of hls.js.
Supported versions of hls.js: from v0.6.21 to v0.8.2.
The latest pre-built version is available at: https://cdn.streamroot.io/hlsjs-p2p-wrapper/stable/hlsjs-p2p-wrapper.js
You can install the artifacts distributed as NPM modules:
For the wrapper with hls.js included:
npm install streamroot-hlsjs-p2p-bundle
For the wrapper without hls.js:
npm install streamroot-hlsjs-p2p-wrapper
In your application import/require the package you want to use as in the example like
import StreamrootHlsjsP2PBundle from 'streamroot-hlsjs-p2p-bundle';or
import StreamrootHlsjsP2PWrapper from 'streamroot-hlsjs-p2p-wrapper';First of all, make sure you are using Node.js version >= 6.0.0
Since the installation uses a Ruby script, you need Ruby to be installed on your machine. On most Linux distros and on macOS, it's installed by default.
Finally, one of the install steps assumes the presence of wget on your system. Again this is most likely installed on all Unix based systems. If you have a Mac, you could use Homebrew and then run brew install wget.
For Windows users, you can build using either Windows Subsystem for Linux or Cygwin, which provides wget, Ruby and a Unix-like environment.
Webpack is used for building, so make sure that you have webpack installed in your global node binaries otherwise install it like this:
sudo npm install -g webpack
git clone https://github.com/streamroot/hlsjs-p2p-wrapper.git
npm install
Run this task to build it:
npm run build:bundle
Now you can include dist/bundle/hlsjs-p2p-bundle.js in your application.
To build and compile-watch development/debug version use:
npm run build:bundle_dev
Run this task to build it:
npm run build:wrapper
Now you can include dist/wrapper/hlsjs-p2p-wrapper.js in your application.
To build and compile-watch development/debug version use:
npm run build:wrapper_dev
For running unit tests (in node.js), use
npm test
For integration tests (Running in PhantomJS/Chrome browsers via Karma through Mocha plugin), use
npm run karma
IMPORTANT: Set export NODE_ENV=development in your shell to make sure Karma will use all your local browser capabilities when in dev mode.
For integration tests in dev mode (Mocha suite running in your favorite browser, better for debugging):
- Start dev server:
npm start
- Start compile&watch process (in another shell):
npm run karma_dev
Include the bundle build in your app.
<head>
<!-- path to hlsjs-p2p-bundle build -->
<script src="hlsjs-p2p-bundle.js"></script>
</head>Create hls.js instance passing hlsjsConfig and p2pConfig as constructor params.
var hlsjsConfig = {
debug: true,
maxBufferSize: 0, // Highly recommended setting
maxBufferLength: 30, // Highly recommended setting
liveSyncDuration: 30 // Highly recommended setting
};
var p2pConfig = {
streamrootKey: YOUR_STREAMROOT_KEY_HERE
// Other p2pConfig options if applicable
};
// Hls constructor is overriden by included bundle
var hls = new Hls(hlsjsConfig, p2pConfig);
// Use `hls` just like your usual hls.js ...Include the wrapper build and hls.js build in your app.
<head>
<!-- path to hlsjs-p2p-wrapper build -->
<script src="hlsjs-p2p-wrapper.js"></script>
<!-- hls.js build of your choice -->
<script src="hls.js"></script>
</head>Create hls.js instance passsing hlsjsConfig as param.
Create hls.js wrapper instance passing p2pConfig and hls.js instance as params. Call hls.js loadSource and attachMedia methods.
Please note that you can intialize the wrapper any time after hls.js is initialized, even after calling hls.attachSource or hls.attachMedia, and even if the playback has started already. This late p2p init option is possible only with wrapper, bundle does not support this feature.
var hlsjsConfig = {
debug: true,
maxBufferSize: 0, // Highly recommended setting
maxBufferLength: 30, // Highly recommended setting
liveSyncDuration: 30 // Highly recommended setting
};
var p2pConfig = {
streamrootKey: YOUR_STREAMROOT_KEY_HERE
// Other p2pConfig options if applicable
};
var hls = new Hls(hlsjsConfig);
var wrapper = new HlsjsP2PWrapper(p2pConfig, hls);
// Use `hls` just like your usual hls.js…
hls.loadSource(contentUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});To see full sample code and extended possibilities of how to use this module, take a look at the code in the example directory.
Specify your streamrootKey in the p2pConfig object. If you don't have it, go to Streamroot's dashboard and sign up. It's free. You can check other p2pConfig options in the documentation.
Recommended hlsjsConfig settings:
var hlsjsConfig = {
maxBufferSize: 0, // Highly recommended setting
maxBufferLength: 30, // Highly recommended setting
liveSyncDuration: 30 // Highly recommended setting
};Detailed recommendations about hls.js configuration here.
Not available yet.
A peerAgent public API is exposed on a HlsjsP2PWrapper instance -- wrapper.peerAgent.
List of peerAgent's public API getters/setters is documented here https://streamroot.readme.io/reference#peer-agent-class-reference.
To build and run the shipped hls.js and Streamroot demos run:
npm run demo
This will start a server.
Go to http://localhost:8080/example for the Streamroot demo.
Go to http://localhost:8080/demo-hls.js for the hls.js demo.
To see some p2p traffic open several browser tabs/windows playing the same manifest (so there will be peers to exchange p2p traffic).
The public API documentation is generated from the code.
After clonig the repo run:
npm run docs
The module is integrated in the following players: