useRoom Hook Event Callbacks - React Native

onParticipantJoined()

• This event callback is triggered when a new participant joins the room.
• It passes the Participant object of the participant who joined.

Example

function onParticipantJoined(participant) {
  console.log(" onParticipantJoined", participant);
}

const { roomId } = useRoom({
  onParticipantJoined,
});

---

onParticipantLeft()

• This event callback is triggered when a participant leaves the room.
• When onParticipantLeft is triggered, a reason object is also provided.
• The table below outlines the possible reason codes and their descriptions:

Reason	Code	Message
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.

Example

function onParticipantLeft(participant, reason) {
  if (reason.code === Constants.leaveReason.MANUAL_LEAVE_CALLED) {
    // do - something
  }
}

const { roomId } = useRoom({
  onParticipantLeft,
});

---

onSpeakerChanged()

• This event will be emitted when a active speaker changed.
• If you want to know which participant is actively speaking, then this event will be used.
• If no participant is actively speaking, then this event will pass null as an event callback parameter.

Example

function onSpeakerChanged(activeSpeakerId) {
  console.log(" onSpeakerChanged", activeSpeakerId);
}

const { roomId } = useRoom({
  onSpeakerChanged,
});

---

onPresenterChanged()

• This event will be emitted when any participant starts or stops screen sharing.
• It will pass participantId as an event callback parameter.
• If a participant stops screensharing, then this event will pass null as an event callback parameter.

Example

function onPresenterChanged(presenterId) {
  console.log(" onPresenterChanged", presenterId);
}

const { roomId } = useRoom({
  onPresenterChanged,
});

---

onEntryRequested()

• Triggered when a participant whose token has the ask_join permission tries to join.
• Only participants whose token has the allow_join permission receive it.
• Answer with the allow() or deny() function in the payload, or with respondEntry().

Event callback parameters

• data: { participantId: String; name: String; allow: Function; deny: Function }
  • participantId: String
  • name: String
  • allow: () => Promise<void>, lets the participant in
  • deny: () => Promise<void>, refuses the request

Example

function onEntryRequested({ participantId, name, allow, deny }) {
  console.log(`${name} (${participantId}) requested to join the room.`);

  // To let them in
  allow();

  // To refuse, call this instead
  // deny();
}

const { roomId } = useRoom({
  onEntryRequested,
});

---

onEntryResponded()

• This event will be triggered when the join() request is responded.
• This event will be triggered to the participants in the room, who is having the permission allow_join in token.
• This event will be also triggered to the participant who requested to join the room.
• It passes one object with the participantId and the decision.

Event callback parameters

• data: { participantId: String; decision: String }
  • participantId: String
  • decision: "allowed" | "denied"

Example

function onEntryResponded({ participantId, decision }) {
  // participantId will be id of participant who requested to join the room

  if (decision === "allowed") {
    // entry allowed
  } else {
    // entry denied
  }
}

const { roomId } = useRoom({
  onEntryResponded,
});

---

onRecordingStateChanged()

• Triggered when the room's recording state changes.
• It passes one object with state, one of Constants.recordingEvents.

Example

import { Constants, useRoom } from "@videosdk.live/react-native-sdk";

function onRecordingStateChanged(data) {
  const { state } = data;

  if (state === Constants.recordingEvents.RECORDING_STARTING) {
    console.log("Room recording is starting");
  } else if (state === Constants.recordingEvents.RECORDING_STARTED) {
    console.log("Room recording is started");
  } else if (state === Constants.recordingEvents.RECORDING_STOPPING) {
    console.log("Room recording is stopping");
  } else if (state === Constants.recordingEvents.RECORDING_STOPPED) {
    console.log("Room recording is stopped");
  } else {
    //
  }
 }

const { roomId } = useRoom({
  onRecordingStateChanged,
});

---

onRecordingStarted()

• This event callback is triggered when room recording is started.

Example

function onRecordingStarted() {
  console.log("onRecordingStarted");
}

const { roomId } = useRoom({
  onRecordingStarted,
});

---

onRecordingStopped()

• This event callback is triggered when room recording is stopped.

Example

function onRecordingStopped() {
    console.log("onRecordingStopped");
}

const { roomId } = useRoom({
  onRecordingStopped,
});

---

onRoomJoined()

• Triggered when the local participant joins the room, and again after switchTo() moves you into another room.
• It passes no arguments.

Example

function onRoomJoined() {
  console.log("onRoomJoined");
}

const { roomId } = useRoom({
  onRoomJoined,
});

---

onRoomLeft()

• This event callback is triggered when local participant leaves the room.
• When onRoomLeft() is triggered, a reason object is also provided.
• The table below outlines the possible reason codes and their descriptions:

