Inclusive learning

Live when you start it

Interactive Classroom

Real polls, a real shared board, real breakout groups and real backgrounds — one MediaSFU class, built three ways, so you can see how much of the screen you draw yourself.
  • Same class, three builds
  • Polls, board, groups
  • Real MediaSFU components
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 3 moves

0 of 3
  1. Pick who draws the screen

    Same class, three builds. It locks once the class starts.

  2. Start the class

    Your camera lands on the teaching stage.

  3. Invite a learner

    Open their link on your phone, then run a poll.

Premium React reference · inclusive learning studio

Interactive Classroom

One teaching surface for live video, polls, a shared board, groups, backgrounds and recording. Start a class and use it.

Three ways to build this

Same class, same features, same MediaSFU behind all three. What you pick here is only how much of the screen you draw yourself — then start the class below and teach with it.

One classroom · three integrations

All three are MediaSFU

Your layout around MediaSFU’s hard parts

This page arranges the class and drops MediaSFU’s own board, poll, groups, background and recording panels straight into it — the pieces that cost far more to rebuild than to import.

MediaSFU ships the whole classroom — live video, polls, the shared board, breakout groups, virtual backgrounds and recording. No tab here asks you to build a classroom. The only thing that changes between them is who draws the interface.

Who draws the screen

You draw the layout. MediaSFU draws the parts that are expensive to build.

YouMediaSFU
Why choose this
Your layout, without rebuilding a whiteboard.
What you give up
Imported panels arrive in MediaSFU’s styling.
Works on this tab
  • The drawing canvas
  • Polls, groups, backgrounds, recording
  • Your layout around them
Not on this tab
  • Their markup is theirs to restyle
What this uses, for developers

Import the Modern* component and pass renderMode="inline" — the legacy one ignores it.

Start a class anyone can join

Fifteen minutes, no account needed · one teacher and up to 5 learners.

No class is running. Starting one is optional and takes a few seconds.

NOT STARTEDNOBODY HAS JOINEDROOM 6 PEOPLEBOARD AWAYGROUPS TOGETHER
NOT STARTED—
You are the teacherStart the class and you appear here
Live
Your teaching stageStart a class to begin

Tab 3 · split between you

Your layout, holding MediaSFU’s panels

5 MediaSFU components on screen

MediaSFU · Whiteboard

The shared board

Off

Choose who can draw, then open the same synchronized board for everyone in the class.

Start the class above and this MediaSFU component appears, wired to the real room.

MediaSFU · PollModal

Ask the class

Closed

Ask a question, collect one answer from each learner and review the result together.

Start the class above and this MediaSFU component appears, wired to the real room.

MediaSFU · BreakoutRoomsModal

Split the class

Together

Choose the groups, place each learner, then bring the whole class back when you are ready.

Start the class above and this MediaSFU component appears, wired to the real room.

MediaSFU · BackgroundModal

Behind the teacher

Off

Preview a background on your camera, then apply it to your live camera. The person-segmentation model and camera load only when you open the picker.

Start the class above and this MediaSFU component appears, wired to the real room.

Imported from MediaSFU

Recording
Records nobody here
These are MediaSFU’s own recording controls, restyled to match this page. Nothing here is recorded.

Nothing is running yet. Start the class and every control on this page acts on a real room.

Open the canonical classroom workbench

The premium surface and technical guide resolve from the same frozen scenario, evidence ids, and teardown contract.

Inclusive learning pattern · guide-only

Technical workbench · Interactive Classroom

An instructor-led learning room with an accessible lecture, consent-bound participation, breakouts, whiteboard, screen sharing, and recording boundaries.

  1. 1Start with

    a class boundary where admission, accessibility, consent, and learning participation have named owners

  2. 2Use MediaSFU primitives

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

  3. 3Get

    an inclusive classroom model without pretending to create breakouts, write a whiteboard, capture a screen, or start a recording

  4. 4Refine with

    lobby, accessibility, consent, breakout, whiteboard, screen-share, and recording adapters owned by the application

Build translation

Start with X → MediaSFU primitives Y → outcome Z

Start withA policy-gated class→MediaSFU primitivesroom-create-v1 + room-join-v1→OutcomeInstructor, students, and observers enter a clear room lifecycle

Refine: Bind an application-owned lobby and enrollment policy.

Start withAn accessible live lecture→MediaSFU primitiveslocal-media + participant presence→OutcomeInstructor media intent and participant presence remain explicit

Refine: Bind accessibility, interpretation, captions, and consent adapters.

Start withSmall-group participation→MediaSFU primitivesroom lifecycle evidence→OutcomeBreakouts and whiteboard collaboration have named application boundaries

Refine: Bind authorized breakout and whiteboard adapters.

Start withA durable learning record→MediaSFU primitivesroom lifecycle evidence→OutcomeScreen sharing and recording remain accountable rather than implied

Refine: Bind consent-aware screenshare and retention adapters.

Role lens

Who owns each decision?

Topology

The room and its deliberate gaps

Lobbyenrollment and consent boundary
Live lectureSDK room lifecycle
Breakoutsorchestration adapter / unbound
Whiteboardcollaboration adapter / unbound
Screen shareconsent adapter / unbound
Recordingretention adapter / unbound

Control inventory

Controls are states, not simulated actions

Admit classadapter required

Reserved for enrollment, lobby, and consent policy; no participant is admitted here.

Owner: Instructor
Live lecturesdk state dependent

Visible only after SDK readiness; this guide requests no media.

Owner: Instructor
Accessibility + interpretationadapter required

Reserved for an authorized accommodation adapter; no caption or interpretation claim is made.

Owner: Interpreter
Breakouts + whiteboardadapter required

Reserved for grouping and collaboration adapters; no subgroup or canvas is created.

Owner: Facilitator
Polls + Q&Aadapter required

Reserved for accessible poll, response, question, ranking, moderation, and retention policy; no response is submitted here.

Owner: Instructor + facilitator
Screen share + recordingadapter required

Reserved for consent-aware adapters; no screen or recording is accessed.

Owner: Instructor

Implementation workbench

application

Instructor application: Declare enrollment, accessibility, and consent

Do: Choose lobby, enrollment, accommodation, consent, and retention boundaries before rendering room controls.

Then: No roster, credential, accessibility preference, recording consent, or server-held value is placed in this guide.

Evidence: Enrollment, accessibility, and consent policy review

Recovery: Stop when any required policy or accommodation path is unavailable.