socket video sync

overview

sync two mp4 videos across separate screens from one controller. built during my internship at nyu idm. open the app on three devices, join the same room, load a different video on screen a and screen b, and hit play from the controller. both screens stay locked to the same timeline over socket.io. the use case is installations or performances where two projections need to stay in sync without physically wiring them together. there's a demo on this page that simulates both screens in one browser using the same drift correction and heartbeat sync as the real app.

features

• three-device setup: one controller, two screens, each running its own video file
• play, pause, seek, and reset all broadcast instantly over websockets
• drift correction that only seeks when timestamps are actually out of sync, not constantly fighting the video element
• works on mobile with gesture unlock for ios playback
• interactive demo on this page to try the sync logic without needing three devices

technical details

• frontend: react + vite, html5 video, socket.io client
• backend: node.js, express, socket.io with room-based pub/sub
• controller tracks playback with performance.now() between commands instead of decoding video locally
• discrete commands (play, pause, seek, reset) carry a shared timestamp and playing flag
• heartbeat sync: controller emits lightweight sync-state packets on a fixed interval while joined
• threshold-based drift correction: screens seek only when local currentTime differs from remote by more than 0.3s
• echo suppression guard so remote-applied updates don't get treated as local input
• deployment: github pages for the client; render, railway, or fly.io for the socket server

source

github.com/IsaiahHashimoto/SocketVideoSync