Reason	Code	Message
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.

Example

function onRoomLeft(reason) {
  if (reason.code === Constants.leaveReason.MANUAL_LEAVE_CALLED) {
    // do - something
  }
}

const { roomId } = useRoom({
  onRoomLeft,
});

---

onLivestreamStateChanged()

• Triggered when the room's livestream state changes.
• It passes one object with state, one of Constants.livestreamEvents.

Example

import { Constants, useRoom } from "@videosdk.live/react-native-sdk";

function onLivestreamStateChanged(data) {
  const { state } = data;

  if (state === Constants.livestreamEvents.LIVESTREAM_STARTING) {
    console.log("Room Livestream is starting");
  } else if (state === Constants.livestreamEvents.LIVESTREAM_STARTED) {
    console.log("Room Livestream is started");
  } else if (state === Constants.livestreamEvents.LIVESTREAM_STOPPING) {
    console.log("Room Livestream is stopping");
  } else if (state === Constants.livestreamEvents.LIVESTREAM_STOPPED) {
    console.log("Room Livestream is stopped");
  } else {
    //
  }
 }

const { roomId } = useRoom({
  onLivestreamStateChanged,
});

---

onLivestreamStarted()

• This event callback is triggered when room live stream is started.

Example

function onLivestreamStarted(){
  console.log("onLivestreamStarted");
}

const { roomId } = useRoom({
  onLivestreamStarted,
});

---

onLivestreamStopped()

• This event callback is triggered when room live stream is stopped.

Example

function onLivestreamStopped(){
  console.log("onLivestreamStopped");
}

const { roomId } = useRoom({
  onLivestreamStopped,
});

---

onHlsStateChanged()

• Triggered when the room's HLS (HTTP Live Streaming) state changes.
• It passes one object with state, one of Constants.hlsEvents, and hlsUrl: { playbackHlsUrl, livestreamUrl }. The URLs are null until the state is HLS_PLAYABLE.

Example

import { Constants, useRoom } from "@videosdk.live/react-native-sdk";

function onHlsStateChanged(data) {
  const { state } = data;

  if (state === Constants.hlsEvents.HLS_STARTING) {
    console.log("Room Hls is starting");
  } else if (state === Constants.hlsEvents.HLS_STARTED) {
    console.log("Room Hls is started");
  } else if (state === Constants.hlsEvents.HLS_PLAYABLE) {
    // The HLS URLs arrive with the HLS_PLAYABLE state
    const { playbackHlsUrl, livestreamUrl } = data.hlsUrl;
    console.log("Room Hls is playable");
  } else if (state === Constants.hlsEvents.HLS_STOPPING) {
    console.log("Room Hls is stopping");
  } else if (state === Constants.hlsEvents.HLS_STOPPED) {
    console.log("Room Hls is stopped");
  } else {
    //
  }
 }

const { roomId } = useRoom({
  onHlsStateChanged,
});

---

onPinStateChanged()

• This event will be triggered when any participant is pinned or unpinned by any participant.

• data: { participantId: String; state: { cam: Boolean; share: Boolean }; pinnedBy: String | null }

  • participantId: String
  • state: { cam: Boolean; share: Boolean }
  • pinnedBy: String | null. null when the server does not say who pinned.

• The participant's current pin state is also available as pinState.

Example

function onPinStateChanged(data) {
  const { participantId, state, pinnedBy } = data;
}

const { roomId } = useRoom({
  onPinStateChanged,
});

---

onWebcamRequested()

• This event will be triggered to the participant B when any other participant A requests to enable webcam of participant B.
• It passes the participantId of participant A, and accept() and reject() to answer the request.
• accept() turns this participant's camera on. reject() declines the request. Both return a Promise.

Event callback parameters

• data: { participantId: String, accept: Function, reject: Function }
  • participantId: String
  • accept: () => Promise<void>
  • reject: () => Promise<void>

Example

function onWebcamRequested({ participantId, accept, reject }) {
  // participantId is the participant who asked
  if (confirmWebcamRequest(participantId)) {
    accept();
  } else {
    reject();
  }
}

useRoom({
  onWebcamRequested,
});

---

onMicRequested()

• This event will be triggered to the participant B when any other participant A requests to enable mic of participant B.
• It passes the participantId of participant A, and accept() and reject() to answer the request.
• accept() turns this participant's mic on. reject() declines the request. Both return a Promise.

Event callback parameters

• data: { participantId: String, accept: Function, reject: Function }
  • participantId: String
  • accept: () => Promise<void>
  • reject: () => Promise<void>

Example

