Comment on page
useRoomConnection
The
useRoomConnection
hook provides the ability to connect participants in a given room, subscribe to state updates, and perform actions on the connection like toggling the camera or microphone.useRoomConnection(roomUrl: string, roomConnectionOptions: RoomConnectionOptions): Object | null
Parameter | Required | Type | Description |
---|---|---|---|
roomUrl | ✅ | string | |
roomConnectionOptions | ✅ | Additional options for the room connection |
The hook returns a
RoomConnectionReference
object with the following properties.Property | Type | Description |
---|---|---|
state | Object representing the state of the room | |
actions | Object representing the available actions in the room | |
components | Object representing the pre-bound components available for the room |
The current state of the room. Use this state to render your custom video experience.
Property | Type | Description |
---|---|---|
chatMessages | The chat messages which have been sent in the room since connecting. | |
cloudRecording | Indicates whether cloud recording is active in the room. | |
connectionStatus | Overall status of the room connection | |
localScreenshareStatus | Status of your local screen share | |
localParticipant | A representation of the local participant in the call (you) | |
remoteParticipants | A list of the remote participants in the room | |
screenshares | List of active screenshares in the room | |
liveStream | Set if live stream is enabled for the room | |
waitingParticipants | A list of participants waiting to enter a locked room. |
The actions property contains a map of functions which can be invoked to perform an action in the room. All these functions are sync and return
void
, and you should rely on the state to render the effect of their invocation.Property | Type | Description |
---|---|---|
sendChatMessage | (text: string) => void | Send a chat message to the room |
knock | () => void | Let the room host know that the local participant is waiting and wants to join |
setDisplayName | (displayName: string) => void | Change your display name |
toggleCamera | (enabled?: boolean) => void | Change the state of your camera |
toggleMicrophone | (enabled?: boolean) => void | Change the state of your microphone |
acceptWaitingParticipant | (participantId: string) => void | Accept waiting participant |
rejectWaitingParticipant | (participantId: string) => void | Reject waiting participant |
startScreenshare | () => void | Start screen share |
stopScreenshare | () => void | Stop screen share |
Components are JSX elements bound to the room connection to make it easier for you to render
Property | Type | Description |
---|---|---|
VideoView | A React component to be used for rendering the participant video and audio. |
import { useRoomConnection } from "@whereby.com/browser-sdk/react";
function MyCallUX( { roomUrl, localStream }) {
const { state, actions, components } = useRoomConnection(
"<room_url>"
{
localMediaOptions: {
audio: true,
video: true,
}
}
);
const { connectionState, remoteParticipants } = state;
const { toggleCamera, toggleMicrophone } = actions;
const { VideoView } = components;
return <div className="videoGrid">
{ /* Render any UI, making use of state */ }
{ remoteParticipants.map((p) => (
<VideoView key={p.id} stream={p.stream} />
)) }
</div>;
}
Last modified 20d ago