Watch Party (tech demo)

• 

  Using the app in the simulator to control four other copies of the app

Inspiration

People love watching shows together, even if they're not on the same couch! Aspen pitched an idea for a watch party, where people could use Senza to watch the same thing at the same time.

Aspen will pitch a storyboard, and this is a non-official companion submission that shows a simple demo of how it could work.

What it does

If you open the Watch Party app on several screens (Senza or regular browser), it will synchronize the playback state across all the screens. You can select a video to play, pause or play the video, and jump forward and backward... all the screens will show the same thing.

How we built it

The Watch Party app is a fork of the Program Guide app, with a mix-in of some sample code currently in development for using the MQTT message queue protocol for sending messages between web apps.

Every time the playback state (url, playing/paused, current time) changes in one copy of the app , the app broadcasts a message on a topic. All the instances of the app subscribe to the same topic, and when they receive a message they update their internal state to match the one that changed. It's all peer-to-peer, so anyone can change the state for anybody else.

We're using a hosted MQTT message broker, so we don't have worry about hosting any server resources ourselves. The app works equally well when hosted online or running from localhost in a browser.

Challenges we ran into

There were two issues with infinite loops that had to be resolved. The app that broadcasts a message also receives it, so the app had to be updated so that each instance would ignore its own messages. It could also get into a war where two copies were each telling each other to jump back and forth.

Accomplishments that we're proud of

MQTT is a low-latency protocol so even when looking at screens side by side the playback state is well synchronized. Starting with the existing program guide app and mixing in the message queue code, the number of lines of code that needed to be added were quite minimal.

What we learned

How to avoid infinite loops.

What's next for Watch Party

Combine with Aspen's designs to make a curated social experience, including the ability to invite people to groups and have live chats!

Built With

• javascript
• mqtt