function onMicRequested({ participantId, accept, reject }) {
  // participantId is the participant who asked
  if (confirmMicRequest(participantId)) {
    accept();
  } else {
    reject();
  }
}

useRoom({
  onMicRequested,
});

---

onError()

• Triggered when an error occurs.
• It passes a VideoSDKError with code, name and message. code is one of Constants.VideoSDKError, and name is its key.
• To see all available error codes from SDK, refer to Error Codes.

Event callback parameters

• error: { code: Number; name: String; message: String }

Example

function onError(error) {
  const { code, name, message } = error;

  if (code === Constants.VideoSDKError.INVALID_TOKEN) {
    console.log("Check your token:", message);
  }
}

const { roomId } = useRoom({
  onError,
});

---

onRoomStateChanged()

• Triggered when the connection state of the room changes.
• It passes one object with roomState.
• All available states are CONNECTING, CONNECTED, RECONNECTING, DISCONNECTED and FAILED. They are also available as Constants.RoomState.
  • CONNECTING: The room is connecting.
  • CONNECTED: The room is connected.
  • RECONNECTING: The connection dropped and the SDK is reconnecting.
  • DISCONNECTED: The room connection is closed.
  • FAILED: The room connection failed.

Event callback parameters

• data: { roomState: String }
  • roomState: String

Example

function onRoomStateChanged(data) {
  const { roomState } = data;

  switch (roomState) {
    case 'CONNECTING':
      console.log("Room is Connecting" );
      break;
    case 'CONNECTED':
      console.log("Room is Connected" );
      break;
    case 'RECONNECTING':
      console.log("Room is Reconnecting" );
      break;
    case 'FAILED':
      console.log("Room connection failed" );
      break;
    case 'DISCONNECTED':
      console.log("Room connection disconnected" );
      break;
  }
}

const { roomId } = useRoom({
  onRoomStateChanged,
});

---

onPausedAllStreams()

• This callback is triggered when all or specified media streams within the room are successfully paused.

Parameters

• kind: Specifies the type of media stream that was paused.
  • Type: String
  • Possible values:
    • "audio": Indicates that audio streams have been paused.
    • "video": Indicates that video streams have been paused.
    • "share": Indicates that screen-sharing video streams have been paused
    • "shareAudio": Indicates that screen-sharing audio streams have been paused
    • "all": Indicates that all media streams have been paused

Example

function onPausedAllStreams(data) {
  const { kind } = data;
}

const { roomId } = useRoom({
  onPausedAllStreams,
});

---

onResumedAllStreams()

• This callback is triggered when all or specified media streams within the room are successfully resumed.

Parameters

• kind: Specifies the type of media stream that was resumed.
  • Type: String
  • Possible values:
    • "audio": Indicates that audio streams have been resumed.
    • "video": Indicates that video streams have been resumed.
    • "share": Indicates that screen-sharing video streams have been resumed
    • "shareAudio": Indicates that screen-sharing audio streams have been resumed
    • "all": Indicates that all media streams have been resumed

Example

function onResumedAllStreams(data) {
  const { kind } = data;
}

const { roomId } = useRoom({
  onResumedAllStreams,
});

---

onMediaRelayRequestReceived()

• This callback is triggered when a request is received for media relay in the destination room.
• It passes one object with the fields below.

Parameters

• participantId - (String): Specifies the participantId who requested the media relay.

• roomId - (String): Specifies the room the media relay request came from.

• displayName - (String): Specifies the displayName of the participant who requested the media relay.

• accept - (Function): () => Promise<void>, accepts the request.

• reject - (Function): () => Promise<void>, rejects the request.

Example

function onMediaRelayRequestReceived({ participantId, roomId, displayName, accept, reject }) {
  console.log(
    `Relay request from ${displayName} (${participantId}) in room ${roomId}`
  );
  accept();
}

useRoom({
  onMediaRelayRequestReceived,
});

---

onMediaRelayRequestResponse()

• This callback is triggered when a response is received for media relay request in the source room.
• It passes one object with the fields below.

Parameters

• decision - (String): "ACCEPTED" or "REJECTED", the values of Constants.RelayDecision.

• decidedBy - (String): Specifies the participantId who responded to the request for the media relay.

• roomId - (String | null): Specifies the room the media relay request was sent to.

Example

function onMediaRelayRequestResponse({ decision, decidedBy, roomId }) {
  if (decision === Constants.RelayDecision.ACCEPTED) {
    console.log(`${decidedBy} accepted the relay into ${roomId}`);
  }
}

useRoom({
  onMediaRelayRequestResponse,
});

---

onMediaRelayStarted()

