@defcomm/meetingsdk 0.6.1 → 0.6.3

package/README.md

@@ -1,1347 +1,1190 @@
-# DEFCOMM Meet SDK
+# @defcomm/meetingsdk
 
-`@afosecure/meetingsdk` is the React/TypeScript client SDK used by **DEFCOMM Meet**.
+A React and TypeScript SDK for building real-time audio/video meetings with DefComm Meet infrastructure.
 
-It provides the application layer for:
+The SDK provides the meeting connection, participant state, media controls, chat, reactions, admission control, moderation, screen sharing, recording, transcript/summary access, network-quality state, and participant lifecycle events needed to build a complete meeting experience without implementing the SFU/WebSocket protocol yourself.
 
-- joining and leaving meetings
-- microphone and camera control
-- remote participant media
-- screen sharing
-- active-speaker detection
-- participant presence and reconnection state
-- private-room admission
-- server-side recording
-- room management
-- chat/PubSub integration
-- WebRTC and SFU signaling orchestration
+## Live sample
 
-The SDK is designed so that a DEFCOMM Meet consumer should **not need to manage WebRTC peer connections, SDP, ICE candidates, RTP tracks, reconnect logic, or browser media plumbing directly**.
+A complete example application is available at:
 
----
+**https://meet.defcomm.ng**
 
