Skip to main content

Manage Participants

1. Local Participant (self)#

Local participant is used to consume your video & audio streams. it contains information about local participant such as displayName, id, quality and streams Map.

You can acces localParticipant from the meeting object.

Participant object properties#

Property NameTypeDescription
idstringUnique id of the participant.
displayNamestringThe name you define during the meeting initialization.
localbooleanIndicates the participant is local or not.
qualitystringIndicates the participant streams quality.
StreamsMap of StreamReturns Video & Audio Streams.

Stream Object properties#

Property NameTypeDescription
idstringUnique id
codecstringVideo/Audio codec.
kindstringStream Kind.
trackstringMediaStreamTrack

2. Other Participants (Except You)#

Other participants Map is used to get all the participants (except you) in the meeting at any given time.

Other participants Map contains same properties as LocalParticipant.

Local And Other Participants#

/** localParticipant contains Participant object  as displayed above local participant section */const localParticipant = meeting.localParticipant;
localParticipant.streams.forEach((stream) => {  setTrack(stream, videoElement, audioElement, participant.id);});
const participants = meeting.participants;
/** to play other participants video & audio */function loadOtherParticipants() {  meeting.participants.forEach((participant) => {    let videoElement = createVideoElement(participant.id);    let audioElement = createAudioElement(participant.id);
    participant.streams.forEach((stream) => {      setTrack(stream, videoElement, audioElement, participant.id);    });
    videoContainer.appendChild(videoElement);    videoContainer.appendChild(audioElement);  });}
// creating video elementfunction createVideoElement(pId) {  let videoElement = document.createElement("video");  videoElement.setAttribute("id", `v-${pId}`);  return videoElement;}
// creating audio elementfunction createAudioElement(pId) {  let audioElement = document.createElement("audio");  audioElement.setAttribute("autoPlay", "false");  audioElement.setAttribute("playsInline", "true");  audioElement.setAttribute("controls", "false");  audioElement.setAttribute("id", `a-${pId}`);  return audioElement;}
//setting up tracksfunction setTrack(stream, videoElem, audioElement, id) {  if (stream.kind == "video") {    const mediaStream = new MediaStream();    mediaStream.addTrack(stream.track);    videoElem.srcObject = mediaStream;    videoElem      .play()      .catch((error) =>        console.error("videoElem.current.play() failed", error)      );  }  if (stream.kind == "audio") {    if (id == meeting.localParticipant.id) return;    const mediaStream = new MediaStream();    mediaStream.addTrack(stream.track);    audioElement.srcObject = mediaStream;    audioElement      .play()      .catch((error) => console.error("audioElem.play() failed", error));  }}

3. Participant Related Events#

  1. participant-joined - Whenever any new participant join the meeting, participant-joined event will trigger. For example, the meeting is running with Alice and Bob, then Eve join that meeting, after that participant-joined event trigger and return the participant object.

  2. participant-left - Whenever any participant leave/exit the meeting, participant-left event will trigger.For example, the meeting is running with Alice and Bob, then Bob leave that meeting, after that participant-left event trigger and return the participant object

  3. presenter-changed - Whenever any participant present/screenshare their screen/window in meeting, presenter-changed event will trigger and return the presenter participantId.

  4. stream-enabled - Whenever any participant enabled mic/webcam in meeting, stream-enabled event will trigger and return Stream Map.

  5. stream-disabled - Whenever any participant disabled mic/webcam in meeting, stream-disabled event will trigger and return Stream Map.

meeting.on("participant-joined", (participant) => {  participant.on("stream-enabled", (stream) => {    // You can find this setTrack() helper function on previous code snippet    setTrack(stream, videoElement, audioElement, participant.id);  });});meeting.on("participant-left", (participant) => {  participant.on("stream-disabled", (stream) => {    // You can find this setTrack() helper function on previous code snippet    setTrack(stream, videoElement, audioElement, participant.id);  });});meeting.on("presenter-changed", (participantId) => {});