ReactJS device selection and effects

Use ReactJS 4.3.7 room controls to select camera and microphone inputs, apply a virtual background, and present translation configured for the room.

Select microphone or camera

The supplied MediaSettingsModal exposes the room's media settings. For a custom control, call the exported switch helpers with the current room options:

import {switchUserAudio, switchUserVideo} from 'mediasfu-reactjs';

type AudioSwitchOptions = Parameters<typeof switchUserAudio>[0];
type VideoSwitchOptions = Parameters<typeof switchUserVideo>[0];

export function changeMicrophone(options: AudioSwitchOptions) {
  return switchUserAudio(options);
}

export function changeCamera(options: VideoSwitchOptions) {
  return switchUserVideo(options);
}

The options include the live room parameters; use the bag from the active room rather than recreating transport state. switchUserAudio can also receive the SDK's audio-processing options. Ask for permission before relying on device labels, and confirm that the replacement producer is active before reporting success.

Virtual backgrounds and translation

Use the supplied BackgroundModal or ModernBackgroundModal and the room's background launcher. The SDK manages the processed camera stream as part of the room flow. Offer None as a fallback and let the room restore the unprocessed camera if processing cannot start. Processing in a hidden tab is enabled by default where implemented; it can be configured, and browsers may still throttle background tabs.

The supplied modern room includes translation controls for a room configured for translation. The ReactJS package root does not provide a standalone translation-provider setup; keep a custom experience within the documented room surface rather than importing implementation files.

If a device or effect fails

Keep the call usable after permission denial, device removal, or processor failure. Let the user retry, switch back to the system default, or turn the effect off. Test real camera and microphone permissions in the browsers your app supports; a rendered control alone does not prove capture or remote playback.

Continue with ReactJS media recovery and ReactJS media rendering.