moe-relay

Synchronize various clients to some streaming services, such as YouTube or twist.moe.

First, make sure you and your buddies are at the same URL.

Open up the developer console. In Chrome, you can do this by pressing Control + Shift + J, or Command + Shift + J on Mac.

Copy the following code and paste it into the developer console. Note: Injecting a script like this isn't safe at all. Only do this if you 100% trust me. You can look at the script.

import("https://moe-relay.glitch.me/client.js")

If everything worked correctly, a blue outline should appear around the screen. (If something went wrong, it'll be red.) Once you and your friends all join, press play. The video will play as fast as the slowest person, and everyone is guaranteed to stay within a few seconds of each other.

FAQ

This script doesn't look very safe...

Trust me, the script is safe, but the way it's injected isn't safe at all. Randomly trusting a script like this could lead to a Self-XSS attack. But just believe me when I say I don't steal your cookies or anything. I strongly encourage you to read the original TypeScript and compiled JavaScript.
What if one of my friends has shitty internet?

That's fine, if your friend begins to buffer, everyone else will pause until your friend has enough of the video loaded to continue playing. You'll never go out of sync.
What if my friends’ ping is very high? What if one of my friends plays the video at 2x speed or something?

If the times of two videos drift too far apart, the client that's ahead will jump to match the client that's behind.
The code doesn't seem to do anything at all. / I'm not seeing an outline. / I'm getting a weird error in my console, something like Uncaught SyntaxError / Uncaught TypeError

This shouldn't be happening. If you're able to reproduce this error consistently, please let me know.
I'm on a website that has a video, but the code can't find it...

This is probably due to a technical limitation. The video should be video / audio element accessible via the DOM, and not in an iframe or a JavaScript AudioContext. So, this code won't work for SoundCloud, or pages with a YouTube video embedded within them.
What information is being sent? What information is being read by the script?

Only the absolute minimum required to synchronize the clients. The code is mostly event-driven, so it reacts when you play or seek. The state of media player is sent every so often to ensure everyone else is in sync.
- What event happened (whether the player is paused, requested playback, seeked, is buffering, or requests to sync with other clients).
- The current time in the video
- The state of the player (paused, playing, buffering)
The events sent and recieved can be seen in the developer console. Let it be known that none of this data is stored anywhere, it's only relayed to other clients. Let me reiterate what's not being sent:
- Cookies, login tokens, browsing history, passwords, emails, selfies, or anything that could impersonate you.
- Anything that could remotely identify you as you.
- The site you're running the script on. (This is read by the client for styling purposes, but never sent to the server.)
- The title, length, size, contents, or anything about the video that could be used to identify what you're watching.