Waiting Screen - JavaScript

To create a smoother and more polished entry experience for audience members, it's important not to immediately render the meeting room when they join. Instead, show a waiting screen until at least one host is present in the room.

Why This Matters?

• Hosts are typically responsible for driving the meeting, and their presence is essential before audience members should be able to view or interact in the room.

• Allowing audience members (in RECV_ONLY mode) to enter a meeting with no active hosts (in SEND_AND_RECV mode) can result in confusion and a poor user experience.

Participant Modes

• Hosts must join the meeting with the SEND_AND_RECV mode.
• Audience members should join with the RECV_ONLY mode.

Implementation Guide

You can achieve this behavior by using the participants list and onParticipantJoined event from the useMeeting hook.

1. Check if a Host is Present On initial render, use the participants object to determine if there's already a host in the room:

const participants = liveStream.participants;

const hasHost = Array.from(participants.values()).some(
  (participant) => participant.mode === "SEND_AND_RECV"
);

If hasHost is true, render the meeting view. Otherwise, show the waiting screen.

2. Listen for Host Join Always listen for the onParticipantJoined event in case a host joins after the audience participant:

meeting.on("participant-joined", (participant) => {
  if (participant.mode === "SEND_AND_RECV") {
    // Update your state to show the meeting view
  }
});

This ensures that as soon as a host joins, the waiting audience members are transitioned smoothly into the meeting view.