Skip to main content

Shared Core Classroom Workshop Tutorial

Build a headless classroom workshop with mediasfu-shared@1.1.0. Your app renders the classroom; shared core provides the published poll, breakout, and whiteboard commands for its live room runtime.

Prerequisites​

  • Node.js 18 to 20 and a TypeScript application that owns a live room runtime.
  • A classroom renderer and backend rules for teacher and learner permissions.

Project files​

package.json
{"private":true,"type":"module","scripts":{"typecheck":"tsc --noEmit"},"dependencies":{"mediasfu-shared":"1.1.0","mediasoup-client":"3.20.0","socket.io-client":"4.8.3"},"devDependencies":{"typescript":"5.9.3"}}
tsconfig.json
{"compilerOptions":{"strict":true,"target":"ES2022","module":"ESNext","moduleResolution":"bundler","lib":["DOM","ES2022"],"skipLibCheck":true,"noEmit":true},"include":["src/**/*.ts"]}
src/classroom.ts
import { handleCreatePoll, handleEndPoll, handleStartBreakout, handleStartWhiteboard, handleStopBreakout, handleStopWhiteboard, handleVotePoll } from 'mediasfu-shared';
export type ClassroomRuntime={createPoll:Parameters<typeof handleCreatePoll>[0];votePoll:Parameters<typeof handleVotePoll>[0];endPoll:Parameters<typeof handleEndPoll>[0];startBreakout:Parameters<typeof handleStartBreakout>[0];stopBreakout:Parameters<typeof handleStopBreakout>[0];startWhiteboard:Parameters<typeof handleStartWhiteboard>[0];stopWhiteboard:Parameters<typeof handleStopWhiteboard>[0]};
export async function runWorkshop(runtime:ClassroomRuntime){
  await handleCreatePoll(runtime.createPoll);await handleVotePoll(runtime.votePoll);await handleEndPoll(runtime.endPoll);
  await handleStartBreakout(runtime.startBreakout);await handleStopBreakout(runtime.stopBreakout);
  await handleStartWhiteboard(runtime.startWhiteboard);await handleStopWhiteboard(runtime.stopWhiteboard);
}
src/app-boundaries.ts
import type { ClassroomRuntime } from './classroom';
export type ClassroomRenderer={renderPoll():void;renderBreakouts():void;renderWhiteboard():void;showFailure(message:string):void};
export type ClassroomApplication={runtime:ClassroomRuntime;renderer:ClassroomRenderer;mayTeach:boolean};

Run​

npm install
npm run typecheck

Expected result​

When your live application passes a teacher-authorized runtime, it can create, vote, and close a poll; start and stop breakouts; and start and stop the whiteboard. The renderer updates from the room's events.

Recovery​

Leave learners in the main room if a breakout move fails. Reconcile the poll state after reconnecting and apply your own policy for whiteboard draft recovery.

Cleanup​

Return learners from breakouts, close the poll and whiteboard, unmount the renderer, and close app-owned media resources on leave. Do not call leave a semantic host-wide end.

Release boundary​

The authenticated backend owns entry and teaching roles. Shared core is not a rendered classroom or secure client-side room-creation SDK, so no hosted MediaSFU credential belongs in the app.