Shared Core Host Dashboard Tutorial

Build a headless host dashboard with mediasfu-shared@1.1.0. Your application renders the dashboard and supplies its live room state; the controller uses the published participant, panelist, and permission operations.

Prerequisites

• Node.js 18 to 20 and a TypeScript application with a live MediaSFU room runtime.
• A renderer for participant lists, selected people, alerts, and host controls.
• An authenticated backend that applies host policy before it creates or authorizes rooms.

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/host-dashboard.ts

import { removeParticipants, updatePanelists, updateParticipantPermission, updatePermissionConfig } from 'mediasfu-shared';
export type HostDashboardRuntime={remove:Parameters<typeof removeParticipants>[0];panelists:Parameters<typeof updatePanelists>[0];participantPermission:Parameters<typeof updateParticipantPermission>[0];roomPermission:Parameters<typeof updatePermissionConfig>[0]};
export async function applyHostDashboardAction(runtime:HostDashboardRuntime){
  await updatePanelists(runtime.panelists);
  await updateParticipantPermission(runtime.participantPermission);
  await updatePermissionConfig(runtime.roomPermission);
  await removeParticipants(runtime.remove);
}

src/app-boundaries.ts

import type { HostDashboardRuntime } from './host-dashboard';
export type HostRenderer={showParticipants():void;showPolicyResult():void;showFailure(message:string):void};
export type HostApplication={runtime:HostDashboardRuntime;renderer:HostRenderer;isAuthorizedHost:boolean};

Call applyHostDashboardAction only after the authenticated backend and your application have confirmed the current user is allowed to perform that action.

Run

npm install
npm run typecheck

Expected result

With a live host runtime, the controller updates panelists, participant permissions, room permissions, and then removes the selected participant. Your renderer shows the resulting room events and any policy denial.

Recovery

Refresh participant and permission state after reconnecting before repeating an action. Treat a rejected action as room policy instead of retrying blindly.

Cleanup

Clear selected-person state, unmount host controls, and close app-owned tracks and transports when the host leaves. There is no published shared-core, role-aware host-wide end operation.

Release boundary

The backend owns room authority and host permissions. Shared core supplies operations but not a rendered dashboard or secure client-side room creation; never place a hosted MediaSFU API key in browser code.