@moq/boy

Browser-side player for the MoQ Boy demo. Discovers active game sessions over MoQ, renders their video/audio, and publishes button input back to the emulator.

The server-side emulator lives in the moq-boy Rust crate.

Installation

bun add @moq/boy
# or
npm add @moq/boy

Web Component

<script type="module">
	import "@moq/boy/element";
</script>

<moq-boy
	url="https://relay.example.com"
	prefix-game="boy"
	prefix-viewer="viewer/boy">
</moq-boy>

Attributes:

• url (required) — Relay server URL
• prefix — Base path prefix (default: boy). Derives prefix-game and prefix-viewer.
• prefix-game — Path prefix for game broadcasts (default: {prefix}/game)
• prefix-viewer — Path prefix for viewer broadcasts (default: {prefix}/viewer)

The element manages its own UI (game grid, per-game canvas, on-screen buttons, stats) inside a Shadow DOM.

How it works

• Discover games — subscribes to announcements under prefix-game and mounts each suffix as a Game.
• Subscribe on demand — video and audio tracks are only subscribed while the game is visible in the viewport, so the server-side emulator auto-pauses when nothing is being watched.
• Publish input — button presses go out on a JSON track under prefix-viewer/{name}/{viewerId}/command.
• Live status — the server publishes a status track with currently pressed buttons and per-viewer latency, used to highlight shared input.

See demo/moq-boy for the full architecture and track layout.

Related Packages

• @moq/watch — Used under the hood for video/audio playback
• @moq/lite — Core pub/sub transport
• moq-boy — The Rust emulator/publisher

Source

js/moq-boy