useMeeting Hook Event Callbacks - React

onMeetingJoined()

• This event callback is trigger when a local participant joins the meeting.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onMeetingJoined,
  ...
});

---

onMeetingLeft()

• This event callback is trigger when local participant leaves the meeting.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onMeetingLeft,
  ...
});

---

onParticipantJoined()

• This event callback is trigger when a new participant joins the meeting.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onParticipantJoined,
  ...
});

---

onParticipantLeft()

• This event callback is trigger when a participant leaves the meeting.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  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 en event callback parameter.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  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 en event callback parameter.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onPresenterChanged,
  ...
});

---

---

onMainParticipantChanged()

• This event will be emitted when main participant get changed.
• It will pass participantId as an event callback parameter.

Example

function onMainParticipantChanged(participantId) {
  console.log(" onMainParticipantChanged", participantId);
}

const {
  meetingId
  ...
} = useMeeting({
  onMainParticipantChanged,
  ...
});

---

onEntryRequested()

• This event will be triggered when a new participant who is trying to join the meeting, is having permission ask_join in token.
• This event will only be triggered to the participants in the meeting, who is having the permission allow_join in token.
• This event will pass following parameters as an event parameters, participantId and name of the new participant who is trying to join the meeting, allow() and deny() to take required actions.

Event callback parameters

• data: { allow: Function; deny: Function; name: String; participantId: String }
  • allow: Function
  • deny: Function
  • name: String
  • participantId: String

Example

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,
  ...
});

---

onEntryResponded()

• This event will be triggered when the join() request is responded.
• This event will be triggered to the participants in the meeting, who is having the permission allow_join in token.
• This event will be also triggered to the participant who requested to join the meeting.

Event callback parameters

• participantId: String
• decision: "allowed" | "denied"

Example

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

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

const {
  meetingId
  ...
} = useMeeting({
  onEntryResponded,
  ...
});

---

onRecordingStateChanged()

• This event will be emitted when the meeting's recording status changed.

Example

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,
  ...
});

---

onRecordingStarted()

• This event callback is trigger when meeting recording is started.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onRecordingStarted,
  ...
});

---

onRecordingStopped()

• This event callback is trigger when meeting recording is stopped.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onRecordingStopped,
  ...
});

---

onLivestreamStateChanged()

• This event will be emitted when the meeting's livestream status changed.

Example

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,

});

---

onLiveStreamStarted()

• This event callback is trigger when meeting live stream is started.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onLiveStreamStarted,
  ...
});

---

onLiveStreamStopped()

• This event callback is trigger when meeting live stream is stopped.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onLiveStreamStopped,
  ...
});

---

onHlsStateChanged()

• This event will be emitted when the meeting's HLS(Http Livestreaming) status changed.

• when you receive HLS_PLAYABLE status you will receive 2 urls in response

  • playbackHlsUrl - Live HLS with playback support
  • livestreamUrl - Live HLS without playback support

note

downstreamUrl is now depecated. Use playbackHlsUrl or livestreamUrl in place of downstreamUrl

Example

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,
  ...
});

---

onHlsStarted()

• This event callback is trigger when meeting HLS is started.

note

downstreamUrl is now depecated. Use playbackHlsUrl or livestreamUrl in place of downstreamUrl

Event callback parameters

• data: { playbackHlsUrl: String; livestreamUrl: String }
  • playbackHlsUrl: String
  • livestreamUrl: String

Example

function onHlsStarted({ playbackHlsUrl,livestreamUrl }){
  console.log("onHlsStarted",playbackHlsUrl,livestreamUrl);
}

const {
  meetingId
  ...
} = useMeeting({
  onHlsStarted,
  ...
});

---

onHlsStopped()

• This event callback is trigger when meeting HLS is stopped.

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onHlsStopped,
  ...
});

---

onVideoStateChanged()

• This event callback is trigger when state of the external video change during the meeting.

Example

function onVideoStateChanged(data){
  console.log("onVideoStateChanged", data);
}

const {
  meetingId
  ...
} = useMeeting({
  onVideoStateChanged,
  ...
});

---

onVideoSeeked()

• This event callback is trigger when video playing the meeting is seeked to a particular time interval.

Example

function onVideoSeeked(data){
  console.log("onVideoSeeked", data);
}

const {
  meetingId
  ...
} = useMeeting({
  onVideoSeeked,
  ...
});

---

onWebcamRequested()

• This event will be triggered to the participant B when any other participant A requests to enable webcam of participant B.
• On accepting the request, webcam of participant B will be enabled.

Event callback parameters

• data: { accept: Function; participantId: String; reject: Function }
  • accept: Function
  • participantId: String
  • reject: Function

Example

function onWebcamRequested(data) {
  const { participantId, accept, reject } = data;

  // participantId, will be the id of participant who requested to enable webcam

  // if accept request
  accept();

  // if reject request
  reject();
}

const {
  meetingId
  ...
} = useMeeting({
  onWebcamRequested,
  ...
});

---

onMicRequested()

• This event will be triggered to the participant B when any other participant A requests to enable mic of participant B.
• On accepting the request, mic of participant B will be enabled.

Event callback parameters

• data: { accept: Function; participantId: String; reject: Function }
  • accept: Function
  • participantId: String
  • reject: Function

Example

function onMicRequested(data) {
  const { participantId, accept, reject } = data;

  // participantId, will be the id of participant who requested to enable mic

  // if accept request
  accept();

  // if reject request
  reject();
}

const {
  meetingId
  ...
} = useMeeting({
  onMicRequested,
  ...
});

---

onError()

• This event will be triggered when any error occured.
• It will pass code and message, as an event callback parameter.
• To see all available error codes from SDK. Meeting Error Codes

Event callback parameters

• data: { code: Number; message: String }
  • code: Number
  • message: String

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onError,
  ...
});

---

onMeetingStateChanged()

• This event will be triggered when state of meeting changes.
• It will pass state as an event callback parameter which will indicate current state of the meeting.
• All available states are CONNECTING, CONNECTED, FAILED, DISCONNECTED, CLOSING, CLOSED.

Event callback parameters

• data: { state: String }
  • state: String

Example

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

  switch(state){
    case 'CONNECTING':
      console.log("Meeting is Connecting" );
      break;
    case 'CONNECTED':
      console.log("Meeting is Connected" );
      break;
    case 'FAILED':
      console.log("Meeting connection failed" );
      break;
    case 'DISCONNECTED':
      console.log("Meeting connection disconnected abruptly" );
      break;
    case 'CLOSING':
      console.log("Meeting is closing" );
      break;
    case 'CLOSED':
      console.log("Meeting connection closed" );
      break;
  }
}

const {
  meetingId
  ...
} = useMeeting({
  onMeetingStateChanged,
  ...
});

---

onParticipantModeChanged()

• This event will be triggered when mode gets chanded.
• It will pass mode, as an event callback parameter.
  • CONFERENCE: Both audio and video streams will be produced and consumed in this mode.
  • VIEWER: Audio and video streams will not be produced or consumed in this mode.

Event callback parameters

• data: { mode: String, participantId: String }
  • mode: String
  • participantId: String

Example

function onParticipantModeChanged(data) {
  const { mode, participantId } = data;
}

const {
  meetingId
  ...
} = useMeeting({
  onParticipantModeChanged,
  ...
});

---

onPinStateChanged()

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

• data: { peerId: String; state: JSONObject; pinnedBy: String }

  • peerId: String
  • state: JSONObject
  • pinnedBy: String

Example

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

const {
  meetingId
  ...
} = useMeeting({
  onPinStateChanged,
  ...
});