Skip to content

Add cowatch-spoiler-gate example (Mux Player + Mux Data)#225

Open
kushankurdas wants to merge 1 commit into
muxinc:mainfrom
kushankurdas:kushankur/cowatch-spoiler-gate
Open

Add cowatch-spoiler-gate example (Mux Player + Mux Data)#225
kushankurdas wants to merge 1 commit into
muxinc:mainfrom
kushankurdas:kushankur/cowatch-spoiler-gate

Conversation

@kushankurdas
Copy link
Copy Markdown

Summary

This PR adds cowatch-spoiler-gate, a small reference application that
solves the spoiler-leak problem in co-watching: fast viewers reacting in
chat before slow viewers see the same moment. It uses Mux Player and
the Mux Data API (both server-side reads and client-side beacons) to
implement two pieces:

  1. Sync floor — every viewer reports its own latency over WebSocket
    and the server broadcasts the slowest viewer's latency as the room's
    sync target.
  2. Spoiler-safe chat — every chat message is stamped with the
    sender's current player.currentPdt, and the server holds the
    message until every recipient's perceived PDT has passed that stamp.

What this exercises in Mux

Mux product Where Methods used
Mux Player (@mux/mux-player) public/room.html player.currentPdt, streamType, Data beacons via env-key
Mux Data API (@mux/mux-node) server.js/api/metrics data.realTime.retrieveTimeseries('current-concurrent-viewers'), data.metrics.getOverallValues('rebuffer_percentage'), data.metrics.getOverallValues('video_startup_time'), all filtered by video_id:<room>

Both surfaces are available on Mux's free plan.

Contributor program self-check

Submitting under the Mux contributor program.

  • Uses Data or Video APIs — Mux Data API server-side reads and
    client-side beacons through Mux Player.
  • Real-world example — co-watching is a common product
    requirement (watch parties, live sports rooms, group viewing) and
    the spoiler-leak problem is real.
  • Contributes to a Mux open-source repository — this PR.
  • Original — searched muxinc/examples for co-watch,
    watch party, spoiler, sync floor, currentPdt,
    program-date-time, chat, socket, and websocket; no
    existing example overlaps.

Test plan

A headless smoke test verifies the WebSocket protocol end-to-end and
needs no Mux account:

cd cowatch-spoiler-gate
npm install
PORT=3987 node server.js &
PORT=3987 node smoke.mjs

The 12 checks cover: HTTP /, /config.json, sync floor maths, target
offset, roster, chat held when slow viewer is behind, chat released
after slow viewer catches up, immediate release when no one is behind,
sync floor moves with latency changes, and roster shrinks on disconnect.

For the Mux Data path, copy .env.example to .env, fill in
MUX_TOKEN_ID / MUX_TOKEN_SECRET (Data read scope) and
MUX_DATA_ENV_KEY, then open two browser tabs against
http://localhost:3000. The room view's "Mux Data" panel polls
/api/metrics?room=<room> every 10 seconds and shows real-time
concurrent viewers, rebuffer percentage and video startup time for the
last hour.

Known limitations (documented in the README)

  • VOD playback is not synchronized across tabs — intentional, so the
    algorithm can be exercised with a single asset.
  • Stale-viewer eviction at 10 seconds prevents the room from freezing
    if a viewer's tab is backgrounded.
  • No auth on room join — production hardening notes are in the README.

Happy to make any changes you'd like.

@kushankurdas
Copy link
Copy Markdown
Author

@philcluff @dylanjha - is this repo still active ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant