Initialise Room - Flutter

To configure a VideoSDK room you require two things, first the token which will be used for Authentication purpose and a roomId which will be used to specify where a participant will join. Let's see each of the steps closely.

Generating Token

You can generate a token in two ways:

1. Temporary Token : You can visit Dashboard's API Key section and generate the 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
// API call to get the token from your server
Future<String> getTokenFromServer() async {
  final http.Response httpResponse = await http.post(
    //Using your token server's endpoint
    Uri.parse('http://localhost:8080/get-token'),
  );

  //Reading the token from the response
  return json.decode(httpResponse.body)['token'];
}

Generating Room ID

With the token ready, we can get the roomId from the VideoSDK's rooms API.

// API call to create room
Future<String> createRoomId(String token) async {
  final http.Response httpResponse = await http.post(
    //Using the VideoSDK API Endpoint
    Uri.parse('https://api.videosdk.live/v2/rooms'),
    //Passing the token in headers
    headers: {'Authorization': token},
  );

  //Destructuring the roomId from the response
  return json.decode(httpResponse.body)['roomId'];
}

Initialization of Room

We can initialize a new room using the createRoom method of the VideoSDK class. createRoom method returns a Room object, which will be configured using the provided token, roomId, participantId and other parameters.

createRoom()

Let's take a deeper look at the available configuration options first.

Room room = VideoSDK.createRoom(
  roomId: "Room-d",
  token: "Token",
  participantName: "<Name-of-participant>",
  micEnabled: true, // Flag to enable mic
  camEnabled: true, // Flag to enable webcam
  participantId: "Id-of-participant", // optional, default: SDK will generate
  maxResolution: MaxResolution.HD, // optional, the SDK uses hd when left out
  defaultCamera: FacingMode.FRONT, // optional, default: FacingMode.FRONT
  dynaCast: false, // optional, default: false
);

• roomId :

  • roomId is unique identifiers that allow participants to join a specific room or room.
  • It will be in the format of xxx-yyy-zzz and will be generated using the VideoSDK's Room API.

• participantName:

  • This will represent the name of the participant in the room.
  • 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 a room.
  • It defaults to true.

• camEnabled:

  • This is a boolean flag, indicating whether a participant's webcam will be automatically enabled when they join a room.
  • It defaults to true.

• participantId:

  • This will be the unique identifier for the participant inside the room.

    • 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.

caution

You must ensure that the participantId is not repeated in the same room or room, It will enable VideoSDK to eliminate any participant respect to that participantId.

• maxResolution:

  • The highest video resolution the room works at: MaxResolution.HD or MaxResolution.SD.
  • With MaxResolution.SD, the default webcam opens at 960x540 instead of 1280x720. A customCameraTrack keeps its own encoder config.
  • This is an OPTIONAL parameter. Leave it out and the SDK uses MaxResolution.HD.

• defaultCamera:

  • The camera the webcam starts on: FacingMode.FRONT or FacingMode.BACK.
  • A customCameraTrack keeps its own facing mode.
  • This is an OPTIONAL parameter. It defaults to FacingMode.FRONT.

• dynaCast:

  • When true, the server lowers the quality of the webcam video you send while no one is watching its larger layers, and raises it again when someone is.
  • It has no effect when multiStream is false.
  • This is an OPTIONAL parameter. It defaults to false.

To know more about other properties, you can follow our API Reference.

With all the configuration options explained, here is how you will be using the VideoSdk Class.

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

class RoomScreen extends StatefulWidget {
  final String roomId;
  final String token;

  const RoomScreen(
      {super.key, required this.roomId, required this.token});

  @override
  State<RoomScreen> createState() => _RoomScreenState();
}

class _RoomScreenState extends State<RoomScreen> {
  late Room _room;

  @override
  void initState() {
    super.initState();
    //Creating a new Room based on the passed roomId and token from the Joining Screen
    // create room
    _room = VideoSDK.createRoom(
      roomId: widget.roomId,
      token: widget.token,
      participantName: "John Doe",
      micEnabled: true,
      camEnabled: true,
      defaultCamera: FacingMode.FRONT, // Camera the webcam starts on
    );
  }

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

note

createRoom() does not connect to the room. Call join() to join it, as described in Join Room. 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