Waiting Screen - Flutter

To create a smoother and more polished entry experience for audience members, it's important not to immediately render the 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 Livestream, 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 livestream with no active hosts (in SEND_AND_RECV mode) can result in confusion and a poor user experience.

Participant Modes

• Hosts must join the livestream 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 map and the Events.participantJoined event of the Room class. participants holds the other participants, so it never includes you. Also listen for the Events.participantModeChanged event to catch an audience member who becomes a host.

1. Check if a Host is Present Once the livestream is joined, for example in the Events.roomJoined handler, use the participants map to determine if there's already a host in the room:

import 'package:videosdk/videosdk.dart';

late Room _room;
bool hasHost = false;

_room.on(Events.roomJoined, () {
  setState(() {
    hasHost = _room.participants.values.any(
      (participant) => participant.mode == Mode.SEND_AND_RECV,
    );
  });
});

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

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

import 'package:videosdk/videosdk.dart';

_room.on(Events.participantJoined, (Participant participant) {
  // A host joined, so show the livestream view
  if (participant.mode == Mode.SEND_AND_RECV) {
    setState(() => hasHost = true);
  }
});

3. Listen for Mode Changes An audience member can become a host with changeMode() while they are in the livestream. Listen for the Events.participantModeChanged event to catch this. Its mode is a Mode, such as Mode.SEND_AND_RECV, and participant.mode is already updated when it fires:

import 'package:videosdk/videosdk.dart';

_room.on(Events.participantModeChanged, (Map<String, dynamic> data) {
  // A participant became a host, so show the livestream view
  if (data['mode'] == Mode.SEND_AND_RECV) {
    setState(() => hasHost = true);
  }
});

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