Blueprint - Interactive Classroom
Compose a React classroom from the room lifecycle, participant workspaces, and collaboration controls without treating a control panel as proof of classroom behavior.
This page is a product blueprint, not a copy/paste tutorial. It explains how the parts fit together. Use the linked operation guides for complete, checked code.
This blueprint uses mediasfu-reactjs@4.3.0.
Prerequisites
- A teacher and learner who can join through the secure room path.
- Backend authority for the teacher role and classroom membership.
- Target-device camera and microphone permission testing.
- Retention rules for polls, whiteboards, attendance, and recordings.
Composition
| Classroom outcome | Use | Your application or backend owns |
|---|---|---|
| Teacher and learners join | Room lifecycle | Enrollment, identity, teacher authority |
| Teacher sees people and requests | Participant workspaces | Attendance and classroom policy |
| Run a poll | launchPoll and the supplied poll workflow | Lesson prompt, grading or reporting |
| Open breakout controls | launchBreakoutRooms | Group design, naming, learning workflow |
| Configure a whiteboard | launchConfigureWhiteboard | Lesson content, export and retention |
| Record when permitted | Recording boundary | Consent, retention, learner access |
Build and validate
Start with one teacher and one learner, then add the collaboration control surfaces. Test a second learner before expanding class size. Verify denied permissions, late join, disconnect/reconnect, empty requests, poll close, breakout return, and whiteboard cleanup.
Recovery
- Keep the learner in the main room if a breakout move fails.
- Explain whether an interrupted poll can be resumed or must be reopened.
- Show a reconnect state before restoring teacher-only controls.
- Preserve or discard whiteboard drafts according to classroom policy.
Semantic teardown
End the class through the host semantic action. Clear app-owned attendance snapshots, poll drafts, breakout labels, and board exports according to classroom policy.
Use React poll, breakout, and whiteboard controls for the exact launcher contracts.