Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TimingObject example #4064

Merged
merged 2 commits into from
Oct 18, 2022
Merged

Add TimingObject example #4064

merged 2 commits into from
Oct 18, 2022

Conversation

chrisguttandin
Copy link
Contributor

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 dsilhavy added this to the 4.5.1 milestone Oct 10, 2022
@dsilhavy
Copy link
Collaborator

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

@dsilhavy dsilhavy merged commit f588e59 into Dash-Industry-Forum:development Oct 18, 2022
@chrisguttandin chrisguttandin deleted the add-timing-object-example branch October 25, 2022 10:16
@Murmur
Copy link

Murmur commented Nov 15, 2022

@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
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants