Comment on page
useLocalMedia
The
useLocalMedia
hook enables preview and selection of local devices (camera & microphone) prior to establishing a connection within a Whereby room. Use this hook to build rich pre-call experiences, allowing end users to confirm their device selection up-front. This hook works seamlessly with the Broken link hook.
useLocalMedia(mediaStreamConstraints: MediaStreamConstraints): Object | null
Parameter | Required | Type | Description |
---|---|---|---|
mediaStreamConstraints | ✅ | Options to use for initializing local media |
The hook returns a LocalMediaReference object with the following properties.
Property | Type | Description |
---|---|---|
state | Object representing the state of local media | |
actions | Object representing the available actions on local media |
The state of local media
Property | Type | Description |
---|---|---|
currentCameraDeviceId | string | undefined | The Id of the current camera device |
currentMicrophoneDeviceId | string | undefined | The id of the current microphone device |
cameraDeviceError | unkown | |
cameraDevices | List of the available camera devices | |
isSettingCameraDevice | boolean | |
isSettingMicrophoneDevice | boolean | |
isStarting | boolean | |
localStream | The stream of local media (camera & microphone) | |
microphoneDeviceError | unknown | |
microphoneDevices | List of the available microphone devices | |
speakerDevices | List of the available speaker devices | |
startError | unknown | |
The actions property contains a map of functions which can be invoked to perform an action on local media. All these functions are sync and return
void
, and you should rely on the state to render the effect of their invocation.Name | Parameters | Description |
---|---|---|
setCameraDevice | (deviceId: string) => void | Change the current camera device |
setMicrophoneDevice | (deviceId: string) => void | Change the current microphone device |
toggleCameraEnabled | (enabled?: boolean) => void | Change the state of your camera. Omitting the enabled parameter toggles the current value |
toggleMicrophoneEnabled | (enabled?: boolean) => void | Change the state of your microphone. Omitting the enabled parameter toggles the current value |
import { useLocalMedia, VideoView } from "@whereby.com/browser-sdk/react";
function MyPreCallUX() {
const localMedia = useLocalMedia({ audio: false, video: true });
const { currentCameraDeviceId, cameraDevices, localStream } = localMedia.state;
const { setCameraDevice, toggleCameraEnabled } = localMedia.actions;
return <div className="preCallView">
{ /* Render any UI, making use of state */ }
{ cameraDevices.map((d) => (
<p
key={d.deviceId}
onClick={() => {
if (d.deviceId !== currentCameraDeviceId) {
setCameraDevice(d.deviceId);
}
}}
>
{d.label}
</p>
)) }
<VideoView muted stream={localStream} />
</div>;
}
Last modified 26d ago