Skip to main content

ReactJS Live Guest Queue Tutorial

Build a live guest queue with mediasfu-reactjs@4.3.0. The supplied room keeps waiting people, speak requests, admission, media, alerts, and exit together.

Prerequisites​

  • Node.js 18 to 20, React 18, HTTPS or localhost, and host/guest profiles.
  • Authenticated create/join endpoints and backend guest-eligibility policy.

Project files​

package.json
{"private":true,"scripts":{"dev":"vite"},"dependencies":{"mediasfu-reactjs":"4.3.0","react":"18.2.0","react-dom":"18.2.0"},"devDependencies":{"@types/react":"18.3.24","@types/react-dom":"18.3.7","@vitejs/plugin-react":"4.3.4","typescript":"5.9.3","vite":"5.4.19"}}
src/App.tsx
import { ModernMediasfuGeneric, type CreateRoomOnMediaSFUType, type JoinRoomOnMediaSFUType } from 'mediasfu-reactjs';
async function postRoom<T>(url: string, payload: unknown): Promise<T> { const response = await fetch(url, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) throw new Error(`Room request failed (HTTP ${response.status}).`); return response.json() as Promise<T>; }
const createRoom: CreateRoomOnMediaSFUType = ({ payload }) => postRoom('/api/mediasfu/create-room', payload);
const joinRoom: JoinRoomOnMediaSFUType = ({ payload }) => postRoom('/api/mediasfu/join-room', payload);
export default function App() { return <main><header><h1>Live guest queue</h1><p>Use Waiting and Requests to review the next guest.</p></header><ModernMediasfuGeneric connectMediaSFU={true} createMediaSFURoom={createRoom} joinMediaSFURoom={joinRoom} /></main>; }
src/main.tsx
import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>);
index.html
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><title>Live guest queue</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>
vite.config.ts
import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()] });
tsconfig.json
{"compilerOptions":{"target":"ES2022","lib":["DOM","ES2022"],"strict":true,"module":"ESNext","moduleResolution":"Bundler","skipLibCheck":true,"noEmit":true,"jsx":"react-jsx"},"include":["src"]}

Use restricted, revocable, uncommitted development credentials only on an isolated local backend. Before distribution, external testing, or production, reusable Cloud credentials must stay on the authenticated backend.

Backend​

Implement the two API routes using the complete public production room credential boundary. The backend authenticates the host and guest before forwarding a room request; it never returns a Cloud credential.

Run​

npm install
npm run dev

Expected result​

The guest enters the waiting/request flow, the host sees the correct pending state, and an approved guest becomes a room participant. Rejection keeps the person outside the active room and produces a clear state.

Recovery​

Keep waiting, requested, admitted, rejected, and left distinct. After reconnect, refresh room state and require a new decision; do not replay an admission.

Cleanup​

Clear queue selection after each decision. On leave or host end, remove local queue state and expire temporary room authority on the backend.