Skip to main content

Build an interactive classroom

An interactive classroom gives a teacher a projection surface and gives each learner a clear place to ask, speak, collaborate, and leave. The canonical showcase demonstrates headless, bridge, and returned-UI compositions. Your application still owns teaching policy, learning state, and moderation.

Build this: follow the classroom workshop tutorial. View the live pattern: open the interactive classroom showcase. Compare it with maintained repositories in the Starter Projects catalog. There is no maintained standalone repository for this pattern yet.

The journey​

  1. A teacher creates a class through an authenticated backend and receives a bounded room session.
  2. Learners redeem named invitations whose role and assigned identity are already decided by the teacher.
  3. The teacher admits learners, queues questions, runs a poll, and opens one shared board or a breakout group.
  4. Learners ask before enabling microphone or camera; the teacher sees speaker and participant state while room audio remains available.
  5. The teacher ends class. Learners move to a class-ended state while the owner waits for confirmed room teardown.

Invitation and authority​

The backend issues role-bound teacher, moderator, and learner grants. A learner invitation binds the display name and assigned seat; an unknown or altered pack fails closed. The application owns polls, questions, board membership, breakouts, backgrounds, and moderation. MediaSFU owns room membership, transports, tracks, and media events.

Room lifecycle​

Represent closed, joining, ready, active, breakout, and ended explicitly. A learner leaving preserves class ownership. The teacher's end action transitions learners to a class-ended screen and requests room teardown; do not reuse stale room state for a later class.

Media identity​

Resolve participant/member identity before producer lookup. Teacher, learner, screen share, whiteboard, and speaker sources are distinct. A shared screen must not be duplicated as a camera card. Keep the learner's assigned seat visible when video changes, and mount room audio outside the projection so a speaking learner remains audible when their video is off.

Primary and mini media​

Use the shared screen, board, or active speaker as the primary surface. Learner cameras remain secondary cards or a rail; the learner view keeps its own seat visible. A board is one measured surface, and view-only awareness must not be mistaken for board membership.

Remote audio​

Keep room audio outside the classroom projection so a speaking learner remains audible while the teacher changes the primary screen, board, or speaker view.

Responsive layout​

Keep the teacher projection and one board surface inside the measured classroom container. On a narrow display, move the learner rail, questions, and controls below or beside the projection without creating a second board or dropping room audio. Keep ask-first media actions reachable at the same breakpoint.

Failure states​

Ask before enabling learner media and distinguish denied permission from a room failure. Surface poll, board, breakout, background, invitation, reconnect, and join errors beside the affected classroom action. If the teacher ends class, show a terminal class-ended state rather than leaving controls that no longer have authority.

Cleanup​

Return learners from breakouts, close active polls and board sessions, remove listeners and timers, stop local media, and leave/end the room according to the role. Teacher cleanup is confirmed by the backend; learner cleanup must not end the class. Clear temporary invitation and class state before a new session.

Product evolution​

Earlier classroom layouts could create multiple board surfaces, duplicate a screen share, or leave returned-UI controls clickable after their action had moved to the room component. The stable lesson is one measured board, identity-based screen deduplication, deliberate background commits, bound breakout participants, and no-op control removal when returned UI owns the operation.

Choose and test your platform​

Use the React showcase for headless, bridge, and packaged-UI compositions, polls, boards, participant state, room messages, and the ended-class experience. There is no separate classroom repository for the other SDKs. When porting the pattern, use that SDK's classroom tutorial and test room media, remote audio, collaboration controls, denied actions, reconnect, and cleanup on the target.

Release checklist​

Use an authenticated backend, test one teacher and at least two learners, exercise ask-first microphone/camera, screen share, remote audio, polls, board, breakouts, reconnect, narrow layout, and teacher/learner cleanup, then define your retention and consent policy for classroom media and learning records.