This indicates the participant ID of the user who is currently speaking. If no participant is actively speaking, the value is null.
This represents the current state of the HLS stream.
This represents the URLs associated with the ongoing HLS stream.
playbackHlsUrl or livestreamUrl instead.Note
downstreamUrlis deprecated and should no longer be used.
This represents whether the meeting is currently being recorded.
This represents the current state of the livestream.
This represents whether the local participant’s microphone is enabled.
This represents the local Participant (you) who joined the meeting.
This represents whether the local participant’s screen share is enabled.
This represents whether the local participant’s webcam is enabled.
This represents the underlying Meeting instance.
This represents the unique ID of the meeting that the participant has joined.
This represents a map of all remote participants currently in the meeting.
This map does not include the local participant.
This represents a map of all participants currently pinned in the meeting.
cam) and/or screen share (share) is pinned.This indicates the participant ID of the user who is currently sharing their screen in the meeting. If no one is presenting, the value is null.
This represents the current state of the meeting recording.
This represents the currently selected camera device used during the meeting,returned as a CameraDeviceInfo object containing details about the active camera.
This represents the currently selected microphone device used during the meeting,returned as a MicrophoneDeviceInfo object containing details about the active microphone.
This represents the current state of real-time transcription.
Either:
deviceId string of the microphone to switch to, orMediaStream to be used as the audio input source.Info
Important changes introduced in React SDK v0.2.0:
CONFERENCEhas been replaced withSEND_AND_RECVVIEWERhas been replaced withSIGNALLING_ONLY
Events associated with changeMode():
Either:
deviceId of the webcam to switch to, orMediaStream to be used as the video source.Events associated with disableScreenShare():
null as the presenter.Events associated with disableWebcam():
Events associated with enableScreenShare():
presenterId.OptionalcustomScreenShareTrack: MediaStreamAn optional custom screen share track to be used instead of the default one.
To learn more checkout this reference
Events associated with enableWebcam():
OptionalcustomVideoTrack: MediaStreamAn optional custom video track to be used instead of the default one.
To learn more, checkout this reference
end() removes all participants, including the local participant, and permanently terminates the meeting.Events associated with end():
<MeetingProvider>, if joinWithoutUserInteraction is set to true, participant will automatically join the meeting. If it is false explicity call for join() should be made.Events associated with join():
Events associated with leave():
Events associated with muteMic():
Optionalkind: "audio" | "video" | "share" | "shareAudio" | "all"Specifies which type of media stream should be paused. If not provided, all media streams (audio, video, and screen share) will be paused.
Optionalkind: "audio" | "video" | "share" | "shareAudio" | "all"Specifies which type of media stream should be resumed.If not provided, all media streams (audio, video, and screen share) will be resumed.
The data to be sent.
string, Blob, ArrayBuffer, ArrayBufferViewOptionaloptions: { reliability?: "RELIABLE" | "UNRELIABLE" }Optionalreliability?: "RELIABLE" | "UNRELIABLE"Determines how the message is delivered:
Optionalconfig: {Configuration used to control the HLS stream.
Optionallayout?: {OptionalgridSize?: numberSpecifies the maximum number of participants shown in the grid.
Optionalpriority?: "SPEAKER" | "PIN"Determines participant priority when composing the layout.
Optionaltype?: "GRID" | "SPOTLIGHT" | "SIDEBAR"Defines the layout used in the HLS stream.
Optionalmode?: "audio" | "video-and-audio"Determines whether the stream includes video and audio or audio only.
Optionalquality?: "low" | "med" | "high"Defines the output video quality of the HLS stream.
Optionalrecording?: { enabled: boolean }This can be used to enable or disable recording.
Optionaltheme?: "DEFAULT" | "DARK" | "LIGHT"Defines the visual theme of the HLS stream.
Optionaltranscription: { enabled: boolean; summary?: { enabled: boolean; prompt?: string } }Configuration for post-meeting transcription and summary generation.
Enables or disables transcription.
Optionalsummary?: { enabled: boolean; prompt?: string }Enables or disables summary generation.
Optionalprompt?: stringCustom prompt used for generating the summary.
An array of RTMP output destinations where the livestream will be broadcast.
Optionalconfig: {Configuration options for the RTMP livestream.
Optionallayout?: {OptionalgridSize?: numberSpecifies the maximum number of participants displayed in the grid.
Optionalpriority?: "SPEAKER" | "PIN"Determines participant priority when composing the livestream layout.
Optionaltype?: "GRID" | "SPOTLIGHT" | "SIDEBAR"Defines the layout used for the livestream.
Optionalrecording?: { enabled: boolean }This can be used to enable or disable recording.
Optionaltheme?: "DEFAULT" | "DARK" | "LIGHT"Defines the color theme of the livestream.
const outputs = [
{
url: "rtmp://a.rtmp.youtube.com/live2",
streamKey: "<STREAM_KEY>",
},
{
url: "rtmps://",
streamKey: "<STREAM_KEY>",
},
];
const config = {
layout: {
type: "SPOTLIGHT",
priority: "PIN",
gridSize: 9,
},
theme: "DEFAULT",
recording: {
enabled: true,
},
};
const { startLiveStream } = useMeeting();
startLiveStream(outputs, config, transcription);
This method can be used to start recording the meeting.
All participants, including the local participant, will receive the RECORDING_STARTING event state in the onRecordingStateChanged event.
OptionalwebhookUrl: stringWebhook URL triggered when the recording state changes.
OptionalawsDirPath: stringPath to the directory in your S3 bucket where recordings are stored.
Optionalconfig: {Recording configuration options.
Defines how participants are arranged in the recording.
Maximum number of participants displayed simultaneously.
Determines participant prioritization.
Layout type for the recording.
Defines whether the recording includes video or audio only.
Controls the output quality of the recording.
Visual theme applied to the recording.
Optionaltranscription: {Configuration for post-recording transcription and summary generation.
Enables or disables transcription.
Optionallanguage?: stringOptionalsummary?: { enabled: boolean; prompt?: string }Enables or disables summary generation.
Optionalprompt?: stringCustom prompt used for generating transcription summaries.
const webhookUrl = "https://webhook.your-api-server.com";
const awsDirPath = "/meeting-recordings/";
const config = {
layout: {
type: "SPOTLIGHT",
priority: "PIN",
gridSize: 9,
},
theme: "DEFAULT",
};
const transcription = {
enabled: true,
summary: {
enabled: true,
},
};
const { startRecording } = useMeeting();
startRecording(webhookUrl, awsDirPath, config, transcription);
This method can be used to stop the ongoing meeting recording.
All participants, including the local participant, will receive the RECORDING_STOPPING event state in the onRecordingStateChanged event.
The ID of the meeting to switch to.
Optionaltoken?: stringAuthentication token for the destination meeting.
This method can be used to toggle the local participant’s microphone
Events associated with toggleMic():
OptionalcustomAudioTrack: MediaStreamAn optional custom audio track to be used instead of the default one.
To learn more, checkout this reference.
Events associated with toggleScreenShare():
OptionalcustomScreenShareTrack: MediaStreamAn optional custom screen share track to be used instead of the default one.
To learn more checkout this reference.
Events associated with toggleWebcam():
OptionalcustomVideoTrack: MediaStreamAn optional custom video track to be used instead of the default one.
To learn more, checkout this reference
Events associated with unmuteMic():
OptionalcustomAudioTrack: MediaStreamAn optional custom audio track to be used instead of the default one.
To learn more, checkout this reference
ID of the participant who sent the message.
The received message payload.
string for text messagesUint8Array for binary dataIndicates whether the message delivery was reliable or unreliable.
Timestamp (in milliseconds since epoch) when the message was sent.
function onData({ payload, from, timestamp, reliability }){
if (typeof payload === "string") {
console.log(`Text message from ${from}: ${payload}`);
} else {
console.log(`Binary data from ${from}:`, payload);
}
console.log(`Received at: ${new Date(timestamp).toLocaleTimeString()}`);
console.log(`Reliability: ${reliability}`);
};
const {
meetingId
...
} = useMeeting({
onData,
...
});
ask_join permission.allow_join permission.Call this function to allow the participant to join the meeting.
Call this function to deny the participant’s request.
Display name of the participant requesting to join.
Unique ID of the participant requesting to join the meeting.
function onEntryRequested(data) {
const { participantId, name, allow, deny } = data;
console.log(`${name} requested to join the meeting.`);
// If you want to allow the entry request
allow();
// if you want to deny the entry request
deny();
}
const {
meetingId
...
} = useMeeting({
onEntryRequested,
...
});
join() request is responded to with an allow or deny decision.This event is emitted to:
allow_join permission.ID of the participant who requested to join the meeting.
The final decision for the join request.
Possible values:
"allowed" – The participant was allowed to join."denied" – The participant was denied entry.Numeric error code representing the type of error.
Human-readable description of the error.
Live HLS without playback support
Live HLS with playback support
Possible values:
HLS_STARTING - Hls is in starting phase and hasn't started yet.HLS_STARTED- Hls has started successfully will return playbackHlsUrl and livestreamUrl.HLS_PLAYABLE - Hls has started and the playbackHlsUrl and livestreamUrl is now playable.HLS_STOPPING - Hls is in stopping phase and hasn't stopped yet.HLS_STOPPED- Hls has stopped successfully.import { Constants, useMeeting } from "@videosdk.live/react-sdk";
function onHlsStateChanged(data) {
const { status } = data;
if (status === Constants.hlsEvents.HLS_STARTING) {
console.log("Meeting Hls is starting");
} else if (status === Constants.hlsEvents.HLS_STARTED) {
console.log("Meeting Hls is started");
} else if (status === Constants.hlsEvents.HLS_PLAYABLE) {
// on hlsStateChanged started you will receive playbaclHlsUrl and livestreamUrl.
const {playbackHlsUrl} = data;
console.log("Meeting Hls is playable");
} else if (status === Constants.hlsEvents.HLS_STOPPING) {
console.log("Meeting Hls is stopping");
} else if (status === Constants.hlsEvents.HLS_STOPPED) {
console.log("Meeting Hls is stopped");
} else {
//
}
}
const {
meetingId
...
} = useMeeting({
onHlsStateChanged,
...
});
Possible values:
LIVESTREAM_STARTING - Livestream is in starting phase and hasn't started yet.LIVESTREAM_STARTED - Livestream has started successfully.LIVESTREAM_STOPPING - Livestream is in stopping phase and hasn't stopped yet.LIVESTREAM_STOPPED - Livestream has stopped successfully.import { Constants, useMeeting } from "@videosdk.live/react-sdk";
function onLivestreamStateChanged(data) {
const { status } = data;
if (status === Constants.livestreamEvents.LIVESTREAM_STARTING) {
console.log("Meeting livestream is starting");
} else if (status === Constants.livestreamEvents.LIVESTREAM_STARTED) {
console.log("Meeting livestream is started");
} else if (status === Constants.livestreamEvents.LIVESTREAM_STOPPING) {
console.log("Meeting livestream is stopping");
} else if (status === Constants.livestreamEvents.LIVESTREAM_STOPPED) {
console.log("Meeting livestream is stopped");
} else {
//
}
}
const {
meetingId
...
} = useMeeting({
onLivestreamStateChanged,
});
The Participant instance who is now the main participant.
Description of the error.
ID of the meeting where the error occurred.
Call this function to accept the media relay request.
Display name of the participant requesting the media relay.
ID of the meeting from which the media relay request originated.
ID of the participant who initiated the media relay request.
Call this function to reject the media relay request.
ID of the participant who decided the decision.
Decision taken for the request.
ID of the participant who responded to the media relay request.
ID of the meeting where the media relay has started.
ID of the meeting where the media relay stopped.
Reason why the media relay stopped.
reason object is also provided that explains why the participant left the meeting.The table below lists the possible reason codes:
| Reason | Code | Description |
|---|---|---|
| WEBSOCKET_DISCONNECTED | 1001 | Socket disconnected |
| REMOVE_PEER | 1002 | Participant was removed from the meeting |
| REMOVE_PEER_VIEWER_MODE_CHANGED | 1003 | Participant removed due to viewer mode change |
| REMOVE_PEER_MEDIA_RELAY_STOP | 1004 | Participant removed because media relay was stopped |
| SWITCH_ROOM | 1005 | Participant switched to another room |
| ROOM_CLOSE | 1006 | The meeting was closed |
| UNKNOWN | 1007 | Participant disconnected due to an unknown reason |
| REMOVE_ALL | 1008 | All participants were removed |
| MEETING_END_API | 1009 | Meeting ended programmatically |
| REMOVE_PEER_API | 1010 | Participant removed via API |
| DUPLICATE_PARTICIPANT | 1011 | Participant joined from another device |
| MANUAL_LEAVE_CALLED | 1101 | Participant manually left the meeting |
| WEBSOCKET_CONNECTION_ATTEMPTS_EXHAUSTED | 1102 | WebSocket connection retries exhausted |
| JOIN_ROOM_FAILED | 1103 | Failed to join the meeting |
| SWITCH_ROOM_FAILED | 1104 | Failed to switch rooms |
Object containing the reason and corresponding code.
The current meeting state. Possible values:
CONNECTINGCONNECTEDRECONNECTINGDISCONNECTEDFAILEDfunction onMeetingStateChanged(data) {
const { state } = data;
switch(state){
case 'CONNECTING':
console.log("Meeting is Connecting");
break;
case 'CONNECTED':
console.log("Meeting is Connected");
break;
case 'DISCONNECTED':
console.log("Meeting connection disconnected abruptly");
break;
case 'RECONNECTING':
console.log("Meeting is Reconnecting");
break;
case 'FAILED':
console.log("Meeting is in Failed State");
break;
default:
console.log("Unknown state:", state);
break;
}
}
const {
meetingId
...
} = useMeeting({
onMeetingStateChanged,
...
});
B when any other participant A requests to enable mic of participant B.B will be enabled.Call this function to accept the request and enable your microphone.
ID of the participant who requested to enable your microphone.
Call this function to reject the request.
The Participant instance representing the newly joined participant.
reason object is provided that describes why the participant left.Possible reason codes:
| Reason | Code | Description |
|---|---|---|
| WEBSOCKET_DISCONNECTED | 1001 | Socket disconnected |
| REMOVE_PEER | 1002 | Participant was removed from the meeting |
| REMOVE_PEER_VIEWER_MODE_CHANGED | 1003 | Participant removed because viewer mode was changed |
| REMOVE_PEER_MEDIA_RELAY_STOP | 1004 | Participant removed because media relay was stopped |
| SWITCH_ROOM | 1005 | Participant switched to a different room |
| ROOM_CLOSE | 1006 | The meeting has been closed |
| UNKNOWN | 1007 | Participant disconnected due to an unknown reason |
| REMOVE_ALL | 1008 | Remove All from the meeting |
| MEETING_END_API | 1009 | Meeting Ended. |
| REMOVE_PEER_API | 1010 | Participant removed from the meeting |
| DUPLICATE_PARTICIPANT | 1011 | Leaving meeting, since this participantId joined from another device. |
| MANUAL_LEAVE_CALLED | 1101 | Participant manually called the leave() method to exit the meeting |
| WEBSOCKET_CONNECTION_ATTEMPTS_EXHAUSTED | 1102 | Meeting left after multiple failed websocket connection attempts. |
| JOIN_ROOM_FAILED | 1103 | Meeting left due to an error while joining the room. |
| SWITCH_ROOM_FAILED | 1104 | Meeting left due to an error while switching rooms. |
The Participant instance who left the meeting.
An object describing the reason and corresponding code.
The new mode of the participant. Possible values are defined in modes.
ID of the participant whose mode has changed.
Indicates which media type was paused:
"audio" – Audio streams"video" – Video streams"share" – Screen-share video streams"shareAudio" – Screen-share audio streamsID of the participant whose pin state changed.
ID of the participant who performed the pin or unpin action.
Current pin state (true if pinned, false if unpinned).
null.ID of the participant currently presenting, or null if no one is presenting.
This callback is triggered when a quality limitation is detected or resolved during the meeting.
Triggered when a quality limitation is detected or resolved during the meeting.
Indicates whether the limitation is currently active or resolved.
Time (in milliseconds since epoch) when the event occurred.
Specifies the type of limitation.
The current recording state:
RECORDING_STARTING - Recording is in starting phase and hasn't started yet.RECORDING_STARTED - Recording has started successfully.RECORDING_STOPPING - Recording is in stopping phase and hasn't stopped yet.RECORDING_STOPPED - Recording has stopped successfully.import { Constants, useMeeting } from "@videosdk.live/react-sdk";
function onRecordingStateChanged(data) {
const { status } = data;
if (status === Constants.recordingEvents.RECORDING_STARTING) {
console.log("Meeting recording is starting");
} else if (status === Constants.recordingEvents.RECORDING_STARTED) {
console.log("Meeting recording is started");
} else if (status === Constants.recordingEvents.RECORDING_STOPPING) {
console.log("Meeting recording is stopping");
} else if (status === Constants.recordingEvents.RECORDING_STOPPED) {
console.log("Meeting recording is stopped");
} else {
//
}
}
const {
meetingId
...
} = useMeeting({
onRecordingStateChanged,
...
});
Indicates which media type was resumed:
"audio" – Audio streams"video" – Video streams"share" – Screen-share video streams"shareAudio" – Screen-share audio streamsnull is returned.ID of the currently active speaker, or null if no one is speaking.
B when any other participant A requests to enable webcam of participant B.B will be enabled.Call this function to accept the request and enable your webcam.
ID of the participant who requested to enable your webcam.
Call this function to reject the request.
useMeetingprovides reactive access to the meeting instance, participants, media state, events, and controls to manage the full meeting lifecycle.