-## Table of contents
-
-1. [What the SDK does](#what-the-sdk-does)
-2. [Architecture](#architecture)
-3. [Installation](#installation)
-4. [SDK configuration](#sdk-configuration)
-5. [Creating a meeting](#creating-a-meeting)
-6. [Joining a meeting](#joining-a-meeting)
-7. [MeetingProvider](#meetingprovider)
-8. [The `useMeeting` hook](#the-usemeeting-hook)
-9. [Participants](#participants)
-10. [Local participant](#local-participant)
-11. [Remote media](#remote-media)
-12. [Microphone and camera](#microphone-and-camera)
-13. [Active speaker detection](#active-speaker-detection)
-14. [Screen sharing](#screen-sharing)
-15. [Recording](#recording)
-16. [Private rooms and join approval](#private-rooms-and-join-approval)
-17. [Reconnection and participant presence](#reconnection-and-participant-presence)
-18. [Leaving a meeting](#leaving-a-meeting)
-19. [Room management](#room-management)
-20. [Meeting preview](#meeting-preview)
-21. [Chat](#chat)
-22. [Error handling](#error-handling)
-23. [Recommended DEFCOMM Meet structure](#recommended-defcomm-meet-structure)
-24. [Important implementation rules](#important-implementation-rules)
-25. [Build and publish](#build-and-publish)
+Use the sample as a reference for a full meeting UI, including pre-join device selection, waiting-room/admission behavior, participant lists, moderation, chat, reactions, screen sharing, and meeting controls.
 
 ---
 
-# What the SDK does
+## Installation
 
-DEFCOMM Meet is built around an **SFU architecture**.
+Install the package from npm:
 
-The browser does not establish a separate peer connection with every participant.
+```bash
+pnpm add @defcomm/meetingsdk
+```
 
-Instead:
+or:
 
-```text
-Participant A ──┐
-Participant B ──┼──► DEFCOMM Rust SFU ──► Participants
-Participant C ──┘
+```bash
+npm install @defcomm/meetingsdk
+```
+
+The SDK is intended for browser/client-side React applications because it uses browser media APIs such as `navigator.mediaDevices`, `MediaStream`, and WebRTC.
+
+### React / Next.js
+
+For Next.js App Router, components that use the SDK should run on the client:
+
+```tsx
+"use client";
 ```
 
-The SDK sits between the React application and the SFU:
+---
+
+## What the SDK does
+
+At a high level, your application supplies a participant identity and an access token, creates a `MeetingProvider`, and uses the exported hooks to control the meeting.
 
 ```text
-┌───────────────────────────────┐
-│        DEFCOMM Meet App       │
-│                               │
-│   Meeting UI / Participant UI │
-└───────────────┬───────────────┘
-                │
-                ▼
-┌───────────────────────────────┐
-│     @afosecure/meetingsdk     │
-│                               │
-│ React hooks                   │
-│ Meeting state                 │
-│ WebRTC                       │
-│ WebSocket signaling           │
-│ Reconnection                  │
-│ Active speaker detection      │
-│ Media attachment              │
-│ Recording controls            │
-└───────────────┬───────────────┘
-                │
-                ▼
-┌───────────────────────────────┐
-│       DEFCOMM Rust SFU        │
-│                               │
-│ Rooms                         │
-│ Participants                  │
-│ Admission                     │
-│ SDP / ICE                     │
-│ RTP forwarding                │
-│ Track state                   │
-│ Recording                     │
-└───────────────────────────────┘
-```
-
-### The responsibility split
-
-**Your application owns:**
-
-- layout
-- buttons
-- participant tiles
-- navbar
-- chat UI
-- recording indicator
-- active-speaker styling
-- loading/error screens
-
-**The SDK owns:**
-
-- browser media access
-- publisher PeerConnection
-- subscriber PeerConnection
-- WebSocket signaling
-- media track mapping
-- reconnect/resume behavior
-- active-speaker detection
-- SDK meeting state
-
-**The SFU owns:**
-
-- room state
-- participant membership
-- admission/approval
-- signaling authority
-- media forwarding
-- track publication/subscription
-- server-side recording
+Your application
+       │
+       ▼
+MeetingProvider
+       │
+       ├── useMeeting()
+       ├── useParticipants()
+       ├── useLocalParticipant()
+       ├── useMeetingPreview()
+       ├── useRemoteMedia()
+       ├── useNetworkQuality()
+       └── usePubSub()
+       │
+       ▼
+DefComm Meeting SDK
+       │
+       ├── REST API
+       └── SFU / WebSocket
+```
+
+The SDK owns the media/session state and translates SFU events into React-friendly state and callbacks.
 
 ---
 
-# Installation
+# 1. Authentication and meeting tokens
 
-```bash
-npm install @afosecure/meetingsdk
+The meeting client needs a token that authorizes the participant to connect to a room.
+
+The recommended architecture is:
+
+```text
+Your backend
+    │
+    ├── authenticates your application user
+    ├── decides which room the user may access
+    └── obtains/creates a DefComm meeting token
+             │
+             ▼
+        Your React app
+             │
+             ▼
+      <MeetingProvider />
 ```
 
-The SDK is intended for browser-based React + TypeScript applications.
+Do **not** put a server-only API secret in browser code. Your backend should handle server credentials and issue the short-lived/access-scoped token that the browser uses for the meeting.
+
+Your application is responsible for deciding who the participant is and for obtaining the token securely.
 
 ---
 
-# Creating a meeting
+# 2. Basic integration
+
+The smallest useful integration looks like this.
 
-The SDK exposes room management through `VideoSDKCore` and `useMeeting()`.
+## Step 1: Create the provider
 
 ```tsx
-const { createRoom } = useMeeting();
+"use client";
 
-const room = await createRoom({
-  name: "Engineering Standup",
-  description: "Daily engineering meeting",
-  capacity: 50,
-  is_private: true,
-});
+import { MeetingProvider } from "@defcomm/meetingsdk";
+
+export default function MeetingShell() {
+  return (
+    <MeetingProvider
+      config={{
+        roomId: "ROOM_ID",
+        participantId: "USER_ID",
+        name: "Cornel",
+        token: "MEETING_ACCESS_TOKEN",
+      }}
+    >
+      <Meeting />
+    </MeetingProvider>
+  );
+}
 ```
 
-A room can also be retrieved:
+`MeetingProvider` supplies the meeting SDK to all child components.
 
-```tsx
-const { getRoom } = useMeeting();
+### `config`
 
-const room = await getRoom(roomCode);
-```
+| Property | Required | Description |
+|---|---:|---|
+| `roomId` | Yes | DefComm room ID/code used for the meeting. |
+| `participantId` | Yes | Your application's stable participant/user identifier. |
+| `name` | Yes | Display name shown to other participants. |
+| `token` | Yes | Access token generated/issued for the participant. |
+| `audioMuted` | No | Start with microphone disabled. |
+| `videoMuted` | No | Start with camera disabled. |
+| `cameraDeviceId` | No | Camera to use when creating the initial local media stream. |
+| `microphoneDeviceId` | No | Microphone to use when creating the initial local media stream. |
+
+---
 
-And deleted when appropriate:
+## Step 2: Join the meeting
 
 ```tsx
-const { deleteRoom } = useMeeting();
+"use client";
+
+import { useMeeting } from "@defcomm/meetingsdk";
 
-await deleteRoom(roomCode);
+export function JoinButton() {
+  const { join } = useMeeting();
+
+  const handleJoin = async () => {
+    await join();
+  };
+
+  return <button onClick={handleJoin}>Join meeting</button>;
+}
 ```
 
-Room creation and deletion should normally be restricted to the appropriate application role.
+The provider's original `config` supplies the participant ID and token. `join()` can also receive per-join overrides for supported meeting configuration fields.
+
+```tsx
+await join({
+  roomId: "ROOM_ID",
+  name: "Cornel",
+  cameraDeviceId: selectedCameraId,
+  microphoneDeviceId: selectedMicrophoneId,
+  audioMuted: false,
+  videoMuted: false,
+});
+```
 
 ---
 
-# Joining a meeting
+# 3. Participant lifecycle events
 
-The normal React integration starts with `MeetingProvider`.
+Participant lifecycle events are first-class SDK events. Developers do not need to compare the participant list before and after every update.
 
-```tsx
-import { MeetingProvider, useMeeting } from "@afosecure/meetingsdk";
+The most useful events are:
 
-function MeetingRoom() {
-  const { join, leave } = useMeeting();
+- `onParticipantJoined`
+- `onParticipantLeft`
+- `onChatMessage`
 
-  return (
-    <div>
-      <button onClick={() => join()}>Join meeting</button>
+Example:
 
-      <button onClick={() => leave()}>Leave</button>
-    </div>
-  );
-}
+```tsx
+useMeeting({
+  onParticipantJoined: (participant) => {
+    console.log("Participant joined:", participant);
+  },
 
-export function MeetingPage() {
-  return (
-    <MeetingProvider
-      config={{
-        roomId: "room-code",
-        name: "Afolabi",
-        audioMuted: false,
-        videoMuted: false,
-      }}
-    >
-      <MeetingRoom />
-    </MeetingProvider>
-  );
-}
+  onParticipantLeft: (participant) => {
+    console.log("Participant left:", participant);
+  },
+
+  onChatMessage: (message) => {
+    console.log("Chat message:", message);
+  },
+});
 ```
 
-`MeetingProvider` accepts:
+These callbacks are especially useful for application-level notifications, sounds, analytics, toasts, logging, and custom UI.
 
-```ts
-type MeetingConfig = {
-  roomId: string;
-  name: string;
-  audioMuted?: boolean;
-  videoMuted?: boolean;
-  token?: string;
+## Join sound example
+
+```tsx
+const playSound = (src: string) => {
+  const audio = new Audio(src);
+  audio.play().catch(() => {
+    // Browsers can block autoplay until the user interacts with the page.
+  });
 };
+
+useMeeting({
+  onParticipantJoined: (participant) => {
+    console.log(`${participant.name ?? "A participant"} joined`);
+    playSound("/audio/join.mp3");
+  },
+});
 ```
 
-### Recommended join flow
+## Message notification example
 
-```text
-Meeting page
-    ↓
-MeetingProvider
-    ↓
-User clicks Join
-    ↓
-join()
-    ↓
-Browser requests camera/microphone
-    ↓
-SDK connects to SFU
-    ↓
-Publisher PeerConnection
-    ↓
-Subscriber PeerConnection
-    ↓
-Remote tracks become available
+```tsx
+useMeeting({
+  onChatMessage: (message) => {
+    playSound("/audio/message.mp3");
+  },
+});
 ```
 
-Call `join()` from a user action whenever possible. This gives the browser a normal user-initiated context for requesting media permissions.
+Because the callback represents an incoming SDK chat event, the application can decide how it wants to present the notification instead of the SDK forcing a particular sound or UI.
 
 ---
 
-# The `useMeeting` hook
+# 4. React hooks
+
+## `useMeeting()`
 
-`useMeeting()` is the main application API.
+The primary hook for meeting actions, state, and events.
 
 ```tsx
 const {
   join,
   leave,
+  room,
+  localParticipant,
+  participants,
+  messages,
+  presenterId,
+  activeSpeakerIds,
+  networkQuality,
+  recording,
 
   toggleMic,
   toggleCam,
-
   startScreenShare,
   stopScreenShare,
 
-  startRecording,
-  stopRecording,
-  getRecordingStatus,
+  sendMessage,
+  sendReaction,
 
-  participants,
-  localParticipant,
-  activeSpeakerIds,
-  presenterId,
-  room,
+  getMediaDevices,
+  selectCamera,
+  selectMicrophone,
 
   approveJoinRequest,
   rejectJoinRequest,
+  cancelJoinRequest,
 
-  sendMessage,
-} = useMeeting();
-```
-
-The hook also supports event handlers:
-
-```tsx
-const meeting = useMeeting({
-  onError: (error) => {
-    console.error(error);
-  },
-
-  onActiveSpeakersChanged: (participantIds) => {
-    console.log("Active speakers:", participantIds);
-  },
+  muteAllAudio,
+  muteParticipant,
+  removeParticipant,
 
-  onRecordingStarted: (recording) => {
-    console.log("Recording started:", recording);
-  },
+  startRecording,
+  stopRecording,
+  getRecordingStatus,
 
-  onRecordingStopped: (recording) => {
-    console.log("Recording stopped:", recording);
-  },
-});
+  getJoinState,
+  getTranscript,
+  getMeetingSummary,
+} = useMeeting();
 ```
 
-For normal React rendering, prefer the state exposed by the hook:
+### Event callbacks available on `useMeeting()`
 
 ```tsx
-const { activeSpeakerIds } = useMeeting();
+useMeeting({
+  onError,
+  onEntryRequested,
+  onEntryResponded,
+  onJoinRequestCanceled,
+  onParticipantRemoved,
+  onParticipantPermissionsChanged,
+  onMeetingLeft,
+  onTrackStateChanged,
+  onRecordingStarted,
+  onRecordingStopped,
+  onReaction,
+  onActiveSpeakersChanged,
+  onConnectionStateChanged,
+  onNetworkQuality,
+  onParticipantJoined,
+  onParticipantLeft,
+  onChatMessage,
+});
 ```
 
-Use event callbacks when the application needs to perform an additional side effect.
-
 ---
 
-# Participants
+## `useParticipants()`
 
-Use `useParticipants()` when the component only needs the participant list.
+Returns the current participants as an array.
 
 ```tsx
-import { useParticipants } from "@afosecure/meetingsdk";
+const participants = useParticipants();
 
-function ParticipantList() {
-  const participants = useParticipants();
-
-  return (
-    <div>
-      {participants.map((participant) => (
-        <div key={participant.id}>{participant.name}</div>
-      ))}
-    </div>
-  );
-}
+return (
+  <ul>
+    {participants.map((participant) => (
+      <li key={participant.id}>
+        {participant.name}
+      </li>
+    ))}
+  </ul>
+);
 ```
 
-A participant contains:
+A participant contains information such as:
 
 ```ts
-type Participant = {
+{
   id: string;
   name?: string;
   isHost?: boolean;
+  isModerator?: boolean;
+  permissions?: any;
   isLocal?: boolean;
   isPresenter?: boolean;
-
   connectionState?: "connected" | "reconnecting" | "disconnected";
-
   media?: {
     stream?: MediaStream | null;
     screenStream?: MediaStream | null;
-
     cameraTrack?: MediaStreamTrack;
     screenTrack?: MediaStreamTrack;
     audioTrack?: MediaStreamTrack;
-
     micEnabled: boolean;
     camEnabled: boolean;
     isScreenSharing: boolean;
-
-    remoteScreenStreamId?: string;
-    cameraStreamId?: string;
   };
-};
+}
 ```
 
 ---
 
-# Local participant
+## `useLocalParticipant()`
 
-Use `useLocalParticipant()` when you need the local participant and local video.
+Returns the local participant and a convenient callback ref for rendering the local media stream.
 
 ```tsx
-import { useLocalParticipant } from "@afosecure/meetingsdk";
-
-function LocalVideo() {
-  const { participant, videoRef } = useLocalParticipant();
+const { participant, videoRef } = useLocalParticipant();
 
-  return <video ref={videoRef} autoPlay muted playsInline />;
-}
-```
-
-The local participant exposes:
-
-```tsx
-participant?.media?.micEnabled;
-participant?.media?.camEnabled;
-participant?.media?.isScreenSharing;
+return (
+  <video
+    ref={videoRef}
+    autoPlay
+    muted
+    playsInline
+  />
+);
 ```
 
-Use these values to render local microphone/camera state.
-
 ---
 
-# Remote media
+# 5. Pre-join camera and microphone selection
 
-Use `useRemoteMedia(participantId)` for a remote participant.
+Use `getMediaDevices()` before entering the meeting.
 
 ```tsx
-import { useRemoteMedia } from "@afosecure/meetingsdk";
+const { getMediaDevices, selectCamera, selectMicrophone } = useMeeting();
 
-function RemoteParticipant({ participantId }: { participantId: string }) {
-  const { videoRef, audioRef, isCamActive, isMicEnabled } =
-    useRemoteMedia(participantId);
+const devices = await getMediaDevices();
 
-  return (
-    <div>
-      <video ref={videoRef} autoPlay playsInline muted />
+const cameras = devices.filter((device) => device.kind === "videoinput");
+const microphones = devices.filter(
+  (device) => device.kind === "audioinput",
+);
+```
 
-      <audio ref={audioRef} autoPlay />
+Select a camera:
 
-      {!isMicEnabled && <span>Muted</span>}
-      {!isCamActive && <span>Camera off</span>}
-    </div>
-  );
-}
+```tsx
+await selectCamera(cameraDeviceId);
 ```
 
-### Why are video and audio separate?
+Select a microphone:
 
-The SDK attaches the remote `MediaStream` to both elements:
+```tsx
+await selectMicrophone(microphoneDeviceId);
+```
 
-- `<video>` is muted
-- `<audio>` handles remote audio
+The SDK replaces the active media track when the meeting is already connected. The same camera-selection API can also be used by a pre-join UI so the application preview can follow the selected device.
 
-This makes media rendering explicit and avoids accidentally routing remote audio through the video element.
+For browsers where device labels are initially empty, request media permission before calling `enumerateDevices()` so the browser can expose useful labels.
 
 ---
 
-# Microphone and camera
+# 6. Microphone and camera controls
 
-The SDK exposes:
+Toggle the local microphone:
 
 ```tsx
-const { toggleMic, toggleCam } = useMeeting();
+const { toggleMic } = useMeeting();
+
+<button onClick={toggleMic}>Toggle microphone</button>;
 ```
 
-Use:
+Toggle the local camera:
 
 ```tsx
-<button onClick={toggleMic}>
-  Microphone
-</button>
+const { toggleCam } = useMeeting();
 
-<button onClick={toggleCam}>
-  Camera
-</button>
+<button onClick={toggleCam}>Toggle camera</button>;
 ```
 
-The SDK updates the local media track and sends the corresponding media state to the SFU.
+The local participant state exposes `media.micEnabled` and `media.camEnabled`, so the button can reflect the current state.
+
+---
 
-Remote participants receive the authoritative track state through the meeting state.
+# 7. Screen sharing
 
-For participant UI, use:
+Start sharing:
 
 ```tsx
-participant.media?.micEnabled;
-participant.media?.camEnabled;
+const { startScreenShare } = useMeeting();
+
+const stream = await startScreenShare();
 ```
 
-rather than trying to infer another participant's mute state from RTP or `MediaStreamTrack.muted`.
+Stop sharing:
+
+```tsx
+const { stopScreenShare } = useMeeting();
+
+stopScreenShare();
+```
+
+The browser controls the permission prompt for screen capture.
 
 ---
 
-# Active speaker detection
+# 8. Chat
 
-DEFCOMM Meet performs active-speaker detection **inside the SDK**.
+Send a message:
+
+```tsx
+const { sendMessage } = useMeeting();
 
-The application does not need to use Web Audio APIs, `AnalyserNode`, audio RMS calculations, timers, or WebRTC statistics.
+sendMessage({
+  message: "Hello everyone!",
+});
+```
 
-The SDK exposes:
+Reply to a message:
 
 ```tsx
-const { activeSpeakerIds } = useMeeting();
+sendMessage({
+  message: "Thanks!",
+  reply_to: {
+    id: message.id,
+    name: message.sender_name ?? "Participant",
+  },
+});
 ```
 
-`activeSpeakerIds` is:
+`ChatMessage` includes:
 
 ```ts
-string[]
+{
+  id: string;
+  text: string;
+  sender_id: string;
+  sender_name?: string;
+  timestamp: number;
+  reply_to?: { id: string; name: string } | null;
+  target?: string | null;
+}
 ```
 
-containing participant IDs currently detected as speaking.
+For real-time notifications, prefer `onChatMessage` rather than watching the `messages` array manually.
+
+---
 
-### Participant tile
+# 9. Reactions
+
+Send a reaction:
 
 ```tsx
-function ParticipantTile({ participant }: { participant: Participant }) {
-  const { activeSpeakerIds } = useMeeting();
+const { sendReaction } = useMeeting();
 
-  const isActiveSpeaker = activeSpeakerIds.includes(participant.id);
+sendReaction("👍");
+```
 
-  return (
-    <div className={isActiveSpeaker ? "ring-2 ring-green-400" : ""}>
-      {participant.name}
-    </div>
-  );
-}
+Listen for reactions:
+
+```tsx
+useMeeting({
+  onReaction: (reaction) => {
+    console.log(reaction.emoji);
+  },
+});
 ```
 
-### Better pattern
+---
+
+# 10. Private meetings and waiting-room admission
 
-For a participant list:
+The SDK supports rooms where a participant must be approved before entering.
+
+Check a participant's current join state:
 
 ```tsx
-const { activeSpeakerIds } = useMeeting();
+const { getJoinState } = useMeeting();
+
+const state = await getJoinState(roomCode);
+
+if (state.status === "ready") {
+  // The participant can proceed into the meeting.
+}
+
+if (state.status === "approval_required") {
+  // Show your waiting-room UI.
+}
+```
 
+Possible states include:
+
+```ts
 {
-  participants.map((participant) => (
-    <ParticipantTile
-      key={participant.id}
-      participant={participant}
-      isActiveSpeaker={activeSpeakerIds.includes(participant.id)}
-    />
-  ));
+  status: "ready";
+  reason: "admitted" | "open" | "moderator";
 }
 ```
 
-The tile should only render the state. It should not implement speaker detection itself.
+or:
 
-### Active speaker event
+```ts
+{
+  status: "approval_required";
+}
+```
 
-The SDK also exposes:
+### Moderator admission events
 
 ```tsx
 useMeeting({
-  onActiveSpeakersChanged: (participantIds) => {
-    console.log("Active speakers:", participantIds);
+  onEntryRequested: (request) => {
+    console.log("Join request:", request);
+  },
+  onEntryResponded: (payload, decision) => {
+    console.log("Admission decision:", decision);
   },
 });
 ```
 
-The event is useful for analytics or application-level side effects. For normal UI rendering, `activeSpeakerIds` is preferred.
+Approve:
 
-### Multiple speakers
+```tsx
+await approveJoinRequest(requestId);
+```
 
-The API intentionally supports multiple active speakers:
+Reject:
 
-```ts
-activeSpeakerIds: string[]
+```tsx
+await rejectJoinRequest(requestId);
 ```
 
-rather than:
+Cancel the current participant's request:
 
-```ts
-activeSpeakerId: string | null;
+```tsx
+await cancelJoinRequest();
 ```
 
-This allows the UI to handle overlapping speech naturally.
-
 ---
 
-# Screen sharing
+# 11. Moderation
 
-Start:
+Moderator/host applications can use the SDK's moderation methods where the connected participant has permission.
 
-```tsx
-const { startScreenShare } = useMeeting();
+Mute everyone:
 
-await startScreenShare();
+```tsx
+await muteAllAudio();
 ```
 
-Stop:
+Mute one participant:
 
 ```tsx
-const { stopScreenShare } = useMeeting();
-
-stopScreenShare();
+await muteParticipant(participantId);
 ```
 
-A participant's screen share is represented separately from their camera:
+Remove a participant:
 
-```ts
-participant.media?.screenStream;
-participant.media?.screenTrack;
-participant.media?.isScreenSharing;
+```tsx
+await removeParticipant(participantId);
 ```
 
-### Recommended UI
+Listen for permission changes:
 
-When someone shares their screen:
-
-```text
-┌──────────────────────────────────────────┐
-│                                          │
-│             SCREEN SHARE                 │
-│                                          │
-│                                          │
-└──────────────────────────────────────────┘
-
- ┌─────────┐ ┌─────────┐ ┌─────────┐
- │ Alice   │ │ Bob     │ │ Charlie │
- └─────────┘ └─────────┘ └─────────┘
+```tsx
+useMeeting({
+  onParticipantPermissionsChanged: (participantId, permissions) => {
+    console.log(participantId, permissions);
+  },
+});
 ```
 
-Do not treat the screen track as the participant's camera track.
+The server remains the authority for moderation permissions. The SDK should not be treated as the security boundary by itself.
 
 ---
 
-# Recording
+# 12. Persistent moderators
 
-DEFCOMM Meet recording is **server-side**.
+The SDK can retrieve and manage moderator assignments for a room.
 
-The browser does not use `MediaRecorder` to create the meeting recording.
+```tsx
+const { getModerators, addModerator, removeModerator } = useMeeting();
 
-Start recording:
+const moderators = await getModerators(roomCode);
 
-```tsx
-const { startRecording } = useMeeting();
+await addModerator(roomCode, userId);
 
-await startRecording();
+await removeModerator(roomCode, userId);
 ```
 
-Stop recording:
+Your backend/SFU should enforce which participant is allowed to perform each operation.
 
-```tsx
-const { stopRecording } = useMeeting();
+---
 
-await stopRecording();
-```
+# 13. Recording
 
-Get current recording status:
+Start:
 
 ```tsx
-const { getRecordingStatus } = useMeeting();
+await startRecording();
+```
 
-const result = await getRecordingStatus();
+Stop:
 
-console.log(result.recording);
+```tsx
+await stopRecording();
 ```
 
-A recording has:
+Check status:
 
-```ts
-type RecordingInfo = {
-  recording_id: string;
-  started_at?: string;
-  stopped_at?: string;
-  active?: boolean;
-};
+```tsx
+const status = await getRecordingStatus();
 ```
 
-## Recording events
-
-The SDK exposes:
+Listen for recording events:
 
 ```tsx
 useMeeting({
   onRecordingStarted: (recording) => {
     console.log("Recording started", recording);
   },
-
   onRecordingStopped: (recording) => {
     console.log("Recording stopped", recording);
   },
 });
 ```
 
-### Recommended DEFCOMM Meet UI
-
-The meeting application can place the recording control in the meeting navbar:
+---
 
-```text
-┌───────────────────────────────────────────────────────────────┐
-│ Engineering     🔴 REC                         Chat  People   │
-└───────────────────────────────────────────────────────────────┘
-```
+# 14. Transcripts and meeting summaries
 
-Host before recording:
+Retrieve transcript data:
 
-```text
-┌───────────────────────────────────────────────────────────────┐
-│ Engineering       [ Start Recording ]          Chat  People   │
-└───────────────────────────────────────────────────────────────┘
-```
-
-Host while recording:
+```tsx
+const response = await getTranscript(roomCode, sessionId);
 
-```text
-┌───────────────────────────────────────────────────────────────┐
-│ Engineering       🔴 Recording  [ Stop ]       Chat  People   │
-└───────────────────────────────────────────────────────────────┘
+console.log(response.segments);
 ```
 
-Other participants should see the recording status but should not automatically receive the host's recording controls.
-
-### Important recording rule
+Retrieve a meeting summary:
 
-Do not assume that clicking the button means recording has started.
-
-The UI should use:
+```tsx
+const response = await getMeetingSummary(roomCode, sessionId);
 
-```ts
-onRecordingStarted;
+console.log(response.summary);
 ```
 
-as the authoritative start event and:
+The SDK exposes transcript segments, transcript sessions, and meeting summaries as typed objects.
 
-```ts
-onRecordingStopped;
-```
+---
 
-as the authoritative stop event.
+# 15. Network quality
 
-Recommended state:
+Read network quality through the hook or subscribe to updates.
 
 ```tsx
-const [isRecording, setIsRecording] = useState(false);
-
 useMeeting({
-  onRecordingStarted: () => {
-    setIsRecording(true);
-  },
-
-  onRecordingStopped: () => {
-    setIsRecording(false);
+  onNetworkQuality: (quality) => {
+    console.log("Network quality:", quality.quality);
+    console.log("Packet loss:", quality.packet_loss_percent);
   },
 });
 ```
 
-This prevents the UI from claiming that a recording is active when the SFU has not confirmed it.
+Available quality values are normalized into values such as `excellent`, `good`, `fair`, and `poor`.
 
 ---
 
-# Private rooms and join approval
-
-Private rooms can require host approval.
+# 16. Connection state
 
-A host can listen for entry requests:
+Listen for the meeting connection lifecycle:
 
 ```tsx
 useMeeting({
-  onEntryRequested: (request) => {
-    console.log("Join request:", request);
+  onConnectionStateChanged: (state) => {
+    console.log("Connection:", state);
   },
 });
 ```
 
-Approve:
-
-```tsx
-const { approveJoinRequest } = useMeeting();
-
-approveJoinRequest(requestId);
-```
-
-Reject:
+The SDK exposes states including:
 
-```tsx
-const { rejectJoinRequest } = useMeeting();
-
-rejectJoinRequest(requestId);
+```text
+idle
+connecting
+joining
+waiting_approval
+connected
+reconnecting
+leaving
+disconnected
 ```
 
-The SDK exposes the approval flow, while the SFU remains authoritative for whether a participant is admitted.
+This is useful for displaying connecting/reconnecting UI and for deciding when meeting controls should be enabled.
 
 ---
 
-# Reconnection and participant presence
-
-The SDK distinguishes a temporary connection problem from an intentional leave.
-
-A participant can be:
+# 17. Pub/Sub
 
-```ts
-"connected";
-"reconnecting";
-"disconnected";
-```
-
-Recommended UI:
+The SDK includes typed Pub/Sub helpers for supported real-time topics.
 
 ```tsx
-if (participant.connectionState === "reconnecting") {
-  return <ReconnectingBadge />;
-}
-```
-
-A temporary network interruption should not immediately remove a participant from the UI.
-
-The SDK attempts to reconnect and resume the same logical participant session.
-
-Conceptually:
+const reactions = usePubSub("REACTION");
 
-```text
-Network interruption
-        ↓
-WebSocket disconnect
-        ↓
-reconnecting
-        ↓
-refresh/reconnect
-        ↓
-resume
-        ↓
-publisher/subscriber recreated
-        ↓
-media subscriptions restored
-        ↓
-connected
+reactions.publish({
+  emoji: "🎉",
+});
 ```
 
-This is why applications should render `reconnecting` as a state rather than treating every WebSocket close as a participant leaving.
+The currently exposed typed topics include:
 
----
+- `SECURE_CHAT`
+- `REACTION`
 
-# Stable participant identity
+You can also listen at the provider level:
 
-The SDK stores a stable browser participant ID using:
+```tsx
+const { onPubSubMessage } = useMeeting();
 
-```text
-defcomm:participant_id
+useEffect(() => {
+  return onPubSubMessage("REACTION", (message) => {
+    console.log(message.data.emoji);
+  });
+}, [onPubSubMessage]);
 ```
 
-This prevents a browser reload or temporary reconnect from unnecessarily generating a completely new participant identity.
-
-Room resume state uses:
-
-```text
-defcomm:sfu:resume:<roomCode>
-```
+---
 
-The SDK treats temporary network loss differently from an intentional `leave()`.
+# 18. A complete minimal meeting component
 
-Applications should use:
+This is a useful starting point for an application developer.
 
 ```tsx
-await leave();
-```
-
-for an intentional departure instead of manually closing the WebSocket.
-
----
-
-# Leaving a meeting
+"use client";
 
-Use:
+import { useMeeting, useParticipants } from "@defcomm/meetingsdk";
 
-```tsx
-const { leave } = useMeeting();
+export function Meeting() {
+  const participants = useParticipants();
 
-await leave();
-```
+  const {
+    join,
+    leave,
+    toggleMic,
+    toggleCam,
+    sendMessage,
+    startScreenShare,
+    stopScreenShare,
+  } = useMeeting({
+    onParticipantJoined: (participant) => {
+      console.log("Joined:", participant.name);
+    },
+    onParticipantLeft: (participant) => {
+      console.log("Left:", participant.name);
+    },
+    onChatMessage: (message) => {
+      console.log("Message:", message.text);
+    },
+    onConnectionStateChanged: (state) => {
+      console.log("State:", state);
+    },
+  });
 
-Do not implement the Leave button by doing:
+  return (
+    <div>
+      <button onClick={() => void join()}>Join</button>
+      <button onClick={() => toggleMic()}>Mic</button>
+      <button onClick={() => toggleCam()}>Camera</button>
+      <button onClick={() => void startScreenShare()}>
+        Share screen
+      </button>
+      <button onClick={() => stopScreenShare()}>Stop sharing</button>
+      <button
+        onClick={() =>
+          sendMessage({ message: "Hello from the meeting" })
+        }
+      >
+        Send message
+      </button>
+      <button onClick={() => leave()}>Leave</button>
 
-```ts
-websocket.close();
+      <p>Participants: {participants.length}</p>
+    </div>
+  );
+}
 ```
 
-or by directly destroying the SDK's PeerConnections.
-
-The SDK owns cleanup and the SFU leave lifecycle.
+For a production application, add your own pre-join screen, participant tiles, remote media rendering, chat panel, moderation UI, waiting room, error states, and responsive/mobile controls.
 
 ---
 
-# Room management
-
-Room management is available through `useMeeting()`:
+# 19. Recommended application structure
 
-```tsx
-const { createRoom, getRoom, deleteRoom } = useMeeting();
-```
+A maintainable application can be organized like this:
 
-### Create
-
-```tsx
-await createRoom({
-  name: "Product Review",
-  description: "Weekly product review",
-  capacity: 100,
-  is_private: false,
-});
+```text
+app/
+├── meeting/
+│   ├── page.tsx
+│   ├── MeetingShell.tsx
+│   ├── PreJoin.tsx
+│   ├── WaitingRoom.tsx
+│   ├── MeetingRoom.tsx
+│   ├── ParticipantGrid.tsx
+│   ├── ParticipantItem.tsx
+│   ├── ChatPanel.tsx
+│   ├── ControlPanel.tsx
+│   └── ModeratorPanel.tsx
+│
+├── api/
+│   └── meeting-token/
+│       └── route.ts
+│
+└── ...
 ```
 
-### Get
+A useful separation is:
 
-```tsx
-await getRoom(roomCode);
+```text
+Authentication/token creation  → your backend
+Room/meeting UI                 → your application
+Media/session transport         → @defcomm/meetingsdk
+SFU protocol                    → DefComm infrastructure
 ```
 
-### Delete
+---
 
-```tsx
-await deleteRoom(roomCode);
-```
+# 20. Browser permissions
 
----
+The SDK uses standard browser media APIs. Your application must run in a secure context such as HTTPS for production camera/microphone access.
 
-# Meeting preview
+Users may deny access to the camera or microphone. Always handle rejected media permissions and display a useful recovery message.
 
-The SDK exports:
+Example:
 
 ```tsx
-import { useMeetingPreview } from "@afosecure/meetingsdk";
+try {
+  await join();
+} catch (error) {
+  console.error("Unable to join:", error);
+}
 ```
 
-Use preview when the application needs a pre-join screen for room information or local setup.
+Common browser requirements include:
 
-The actual live meeting begins when `join()` connects the SDK to the SFU.
+- HTTPS in production
+- Camera permission for video
+- Microphone permission for audio
+- User interaction may be required before playing notification sounds
+- Screen sharing requires browser support and user permission
 
 ---
 
-# Chat
-
-The SDK exposes the current chat interface through:
+# 21. Event design guidance
 
-```tsx
-const { sendMessage } = useMeeting();
-```
+Use SDK events for one-time application reactions and hooks/state for rendering.
 
-Send:
+### Good use of events
 
 ```tsx
-sendMessage({
-  message: "Hello everyone",
+useMeeting({
+  onParticipantJoined: () => playSound("/audio/join.mp3"),
+  onParticipantLeft: () => showToast("Participant left"),
+  onChatMessage: () => playSound("/audio/message.mp3"),
 });
 ```
 
-The input type is:
-
-```ts
-type ChatInput = {
-  message: string;
-  reply_to?: {
-    id: string;
-    name: string;
-  } | null;
-  target?: string | null;
-};
-```
-
-The SDK also exposes:
+### Good use of state
 
 ```tsx
-usePubSub("SECURE_CHAT");
+const participants = useParticipants();
+const { messages, localParticipant } = useMeeting();
 ```
 
-when an application wants the Pub/Sub style interface.
-
-Example:
-
-```tsx
-const chat = usePubSub("SECURE_CHAT");
-
-chat.publish({
-  message: "Hello",
-});
-```
+This distinction keeps UI rendering predictable and avoids implementing your own event-detection logic in every application.
 
 ---
 
-# Error handling
+# 22. Error handling
 
-Use the SDK error event:
+Subscribe to the normalized SDK error callback:
 
 ```tsx
 useMeeting({
   onError: (error) => {
-    console.error(error);
+    console.error(error.code, error.message);
   },
 });
 ```
 
-Errors contain:
+SDK errors include a stable `code`, a human-readable `message`, and additional context where available.
+
+Example shape:
 
 ```ts
-type SDKError = {
+{
   code: string;
   message: string;
   roomId?: string | null;
   participantId?: string;
-  raw?: any;
+  raw?: unknown;
   recoverable?: boolean;
-};
-```
-
-A useful UI rule is:
-
-```text
-recoverable = true
-    ↓
-show retry/reconnecting UI
-
-recoverable = false
-    ↓
-show a blocking error or return to the appropriate screen
-```
-
-Always wrap user-triggered asynchronous operations when appropriate:
-
-```tsx
-async function handleJoin() {
-  try {
-    await join();
-  } catch (error) {
-    console.error("Unable to join meeting", error);
-  }
 }
 ```
 
----
-
-# Recommended DEFCOMM Meet structure
-
-A production DEFCOMM Meet page can be structured like this:
-
-```text
-MeetingPage
-│
-└── MeetingProvider
-    │
-    ├── MeetingNav
-    │   ├── Meeting name
-    │   ├── Recording state/control
-    │   ├── Chat
-    │   └── Participants
-    │
-    ├── MeetingStage
-    │   │
-    │   ├── ScreenShareStage
-    │   │
-    │   └── ParticipantGrid
-    │       └── ParticipantTile[]
-    │           ├── Video
-    │           ├── Name
-    │           ├── Mic state
-    │           ├── Camera state
-    │           ├── Active speaker state
-    │           └── Reconnecting state
-    │
-    └── MeetingControls
-        ├── Microphone
-        ├── Camera
-        ├── Screen share
-        └── Leave
-```
-
-The application should consume SDK state rather than recreating WebRTC state locally.
+Applications should show user-friendly UI and log the technical error details for debugging.
 
 ---
 
-# Recommended participant tile
-
-A participant tile should combine the SDK's states:
+# 23. Leaving a meeting
 
 ```tsx
-function ParticipantTile({ participant }: { participant: Participant }) {
-  const { activeSpeakerIds } = useMeeting();
-
-  const isSpeaking = activeSpeakerIds.includes(participant.id);
-
-  const isReconnecting = participant.connectionState === "reconnecting";
-
-  const micEnabled = participant.media?.micEnabled ?? false;
-
-  const camEnabled = participant.media?.camEnabled ?? false;
-
-  const isScreenSharing = participant.media?.isScreenSharing ?? false;
-
-  return (
-    <div
-      className={
-        isSpeaking ? "participant-tile active-speaker" : "participant-tile"
-      }
-    >
-      {isReconnecting && <div className="reconnecting">Reconnecting...</div>}
+const { leave } = useMeeting();
 
-      {/* Remote/local media */}
+leave();
+```
 
-      <div className="participant-name">{participant.name}</div>
+You can also listen for the lifecycle event:
 
-      <div className="participant-status">
-        {!micEnabled && <span>Muted</span>}
-        {!camEnabled && <span>Camera off</span>}
-        {isScreenSharing && <span>Sharing</span>}
-      </div>
-    </div>
-  );
-}
+```tsx
+useMeeting({
+  onMeetingLeft: () => {
+    console.log("Meeting ended for this client");
+  },
+});
 ```
 
-The important design principle is:
+---
 
-```text
-SDK state → UI
-```
+# 24. Security recommendations
 
-not:
+The SDK is a client library. Security-sensitive authorization must remain enforced by the backend/SFU.
 
-```text
-UI → WebRTC internals
-```
+Recommended production practices:
+
+1. Never expose server API secrets in frontend JavaScript.
+2. Issue room-scoped participant credentials from your backend.
+3. Enforce room membership and moderation permissions on the server.
+4. Do not trust a client-provided `isHost` or `isModerator` value as authorization.
+5. Keep meeting tokens short-lived or otherwise appropriately scoped.
+6. Validate all room and participant operations server-side.
+7. Rate-limit sensitive endpoints such as token creation, join requests, moderation, and recording operations.
+8. Use HTTPS/WSS in production.
 
 ---
 
-# Public exports
+# 25. TypeScript
 
-The SDK currently exports:
+The SDK exports the primary public types used by applications, including:
 
 ```ts
-// Core
-VideoSDKCore;
-SFUClient;
-MeetingState;
-ActiveSpeakerDetector;
-
-// React
-MeetingProvider;
-useMeetingContext;
-useMeeting;
-useParticipants;
-useLocalParticipant;
-useRemoteMedia;
-useMeetingPreview;
-
-// Types
-Participant;
-ChatInput;
-RecordingInfo;
-MeetingConfig;
-SFUConnectionState;
-TrackInfo;
-ParticipantInfo;
-```
-
-Most DEFCOMM Meet application developers should only need the React API:
+Participant
+ChatInput
+ChatMessage
+MeetingConfig
+Reaction
+RecordingInfo
+SFUConnectionState
+JoinState
+NetworkQuality
+TranscriptSegment
+TranscriptSession
+TranscriptResponse
+MeetingSummary
+PubSubTopic
+PubSubMessage
+```
+
+For example:
 
-```tsx
-import {
-  MeetingProvider,
-  useMeeting,
-  useParticipants,
-  useLocalParticipant,
-  useRemoteMedia,
-  useMeetingPreview,
-} from "@afosecure/meetingsdk";
+```ts
+import type {
+  Participant,
+  ChatMessage,
+  MeetingConfig,
+} from "@defcomm/meetingsdk";
 ```
 
-Direct use of `VideoSDKCore` or `SFUClient` is intended for advanced integrations.
-
 ---
 
-# Important implementation rules
+# 26. Full sample application
 
-## 1. Do not build a mesh
+The recommended way to understand the SDK end-to-end is to compare your integration with the DefComm Meet reference application:
 
-Do not create:
+**https://meet.defcomm.ng**
 
-```text
-Participant A ↔ Participant B
-Participant A ↔ Participant C
-Participant B ↔ Participant C
-```
+The sample demonstrates how the SDK can be composed into a complete product rather than exposing a single monolithic meeting component.
 
-The SDK is designed for:
+Typical flow:
 
 ```text
-Participants
-     │
-     ▼
- DEFCOMM SFU
-     │
-     ▼
-Participants
-```
-
----
-
-## 2. Do not manipulate the SDK's PeerConnections
-
-Applications should not directly access:
-
-```ts
-RTCPeerConnection;
-RTCSessionDescription;
-RTCIceCandidate;
-RTCRtpSender;
+Landing / authentication
+        ↓
+Fetch or create room
+        ↓
+Fetch participant meeting token
+        ↓
+Pre-join camera + microphone selection
+        ↓
+Join-state check
+        ├── ready ───────────────→ Meeting room
+        │
+        └── approval_required ───→ Waiting room
+                                      ↓
+                                  approved
+                                      ↓
+                                  Meeting room
 ```
 
-for normal meeting functionality.
-
-The SDK owns those objects.
-
 ---
 
-## 3. Do not infer remote mute state from media silence
+# 27. Troubleshooting
 
-Use:
+## Camera or microphone list is empty
 
-```ts
-participant.media?.micEnabled;
-participant.media?.camEnabled;
-```
-
-The SFU signaling state is authoritative.
+Call the media permission flow first, then enumerate devices. Browser privacy rules can hide device labels until permission has been granted.
 
----
+## Camera changes but the preview does not update
 
-## 4. Do not implement speaker detection in the application
+The application should render the current local `MediaStream`/track rather than caching the first stream forever. Use the SDK's local participant stream and re-render/rebind the `<video>` element when the stream changes.
 
-Use:
+## Notification sound does not play
 
-```tsx
-const { activeSpeakerIds } = useMeeting();
-```
+Browsers can block autoplay. Trigger sounds after a user interaction, or catch the rejected `audio.play()` promise.
 
-The SDK owns audio analysis and active-speaker state.
+## Participant joined callback fires unexpectedly during reconnect
 
----
+Treat the lifecycle event as a participant lifecycle event, not as a low-level WebSocket reconnect notification. Use `onConnectionStateChanged` for connection/reconnection UI.
 
-## 5. Do not use browser recording for meeting recording
+## Private-room join returns `approval_required`
 
-Use:
+Show the application's waiting-room UI and wait for the admission decision before treating the participant as fully admitted.
 
-```tsx
-await startRecording();
-await stopRecording();
-```
+## `useMeeting()` throws an error about context
 
-Meeting recording is server-side.
+Make sure the component using `useMeeting()` is rendered inside `MeetingProvider`.
 
 ---
 
-## 6. Do not manually close the WebSocket to leave
+# 28. API summary
 
-Use:
+### Provider
 
 ```tsx
-await leave();
+<MeetingProvider config={...}>
+  {children}
+</MeetingProvider>
 ```
 
-This allows the SDK to perform the intended cleanup and leave lifecycle.
-
----
-
-## 7. Do not immediately remove reconnecting participants
-
-Use:
+### Hooks
 
 ```ts
-participant.connectionState;
+useMeeting()
+useParticipants()
+useLocalParticipant()
+useRemoteMedia()
+useMeetingPreview()
+useNetworkQuality()
+usePubSub()
 ```
 
-and show:
+### Core meeting actions
 
-```text
-Reconnecting...
+```ts
+join()
+leave()
+toggleMic()
+toggleCam()
+startScreenShare()
+stopScreenShare()
+sendMessage()
+sendReaction()
 ```
 
-during transient failures.
-
----
-
-## 8. Keep screen share separate from camera
-
-Use:
+### Devices
 
 ```ts
-participant.media.screenStream;
-participant.media.screenTrack;
-participant.media.isScreenSharing;
+getMediaDevices()
+selectCamera()
+selectMicrophone()
 ```
 
-instead of replacing the camera stream.
-
----
-
-# Build and publish
+### Admission and moderation
 
-Install dependencies:
-
-```bash
-npm install
+```ts
+getJoinState()
+approveJoinRequest()
+rejectJoinRequest()
+cancelJoinRequest()
+muteAllAudio()
+muteParticipant()
+removeParticipant()
+getModerators()
+addModerator()
+removeModerator()
 ```
 
-Build:
+### Recording and meeting data
 
-```bash
-npm run build
+```ts
+startRecording()
+stopRecording()
+getRecordingStatus()
+getTranscript()
+getMeetingSummary()
 ```
 
-Before publishing a new SDK version, verify:
+### Lifecycle events
 
-```text
-✓ TypeScript build succeeds
-✓ React integration works
-✓ Join/leave works
-✓ Camera works
-✓ Microphone works
-✓ Remote audio/video works
-✓ Screen sharing works
-✓ Active speaker detection works
-✓ Reconnection works
-✓ Private-room admission works
-✓ Recording start/stop works
-✓ Recording callbacks fire
-✓ Production WSS/API configuration works
+```ts
+onParticipantJoined
+onParticipantLeft
+onChatMessage
+onConnectionStateChanged
+onMeetingLeft
+onError
+onEntryRequested
+onEntryResponded
+onJoinRequestCanceled
+onParticipantRemoved
+onParticipantPermissionsChanged
+onTrackStateChanged
+onRecordingStarted
+onRecordingStopped
+onReaction
+onActiveSpeakersChanged
+onNetworkQuality
 ```
 
 ---
 
-# DEFCOMM Meet integration principle
+# 29. Support and examples
 
-The purpose of this SDK is to make the DEFCOMM meeting experience feel like a single integrated platform.
+For the complete working example, visit:
 
-A consumer should be able to think in terms of:
+**https://meet.defcomm.ng**
 
-```tsx
-const {
-  join,
-  leave,
-  toggleMic,
-  toggleCam,
-  startScreenShare,
-  stopScreenShare,
-  startRecording,
-  stopRecording,
-  participants,
-  activeSpeakerIds,
-} = useMeeting();
-```
+The reference application is the recommended starting point for seeing how the SDK APIs fit together in a production-style meeting interface.
 
-rather than:
+---
 
-```text
-WebSocket messages
-SDP offers/answers
-ICE candidates
-PeerConnections
-RTP tracks
-SSRCs
-audio analysers
-reconnect timers
-resume tokens
-```
-
-Those implementation details belong inside the SDK/SFU layer.
-
-**DEFCOMM Meet owns the meeting experience.  
-The SDK owns the browser media experience.  
-The SFU owns the authoritative meeting/media infrastructure.**
+## License
+
+See the package/repository license for the applicable terms.