The MeetingAppProvider component provides a centralized React Context for managing the state of a video meeting application. By wrapping your application in this provider, you can access and update shared states such as selected media devices, permission statuses, and UI modes using the useMeetingAppContext hook.
Available States:
selectedMic: The currently selected microphone { id, label }.selectedWebcam: The currently selected webcam { id, label }.selectedSpeaker: The currently selected speaker { id, label }.isCameraPermissionAllowed: Boolean or null indicating camera permission status.isMicrophonePermissionAllowed: Boolean or null indicating microphone permission status.raisedHandsParticipants: An array of participants who have raised their hands.sideBarMode: The current mode for the sidebar.pipMode: Boolean indicating if Picture-in-Picture mode is active.
Available Setters:
setSelectedMic, setSelectedWebcam, setSelectedSpeakersetIsCameraPermissionAllowed, setIsMicrophonePermissionAllowedsetSideBarMode, setPipModesetRaisedHandsParticipants
import { MeetingAppProvider, useMeetingAppContext } from './MeetingAppContextDef';
const MyComponent = () => {
const {
selectedMic,
setSelectedMic,
pipMode,
setPipMode
} = useMeetingAppContext();
return (
<div>
<p>Current Mic: {selectedMic.label}</p>
<button onClick={() => setPipMode(!pipMode)}>
Toggle PiP: {pipMode ? 'ON' : 'OFF'}
</button>
</div>
);
};
// Wrap your app
const App = () => (
<MeetingAppProvider>
<MyComponent />
</MeetingAppProvider>
);
