Add TimingObject example

[chrisguttandin]

This PR adds an example which shows how a dash.js player can be connected to a TimingObject.

The example uses three small libraries that implement parts of the Timing Object specification. I used JSPM for now to load those libraries. Please let me know if there is a better way to do this.

The example deliberately disables all the default video controls to make sure they don't interfere with the synchronization. The play and pause buttons are wired up manually.

It might be an option to move this logic into dash.js itself to simplify the process. It could reduce the example to a one-liner in the end.

player.setTimingSrc(timingObject);

I think it would also be possible to implement this as an extension which overrides the play() and pause() methods.

Or we just leave the example as it is to keep things simple. :-)

[dsilhavy]

Thanks @chrisguttandin tried this on my machine and works like a charm

[Murmur]

@chrisguttandin You did a nice dashjs example page thank you. About the TimingObject specs and functionality, how does it actually work? I used two separate browsers and PLAY button indeed goes to the both players.

You import js libs from https://jspm.dev/npm:timing-object, :timing-provider, :timingsrc urls, do they host a public router for messages?
This line const timingObject = new TimingObject(new TimingProvider('V7X4LuPQMgtuspLtLy4i')); I think identifies a message channel to be used? How do you create this identifier and message channel?
Is this global for everyone in the internet, someone somewhere clicks on the play button then video should start on my browser tab as well?

http://reference.dashif.org/dash.js/latest/samples/advanced/timing-object.html

[chrisguttandin]

Hi @Murmur, sorry for the delay.

Your assumptions are correct. The TimingProvider is responsible for synchronizing the so called TimingStateVector from browser to browser. The interface of a TimingProvider is defined in the spec but the implementation is not. That's on purpose to allow different approaches.

The timing-provider library (the one used in the example) creates a WebRTC connection between the browsers. It sends messages over a DataChannel to do the synchronization. But there is of course also a signaling server needed to establish the connections in the first place. And that is what the ID is used for. Every browser connecting with the same ID is part of the same session. That's basically a very long way of answering your last question with "yes". :-)

Please let me know if you have any further questions.