Initialize Live Stream - Flutter

To configure livestreaming with VideoSDK you require two things, first the token which will be used for Authentication purpose and a streamId which will be used to specify where the hosts and audience will join.

Generating Token

You can generate a token in two ways:

1. Temporary Token : You can visit Dashboard's API Key section and generate a temporary token from there.

2. Server : You can setup JWT in backend and make an API call to get the token from your server.

To learn more about Authentication and token in detail you can follow this guide.

The examples below use the http package. The SDK does not bring it in, so add it to your app with flutter pub add http.

import 'dart:convert';
import 'package:http/http.dart' as http;

// With Temporary Token
Future<String> getToken() async {
  // Update the token here from the VideoSDK dashboard
  String token = "YOUR_TOKEN";
  return token;
}

// Server
Future<String> getTokenFromServer() async {
  final http.Response httpResponse = await http.get(
    Uri.parse("http://localhost:3000/get-token"),
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json",
    },
  );
  String token = json.decode(httpResponse.body)['token'];
  return token;
}

Generating Stream Id

With the token ready, you can now get the streamId from the VideoSDK's rooms API.

// API call to create livestream
Future<String> createStreamId(String token) async {
  final http.Response httpResponse = await http.post(
    Uri.parse("https://api.videosdk.live/v2/rooms"),
    headers: {'Authorization': token},
  );

//Destructuring the roomId from the response and store it in streamId variable
  String streamId = json.decode(httpResponse.body)['roomId'];
  return streamId;
}

Initialization of Live Stream

You can initialize the live stream using the VideoSDK class from the Flutter SDK. The VideoSDK class is responsible for initializing the live stream with the provided configuration, which includes the token, livestreamId, participantId and many more.

VideoSDK Class

VideoSDK Class is a core class of SDK that provides methods to create and configure a Room. You have to pass the initialization configuration for the live stream and the token to its createRoom() method.

VideoSDK.createRoom(
      roomId: "<streamId>",
      mode: Mode.SEND_AND_RECV, // Mode.SEND_AND_RECV for hosts/co-hosts, Mode.RECV_ONLY for audience
      token: "Generated-Token",
      participantName: "<Participant Name>",
      micEnabled: true, //Ignore for audience
      camEnabled: true, //Ignore for audience
      participantId: "<Unique Participant ID>", // Optional
      multiStream: true, //Ignore for audience
    );

• roomId :

  • This is a unique identifier that allows participants to join a specific live stream.
  • It will be in the format of xxx-yyy-zzz and will be generated using the VideoSDK's Room API.

• mode :

  • This parameter defines the mode the participant will enter the live stream with. It takes a Mode value.
  • Mode.SEND_AND_RECV: For hosts/co-hosts who can send and receive media. Leave mode out and the SDK uses this one.
  • Mode.RECV_ONLY: For audience members who can only receive media.

• participantName:

  • This represents the name of the participant in the live streams.
  • It will accept String type value.
  • This is an OPTIONAL parameter. Leave it out and the SDK picks a random name.

• micEnabled:

  • This is a boolean flag, indicating whether a participant's microphone will be automatically enabled when they join the live stream. This property will be completely ignored for Audience participants, as they are not allowed to publish their audio.

• camEnabled:

  • This is a boolean flag, indicating whether a participant's camera will be automatically enabled when they join the live stream. This property will be completely ignored for Audience participants, as they are not allowed to publish their video.

• metaData:

  • If you want to provide additional details about the participants joining the live stream, such as their profile image, you can pass that information in this parameter.
  • It has to be of Map<String, dynamic> type.
  • This is an OPTIONAL parameter.

• participantId:

  • This is a unique identifier for the participant's inside the live stream.

    • It can be used to specify the unique identifier which can be linked with your own database service.
    • It has to be of String type.
    • This is an OPTIONAL parameter. By default VideoSDK will generate unique id for each participant.

• multiStream:

  • This is a boolean flag, indicating whether the host's media stream should send multiple resolution layers or a single resolution layer.
  • This is an OPTIONAL parameter. Leave it out and the SDK sends multiple layers.

Get the token and streamId with the functions above, for example on your joining screen, and pass them to the screen that shows the live stream.

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

class LiveStreamScreen extends StatefulWidget {
  final String liveStreamId;
  final String token;

  const LiveStreamScreen(
      {super.key, required this.liveStreamId, required this.token});

  @override
  State<LiveStreamScreen> createState() => _LiveStreamScreenState();
}

class _LiveStreamScreenState extends State<LiveStreamScreen> {
  late Room _room;

  @override
  void initState() {
    super.initState();
    //Creating a new Room based on the passed LivestreamId and token from the Joining Screen
    // create room
    _room = VideoSDK.createRoom(
      roomId: widget.liveStreamId,
      mode: Mode.SEND_AND_RECV, // Mode.SEND_AND_RECV for hosts/co-hosts, Mode.RECV_ONLY for audience
      token: widget.token,
      participantName: "<Participant Name>",
      micEnabled: true, //Ignore for audience
      camEnabled: true, //Ignore for audience
      participantId: "<Unique Participant ID>", // Optional
      multiStream: true, //Ignore for audience
    );
  }

  @override
  Widget build(BuildContext context) {
    return YourLivestreamWidget();
  }
}

note

createRoom() does not connect to the live stream. Call join() to join it, as described in Join/Leave Live Stream. room.localParticipant exists from createRoom(). Before join it carries the id and name you passed, empty when you passed none; join fills in the ones the room assigned.

API Reference

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

• createRoom