(Day 9 of 30 Days of Blogging)
Several months ago during the height of the 2020 quarantine I released Popcord, a Chrome extension for watching videos with friends remotely. It’s designed to be used while on voice chat with friends and family, and simply handles synchronizing the playback position and state of the movie you’re all watching together. I’m pretty proud of how it turned out!
Under the hood the system is made up of 3 different pieces: The browser extension, a web application, and a websocket server.
Browser Extension
This is the actual extension downloaded from the Chrome web store. It has code for interacting with
the HTML5 <video> elements on the page, and the minimal UI popup with the button to connect to the
websocket server. It also exposes API hooks to invite links hosted by the web application hosted at
https://popcord.aduros.com.
I’d like to port a version to Firefox someday, but I never got around to it.
Web Application
This is an Express webapp written in node that serves the invite URLs that look like this: https://popcord.aduros.com/invite/h5fryqv2sk?u=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DRRNanbmD1xk. Those pages also contain a bit of JS that talks to the browser extension to prepare the redirect, such as checking for the presence of the extension and prompting for permissions to run on the destination domain (in this example youtube.com).
There’s no database or persistence of any kind, since all the needed state is contained in the invite URLs: Both the final destination URL, and the room token.
Websocket Server
Once the invite link is clicked through, the extension goes to the destination URL and connects to the websocket server using the given room token. The websocket server is just a simple controller that groups up clients by room token and allows them to relay messages to each other. When one client sends a command like “pause the video” the server broadcasts it to all other clients in the same room.
Hosting
Both the webapp and websocket server are deployed as systemd services running on the same EC2 machine that hosts this blog, though they could be separated in the future should the need arise. They both run isolated in firejail sandboxes for security.
Try Popcord the next time you’re away from home or want to watch a movie with friends far away! If you find an issue, please report it on the Github repository or email me.