Rendering Host and Audience Views - JavaScript

This guide explains how developers can render host participants in a live streaming scenario where one or more hosts can broadcast to thousands of audience members.

Participant Modes

Participants can join a meeting in one of two modes:

• SEND_AND_RECV: Participants in this mode can both send and receive audio/video (typically hosts)
• RECV_ONLY: Participants in this mode can only receive audio/video (typically audience members)

Rendering Local Participant

When you join a meeting as a host (SEND_AND_RECV mode), you'll need to render your own video to see yourself during the broadcast:

meeting.on("meeting-joined", () => {
  if (meeting?.localParticipant.mode === "SEND_AND_RECV") {
    let videoElement = meeting?.localParticipant.renderVideo({
      type: "video", // Options: "video" or "share" for screen sharing
      maxQuality: "auto", // Options: "auto", "high", "med", "low"
      containerStyle: {
        // Custom styling for container
        width: "300px",
        height: "168px",
      },
    });

    videoContainer.appendChild(videoElement);
  }
});

Rendering Remote Participants

When remote participants join in SEND_AND_RECV mode (other hosts), you'll need to render their video and audio:

meeting.on("participant-joined", (participant) => {
  if (participant.mode === "SEND_AND_RECV") {
    let videoElement = participant.renderVideo({
      type: "video", // Options: "video" or "share" for screen sharing
      maxQuality: "auto", // Options: "auto", "high", "med", "low"
      containerStyle: {
        // Custom styling for container
        width: "300px",
        height: "168px",
      },
    });

    let audioElement = participant.renderAudio({
      type: "audio", // Options: "audio" or "shareAudio" for screen share audio
    });

    videoContainer.appendChild(videoElement);
    videoContainer.appendChild(audioElement);
  }
});

This works on both the host and audience side. Audience users will be in RECV_ONLY mode and cannot publish media but can render the host’s media.

Handling Participant Departure

To maintain a clean UI, you should remove video and audio elements when participants leave:

meeting.on("participant-left", (participant) => {
let  vElement  =  document.getElementById(`f-${participant.id}`);
vElement.remove(vElement);

let  aElement  =  document.getElementById(`a-${participant.id}`);
aElement.remove(aElement);
});

Monitoring Media Status Changes

You can listen for the media-status-changed event on each participant to detect when they toggle their camera or microphone:

participant.on("media-status-changed", (data) => {
  const { kind, newStatus } = data;
  // kind can be "video" or "audio"  
  console.log(`Participant's ${kind} is now ${newStatus}`);
  // You can Update UI accordingly
});

Tracking Participant Counts

Counting Audience Members (RECV_ONLY)

To get the count of audience members (participants in RECV_ONLY mode):

function getAudienceCount() {
  const participants = meeting.participants;
  const audience = [...participants.values()].filter((participant) => {
    return participant.mode === VideoSDK.Constants.modes.RECV_ONLY;
  });
  return audience.length || 0;
}

Counting Hosts (SEND_AND_RECV)

To get the count of hosts (participants in SEND_AND_RECV mode):

function getHostCount() {
  const participants = meeting.participants;
  const hosts = [...participants.values()].filter((participant) => {
    return participant.mode === VideoSDK.Constants.modes.SEND_AND_RECV;
  });
  return hosts.length || 0;
}

Getting Total Participant Count

To get the total count of all participants (both hosts and audience):

function getTotalParticipantCount() {
  return meeting.participants.size;
}

Real-time Count Updates

To keep track of participant counts in real-time:

// Initialize counters
let audienceCount = 0;
let hostCount = 0;

// Update counts when a participant joins
meeting.on("participant-joined", () => {
  audienceCount = getAudienceCount();
  hostCount = getHostCount();
  
  // Update UI
  updateParticipantCountsUI(audienceCount, hostCount);
});

// Update counts when a participant leaves
meeting.on("participant-left", () => {
  audienceCount = getAudienceCount();
  hostCount = getHostCount();
  
  // Update UI
  updateParticipantCountsUI(audienceCount, hostCount);
});

// Function to update the UI
function updateParticipantCountsUI(audienceCount, hostCount) {
  document.getElementById('audience-count').innerText = audienceCount;
  document.getElementById('host-count').innerText = hostCount;
  document.getElementById('total-count').innerText = audienceCount + hostCount;
}

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• meeting-joined event
• meeting-left event
• participant-joined event
• participant-left event