Live production

Live when you start it

Broadcast Control Room

Line up cameras in preview, cut them to air, and see how a control room is put together — with real media and no pretend switching.
  • Contributor stage
  • Preview / program
  • HLS and recording boundaries
Free · no account · runs in this browser
Nothing starts until you press something. You can run the whole thing as a guest — no account, no setup, and any room you launch expires on its own. Just opening this page creates no room, no session and no charges.
Your path through this room

Try it in 4 moves

0 of 4
  1. Launch the room

    Your camera becomes a source you can cut to air.

  2. Load a source into preview

    Press an input tile. Preview never reaches the audience.

  3. Take it to air

    Watch preview and program swap at once.

  4. Add a contributor

    A phone camera on the link becomes a new input.

Premium React reference · deterministic guide

Broadcast Control Room

Stage contributors, compare preview with program, inspect delivery boundaries, and rehearse the production sequence without claiming a live broadcast.

Guest-ready live MediaSFU contributor room

Anyone can try a short-lived contributor room as a guest — no account needed.

Cameras and mics are real. Switching to air, recording and clipping are not part of this demo.

Optional live contributor media is off. The local broadcast rehearsal remains the default.

Control surfaceRehearsal 01
PROGRAM CLOCK00:00:00
Nothing is recorded
Preview · Guest ALOCAL PREVIEW
Guest A
1080p48 kHzPreview projection
Program · HostPROGRAM SAFE
Host
1080p48 kHzProgram projection
Up next in previewGuest AGreen-room preview

Source matrix

Contributor inputs

4 declared sources
  1. Launch the room and turn your camera onUse the contributor controls above. Your own camera appears in the monitor bound to Host — that is you.
  2. Preview is rehearsal, Program is on airThe left monitor is what you are lining up next. The right one, outlined in red, is what an audience would be seeing.
  3. Pick what to line up nextClick any card under Contributor inputs. It loads into Preview and is labelled PVW; the live one is labelled PGM.
  4. Cut it to airPress "Take preview to program" to swap them. Nothing is broadcast anywhere — this is a rehearsal surface.

Invite a second person with “Create contributor link” to see a real guest fill the other monitor.

Media delivery map

From contributors to audience

01WebRTC contributorsReal cameras and mics in a live roomreference boundary
02Program controlCutting a feed to airnot in this demo
03WHEP / HLS audienceStreaming out to a large audiencenot in this demo
04Recording + clipsRecording and saving clipsnot in this demo

Local guide ready. No room, ingest, output, or recording is active.

What this proves

The React presentation can project the canonical roles, topology, controls, evidence, and teardown contract into a recognizable production surface.

What this demo does not do

You get real cameras and mics in a live room. Cutting to air, streaming out, recording and clips are not included — nor is sign-in, moderation, or saving anything after you leave.

Open the canonical technical workbench

The premium surface and this technical guide resolve from the same exact frozen scenario.

Live production pattern · guide-only

Technical workbench · Broadcast Control Room

A producer-led control room for intentional guest intake, program switching, recording, and clip review.

  1. 1Start with

    a producer-owned production room with a green room and explicit program boundary

  2. 2Use MediaSFU primitives

    create or join, participant roles, local media controls, and room lifecycle events

  3. 3Get

    an auditable control-room model without pretending to run a broadcast

  4. 4Refine with

    ingest, program, recording, and clipping adapters owned by the application

Build translation

Start with X → MediaSFU primitives Y → outcome Z

Start withProduction boundary→MediaSFU primitivesroom-create-v1 + room-join-v1→OutcomeProducer, host, and guests share an explicit room lifecycle

Refine: Add an application-owned admission and green-room policy.

Start withProgram decision→MediaSFU primitivesparticipant presence + host controls→OutcomeA clear boundary between preview intent and program ownership

Refine: Bind a server-authorized program-switching adapter.

Start withDurable production record→MediaSFU primitivesroom lifecycle evidence→OutcomeA place for later recording and clip evidence

Refine: Bind authorized recording and clip-retention adapters.

Start withAudience safety→MediaSFU primitivesparticipant presence→OutcomeViewer presence is distinct from production control

Refine: Bind moderation and delivery adapters with retention rules.

Role lens

Who owns each decision?

Topology

The room and its deliberate gaps

Ingestapplication adapter / unbound
Green roomapplication admission boundary
Live roomSDK room lifecycle
Programswitching adapter / unbound
Recording + clipsretention adapter / unbound

Control inventory

Controls are states, not simulated actions

Green roomadapter required

Reserved for an application-owned admission adapter; no guest is moved by this guide.

Owner: Producer
Preview → programadapter required

Reserved for a server-authorized switching adapter; no program output is changed.

Owner: Director
Host microphonesdk state dependent

Visible only after SDK readiness; no media is requested by this guide.

Owner: Host
Recording + clipsadapter required

Reserved for a retention-aware recording adapter; no file is created.

Owner: Producer
End productionsdk state dependent

Maps to the selected room lifecycle only after SDK readiness.

Owner: Producer

Implementation workbench

application

Producer application: Declare production ownership

Do: Select the room and admission boundary before rendering controls.

Then: No endpoint, credential, ingest, or server-held value is placed in this guide.

Evidence: Production policy review

Recovery: Stop when no authorized session adapter is available.