Development and UX from Michael Mahemoff. Maker of Player FM. Previously: Google, BT, O'Reilly author. Also thesis papers.

Menu

Video Sync with WebSocket and Node

[Update 2015 – This was made on a very early version of NodeJS and may not work anymore; if you are looking for support to run this, please ask on StackOverflow.]

Wanting to explore WebSocket, I made a demo that syncs videos for all users looking at the page (See the Code). Any user can “take control”, so that the other videos will follow the controller’s video. Writing it was a cinch with the Javascript WebSocket API in the client, and the very straightforward Node WebSocket Server powering the server.

Note it’s just a simple demo – there’s no security model here and there’s a very simple sync mechanism: When a “slave” client receives the latest duration, it adds a second to account for lag, and moves the video iff there’s a 5-second discrepancy.

How does a WebSocket client look? Well, it looks a lot simpler than a traditional Comet client. Initiate the connection with “new WebSocket”:

The server is also rather tiny. It mostly just broadcasts (sends to all clients) any incoming message and it’s up to the clients to deal with it. Which is why I say there’s no real security model here.

As you can see in the above snippets, “video” plays an excellent cameo role here, with its equally simple API. One downside, which others have mentioned too, is the lack of styling in the default video controls. It’s great the API supports automatic controls, but it’s unfortunate there’s no CSS manipulation. In this case, the “slave” browsers should be able to see the time, but not have the ability to change the progress. I hope this changes in the future, because the API is otherwise very powerful without compromising simplicity. Until then, libraries will arise to fill the gap.

The demo works in both Chrome and Safari (and they play nice simultaneously).

13 thoughts on Video Sync with WebSocket and Node

Love the idea of collaborating on video editing in real-time using real-time push. I’m working on a real-time push service called Kwwika so I thought I’d take your example and update it to use the Kwwika JavaScript API.

1) the connection events (connection, close) provided by WebSocket are actually really handy. With the Kwwika API we don’t presently to track user connections on a per application basis (we have global users support) so we potentially need to look into that as it is very handy.

2) the video “timeupdate” event fires very frequently so it might be worth an application developer considering sending events for this on a less frequent basis.

3) The video quite frequently was black screening for me although the audio continued to play. Is this due to the video I chose to use or did you also see this?

I’d be interested to get your feedback on the Kwwika API if you have any thoughts.

1) Glad it’s useful. Funny they turned out to be useful as I only added it as an after-thought to demonstrate those calls…but I guess it served its purpose then. WebSocket doesn’t have support in all the browsers yet, but it can degrade nicely to more traditional Comet techniques.
2) Agree – if I was doing a production-ready app, I’d probably just sync the time every 5-10 seconds, as long as the video’s in play mode (and I’d use system clocks to try and account for lag and keep everyone in sync).
3) I didn’t find that, but then I only tested on a single machine.

Node moves fast, so the demo may already be out of date. But it looks like node-websocket-server isn’t installed. At the time I made this demo, NPM was just getting started, so I didn’t use it, but that would probably help now.

I was able to fix this with NPM as you suggested.
Is multiple video syncing possible with this kind of architechture.
or could you suggest some pointers/ways to implement a multiple window multiple video sync scenario.?

G’Day

Welcome to Michael Mahemoff's blog, soapboxing on software and the web since 2004. I'm presently using HTML5 and the web to make podcasts easier to share, play, and discover at Player FM. I've previously worked at Google and Osmosoft, and built the Ajax Patterns wiki and corresponding book, "Ajax Design Patterns" (O'Reilly 2006).
For avoidance of doubt, I'm not a female, nor ever have been to my knowledge. The title of this blog alludes to English As She Is Spoke, a book so profoundly flawed it reminded me of the maturity of the software industry when this blog began in 2004. I believe the industry has become more sophisticated since then, particularly the importance of UX.
Follow @mahemoff