@istreamplanet/myriapod.js
v1.0.2
Published
Myriapod JavaScript Client
Downloads
7
Keywords
Readme
Myriapod Javascript Client
Javascript client for playing back Myriapod streams. The following complete example shows how easy it is to use:
<html>
<head>
<!-- Include transpiled myriapod.js somehow, e.g. via webpack -->
<script src="myriapod.min.js"></script>
</head>
<body>
<video id="vid" autoplay></video>
<script>
// Get the video element from above.
var video = document.querySelector('#vid');
// Create a Myriapod instance for a given video ID and set up handlers.
var myriapod = new Myriapod(video, 'SERVER:PORT/video/ID', {
additional: 'server preflight data'
});
myriapod.on('error', function(err) {
// Print any errors to the Javascript console for debugging.
console.log(err);
});
</script>
</body>
</html>Architecture
The client creates a persistent WebSocket connection to the backend. If the connection is successful it waits for control messages and media data blobs. Control messages tell it how to create media source elements which are used to feed the data blobs into the associated HTML <video> element.
New dynamic media source URLs are created as needed when streams change or are restarted. These URLs should be set on the video element like in the example above.
/- Text control messages -> Create media source
WebSocket -<
\- Binary blob messages -> Load into media source (buffer)Clients will automatically reconnect when the WebSocket connection is lost.
Usage
npm install --save @istreamplanet/myriapod.jsRunning tests
To run tests, execute the following command:
$ npm testReference
Constructor
Myriapod([video], [url], [preflightMetadata])
Create a new Myriapod instance. Takes an optional HTML video element, optional playback URL without the protocol and optional data to send to the server when the connection is first opened.
// Get the video element:
const video = document.querySelector('#my-video');
const url = 'host:port/video/id';
const preflightMetadata = {
identity: 'identity',
token: 'token'
};
// Create and play back a stream:
let mp = new Myriapod(video, url, preflightMetadata);
// Create but call `play` separately. It is safe to call `play`
// multiple times:
mp = new Myriapod(video, null, preflightMetadata);
mp.play(url, preflightMetadata);
// Or, manage everything yourself if you want:
mp = new Myriapod();
mp.on('source', src => {
video.src = src;
})
mp.on('buffer-updated', (source, buffer, start, end) => {
// Seek into the buffer if playback falls behind.
if (video.currentTime < start) {
video.currentTime = start
}
})
mp.on('error', err => {
console.log(err);
mp.destroy();
mp = null;
})
video.addEventListener('canplay', () => {
video.play();
})Instance Properties
myriapod.source
The MediaSource for the current stream.
myriapod.buffer
The SourceBuffer attached to the MediaSource above.
myriapod.ws
The WebSocket connection to the server that is used to read control messages and video stream data.
Instance Methods
myriapod.on(name, handler)
Register a new event handler.
myriapod.on('error', err => {
console.log(`Error playing back! ${err}`);
})myriapod.play(url, preflightMetadata)
Start playback of a new video URL (without the protocol).
myriapod.play('host:port/video/id', {token: 'token'});myriapod.destroy()
Destroy and clean up the player. It is not safe to use the instance after destroy has been called.
myriapod.destroy();Events
The following events are available for attaching a listener:
Event | Arguments | Description
----- | --------- | -----------
buffer-updated | source, buffer, start, end | The media source buffer has been updated.
error | err | An error occurred.
destroyed | n/a | Myriapod instance has cleaned up and is ready to be garbage collected.
source | source | A new source is ready and can be attached to an HTML <video> element's src attribute.