Skip to main content


This React component lets you join and manage SignalWire Video rooms. To use this component, you need a Video Room Token obtained from the REST API. This is different from a Video Conference Token.


import { Video } from "@signalwire-community/react";


tokenstringThe Video Token to use to connect to the room.
onRoomReady(roomSession) => voidCallback fired when a RoomSession object has been constructed (before the room is joined, which will happen automatically).
onLayoutChanged(e) => voidCallback for the layout.changed event.
onMemberJoined(e) => voidCallback for the member.joined event.
onMemberLeft(e) => voidCallback for the member.left event.
onMemberTalking(e) => voidCallback for the member.talking event.
onMemberUpdated(e) => voidCallback for the member.updated event.
onMemberListUpdated(e) => voidCallback for the memberList.updated event.
onPlaybackEnded(e) => voidCallback for the playback.ended event.
onPlaybackStarted(e) => voidCallback for the playback.started event.
onPlaybackUpdated(e) => voidCallback for the playback.updated event.
onRecordingEnded(e) => voidCallback for the recording.ended event.
onRecordingStarted(e) => voidCallback for the recording.started event.
onRecordingUpdated(e) => voidCallback for the recording.updated event.
onRoomJoined(e) => voidCallback for the room.joined event.
onRoomLeft(e) => voidCallback for the room.left event.
onRoomUpdated(e) => voidCallback for the room.updated event.


Example usage:

import React from "react";
import { Video } from "@signalwire-community/react";

export default function App() {
return (
onRoomReady={(roomSession) =>
console.log("Raw room session object:", roomSession)
onMemberTalking={(e) => console.log(`Member ${} is talking.`)}
onMemberJoined={(e) => console.log(`${} joined the room!`)}

Calling a method (e.g. for muting the mic):

import React from "react";
import { Video } from "@signalwire-community/react";

export default function App() {
const [roomSession, setRoomSession] = React.useState();

return (
<Video token="eyJ0eXAiOiJWUlQiLCJj..." onRoomReady={setRoomSession} />

<button onClick={() => roomSession?.audioMute()}>Mute</button>