Manage Roles - Flutter

Roles with VideoSDK

When doing interactive live streaming maintaining the role of users is quite important. To help manage these roles better, VideoSDK allows a participant with two types of modes:

1. SEND_AND_RECV When a participant is joining with mode set to SEND_AND_RECV, we will be able to publish and consume the media of other participants and also interact with them using the features like chat, poll etc.

2. SIGNALLING_ONLY When a participant is joining with mode set to SIGNALLING_ONLY, that participant is not allowed to publish or consume any media from other participants. Although they can interact with other participants using chat, polls etc.

info

Important Changes Flutter SDK in Version v1.3.0

• The following modes have been deprecated:
• CONFERENCE has been replaced by SEND_AND_RECV
• VIEWER has been replaced by SIGNALLING_ONLY

Please update your implementation to use the new modes.

⚠️ Compatibility Notice:
To ensure a seamless meeting experience, all participants must use the same SDK version.
Do not mix version v1.3.0 + with older versions, as it may cause significant conflicts.

When to use the Roles?

1. Simple Adaptive Streaming

• Simple Adaptive Streaming (SAS) is a type of livestreaming that requires minimal interaction between the host and viewers.

• It is particularly useful for events with a large number of viewers who prefer not to engage with the host.

• In SAS, each speaker attends a VideoSDK meeting in SEND_AND_RECV mode, while viewers can simply watch the livestream using the playbackHlsUrl or livestreamUrl. Unlike the speakers, viewers do not need to join the meeting in SEND_AND_RECV or SIGNALLING_ONLY mode. This allows for a seamless streaming experience without any unnecessary interruptions or distractions.

  • 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

2. Adaptive Streaming with increased engagement

• If you're looking to increase engagement with your audience during a live streaming event, consider using Adaptive Streaming technology. With this approach, you can incorporate interactive features such as polls and conversations, and give viewers the ability to join and leave the livestream as the host decides.

• To set this up, have all speakers join as SEND_AND_RECV mode participants, while the audience joins as SIGNALLING_ONLY mode participants. This way, everyone can participate in the interactive elements of the live stream and create a more dynamic and engaging experience for all.

Using roles

The mode of the participants is set during the creating the room.

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class MeetingScreen extends StatefulWidget {
  final String meetingId;
  final String token;

  const MeetingScreen(
      {super.key, required this.meetingId, required this.token});

  @override
  State<MeetingScreen> createState() => _MeetingScreenState();
}

class _MeetingScreenState extends State<MeetingScreen> {
  late Room _room;

  Mode? localParticipantMode;

  @override
  void initState() {
    //Creating a new Room based on the passed meetingId and token from the Joining Screen
    // create room
    _room = VideoSDK.createRoom(
      roomId: widget.meetingId,
      token: widget.token,
      displayName: "John Doe",
      micEnabled: true,
      camEnabled: true,
      defaultCameraIndex:
          1, // Index of MediaDevices will be used to set default camera
      mode: Mode.SEND_AND_RECV, // or Mode.SIGNALLING_ONLY
    );

    _room.join();

    setRoomEventListener();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return  SafeArea(
      child: Scaffold(
        backgroundColor: Colors.black,
        //Show Speaker view if mode is SEND_AND_RECV else show Viewer View
        body: localParticipantMode != null
            ? localParticipantMode == Mode.SEND_AND_RECV
                ? ILSSpeakerView(room: _room)
                : localParticipantMode == Mode.SIGNALLING_ONLY
                    ? ILSViewerView(room: _room)
                    : null
            : const Center(
                child: Text("Joining...")),
      ),
    );
  }

  void setRoomEventListener(){
    _room.on(Events.roomJoined, (){
      setState(()=>localParticipantMode = _room.localParticipant.mode);
    });

    _room.on(Events.participantModeChanged, (Map<String, dynamic> data){
      if(data['participantId']){
        setState(()=>localParticipantMode = _room.localParticipant.mode);
      }
    });
  }
}

Getting Participant Mode

You can identify the participants role by using mode property from Participant object.

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class ParticipantTile extends StatefulWidget {
  final Participant participant;
  const ParticipantTile({super.key, required this.participant});

  @override
  State<ParticipantTile> createState() => _ParticipantTileState();
}

class _ParticipantTileState extends State<ParticipantTile> {

  @override
  Widget build(BuildContext context) {
    return Text("${widget.participant.displayName} is in ${widget.participant.mode.name}");
  }
}

Changing Participant's Mode

Let's say you are hosting a livestream and you want one of your viewer to join the livestream with you. In this case you can change the mode of the participant using the changeMode() of the Room object.

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class MeetingScreen extends StatefulWidget {
  ...
}

class _MeetingScreenState extends State<MeetingScreen> {
  late Room _room;

  @override
  void initState() {
    ...
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children:[
        ElevatedButton(
          onPressed:(){
            _room.changeMode(Mode.SIGNALLING_ONLY);
          },
          child: const Text("Change Mode to Viewer"),
        ),
        ElevatedButton(
          onPressed:(){
            _room.changeMode(Mode.SEND_AND_RECV);
          },
          child: const Text("Change Mode to Speaker"),
        ),
      ]
    );
  }
}

API Reference

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

• createRoom
• Room
• Participant
• changeMode