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 | nullParameter | 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