• This callback is triggered when the media relay to the destination room successfully starts.

Parameters

• roomId - (String): Specifies the room the media relay started into.

Example

function onMediaRelayStarted({ roomId }) {
  console.log(`Media relay started to ${roomId}`);
}

useRoom({
  onMediaRelayStarted,
});

---

onMediaRelayStopped()

• This callback is triggered when the media relay to the destination room stops for any reason.

Parameters

• roomId - (String): Specifies the room the media relay stopped for.

• reason - (String | null): Specifies the reason why the media relay stopped.

Example

function onMediaRelayStopped({ roomId, reason }) {
  console.log(`Relay to ${roomId} stopped. Reason: ${reason}`);
}

useRoom({
  onMediaRelayStopped,
});

---

onMediaRelayError()

• This callback is triggered when an error occurs during media relay to the destination room.

Parameters

• roomId - (String): Specifies the destination room of the relay.

• error - (String | null): Specifies the error that occurred.

Example

function onMediaRelayError({ roomId, error }) {
  console.error(`Relay error to ${roomId}: ${error}`);
}

useRoom({
  onMediaRelayError,
});

---

onQualityLimitation()

• This callback is triggered when a quality limitation is detected or resolved during the room.

Parameters

• type: Specifies the type of limitation.

  • Type: String
  • Possible values:
    • "CONGESTION": Network congestion detected.
    • "BANDWIDTH": Insufficient network bandwidth.
    • "CPU": High CPU usage on the device.

• state: Specifies whether the limitation is currently active or resolved.

  • Type: String
  • Possible values:
    • "DETECTED": Limitation has been detected.
    • "RESOLVED": Limitation has been resolved.

• timestamp: The time (in milliseconds since epoch) when the event occurred.

  • Type: Number

Example

function onQualityLimitation({ type, state, timestamp }){
  console.log(`onQualityLimitation: ${type}-${state}`);
};


const { roomId } = useRoom({
  onQualityLimitation,
});

---

onCodecChanged()

• This callback is triggered when the codec of the video you send changes, for example when it falls back to VP8 because another participant cannot use the codec you were sending.

Parameters

• previousCodec - (String): The codec used before the change.

• currentCodec - (String): The codec used now.

• unsupportedRemoteCodec - (String | null): The codec another participant could not decode.

• kind - (String): The kind of stream whose codec changed.

• causedBy - (Participant | null): The Participant whose codec support forced the change, or null.

Example

function onCodecChanged({ previousCodec, currentCodec, kind, causedBy }) {
  console.log(`${kind} codec changed from ${previousCodec} to ${currentCodec}`);
  console.log("Caused by", causedBy?.displayName);
}

const { roomId } = useRoom({
  onCodecChanged,
});

---

onParticipantModeChanged()

• This callback is triggered when the mode of any participant in the room changes.
• It passes one object with the participantId and the new mode.

Parameters

• participantId - (String): The participant whose mode changed.

• mode - (String): The new mode: "SEND_AND_RECV", "SIGNALLING_ONLY" or "RECV_ONLY".

Example

function onParticipantModeChanged({ participantId, mode }) {
  console.log(`${participantId} is now in ${mode} mode`);
}

const { roomId } = useRoom({
  onParticipantModeChanged,
});

---

onDataReceived()

• Triggered for every message another participant sends with send().
• It passes one DataMessage object with the fields below.

Parameters

• senderId - (String): The participantId of the participant who sent the message.

• text - (String | null): The text of a text message, or null for a binary one.

• data - (Uint8Array | null): The bytes of a binary message, or null for a text one.

• isBinary - (Boolean): true for a binary message.

• reliable - (Boolean): Whether the sender sent it reliably.

• timestamp - (Number): The time of the message, in milliseconds since epoch.

Example

function onDataReceived({ senderId, text, data, isBinary }) {
  console.log("Message from", senderId, isBinary ? data : text);
}

const { send } = useRoom({
  onDataReceived,
});

---

onExternalCallRinging()

• Triggered when a phone call starts ringing on the device.
• It passes one object with callType: String | null.

The other phone-call callbacks take the same payload:

• onExternalCallAnswered(): the user answered the call.
• onExternalCallRejected(): the call ended without being answered. Android cannot tell a rejected call from a missed one.
• onExternalCallHangup(): an answered call ended.

Example

const { muteMic } = useRoom({
  onExternalCallAnswered: ({ callType }) => {
    console.log("Phone call answered", callType);
    muteMic();
  },
});

---

Transcription, translation and whiteboard callbacks

• Transcription, translation and whiteboard callbacks are on the useTranscription(), useTranslation() and useWhiteboard() hooks.