Prebuilt Quickstart

Overview

This guide will walk you through simple instructions to create a video conferencing app using 100ms Prebuilt and and test it using an emulator or your mobile phone. Ensure that you use the latest versions of the SDKs to follow the instructions in this guide.

Package	Version
hms_room_kit
hmssdk_flutter

Create a sample app

This section contains instructions to create a simple Flutter video conferencing app. We will help you with instructions to understand the project setup and complete code sample to implement this quickly.

Prerequisites

To complete this implementation, you must have the following:

• A 100ms account if you don't have one already.
• Flutter 3.10.0 or higher
• Dart 3.0.0 or above
• Use VS code, Android Studio, Xcode or any other IDE that supports Flutter. For more information on setting up an IDE, check Flutter's official guide.

Create a Flutter app

Once you have the prerequisites, follow the steps below to create a Flutter app. This guide will use VS code, but you can use any IDE that supports Flutter.

• Create a Flutter app using the terminal; you can get the Flutter SDK and use the below command:

  flutter create my_app
  

• Once the app is created, open it in VS code.

Add 100ms room kit to your project

Once you have created a Flutter app, you must add the hms_room_kit package to your project.

In project's pubspec.yaml file, under dependencies section add the following:

hms_room_kit:

• Run flutter pub get to download these dependencies to your app.

Application Setup

...
defaultConfig {
    ...
    minSdkVersion 21
    ...
}
...

<activity
    ....
    android:supportsPictureInPicture="true"
    android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
    ... />

import android.content.res.Configuration
import android.os.Build
import live.hms.hmssdk_flutter.methods.HMSPipAction
import live.hms.hmssdk_flutter.Constants

override fun onUserLeaveHint() {
    super.onUserLeaveHint()
    // This should only work for android version above 8 since PIP is only supported after
    // android 8 and will not be called after android 12 since it automatically gets handled by android.
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
        HMSPipAction.autoEnterPipMode(this)
    }
}

import android.app.Activity
import android.content.Intent
import live.hms.hmssdk_flutter.Constants

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
super.onActivityResult(requestCode, resultCode, data)

    if (requestCode == Constants.SCREEN_SHARE_INTENT_REQUEST_CODE && resultCode == Activity.RESULT_OK) {
        data?.action = Constants.HMSSDK_RECEIVER
        activity.sendBroadcast(data?.putExtra(Constants.METHOD_CALL, Constants.SCREEN_SHARE_REQUEST))
    }
}

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

Add the 100ms room kit to your app

We will be adding a join button to the app, on the button click we will route the user to the 100ms room kit. To do this, follow the steps below:

1. Add the below code for Join button in lib/main.dart file:

Scaffold(
    body: Center(
        child: ElevatedButton(
            style: ButtonStyle(
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
            ))),
            onPressed: () async => {
            ///Here will route the user to the 100ms room kit
            },
            child: const Padding(
            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
                child: Text(
                    'Join',
                    style: TextStyle(fontSize: 20),
                ),
            ),
        ),
    ),
);

2. Update the code in the onPressed method of the Join button by following code:

import 'package:hms_room_kit/hms_room_kit.dart';

 onPressed: () async => {
        await Navigator.push(
            context,
            MaterialPageRoute(
            builder: (context) => const HMSPrebuilt(roomCode: "Enter your room code here")
        ),
    ),
}

To know about how to get the room codes check the docs here

Leave Room callback

Sometimes your apps need to do some cleanup when the user leaves the room. To do this, you can use the onLeave callback of HMSPrebuilt widget. You need to pass a function to the onLeave callback which will be called when the user leaves the room.

void performCleanup() {
    // Do some cleanup here
}

HMSPrebuilt(
    roomCode: "abc-defg-hij",
    ///This function will be called when the user leaves the room
    onLeave: performCleanup
);

Checkout the 100ms Apps powered by hms_room_kit on App store / Play store

You can download & check out the 100ms Flutter app -

🤖 Flutter Android app from Google Play Store.

📱 Flutter iOS app from Apple App Store.

Supplementary Bytes

Let's understand the HMSPrebuilt Widget and its parameters a bit more in detail.

HMSPrebuilt is a StatelessWidget that you can plug in anywhere in your application to get a fully functional video conferencing/streaming experience, Customizable via dashboard.

It takes following parameters:

• roomCode - The room code of the room you want to join. You can get the room code from the 100ms dashboard. To know more about room code check the docs here.

• onLeave - A callback function that will be called when the user leaves the room. This is useful in cases where you wish to perform some operations when the user leaves the room.

• options - This is an instance of HMSPrebuiltOptions which is used to send parameters to prebuilt such as endPoints, userId, screenshare configs etc.

HMSPrebuiltOptions class has following fields:

class HMSPrebuiltOptions {

  //The name of the user
  final String? userName;

  //The id of the user
  final String? userId;

  //The token and init endpoints
  final Map<String, String>? endPoints;

  //To enable the debug mode for the prebuilt
  final bool debugInfo;

  //Screen share Config, to enable screen share for iOS
  //If you wish to enable screen share for iOS, you need to pass
  //this config
  final HMSIOSScreenshareConfig? iOSScreenshareConfig;

  ///To enable noise cancellation in prebuilt.
  ///Default value is true
  final bool enableNoiseCancellation;

}

• userName: String? - The name of the user that will be displayed in the room.
• userId: String? - The userId of the user.
• endPoints: Map<String, String>? - If you have your own token server you can pass the endPoints using the endPoints parameter.
• iOSScreenshareConfig: HMSIOSScreenshareConfig? - If you want to enable screenshare in your iOS app, you need to pass the iOSScreenshareConfig parameter. To know more about how to set iOSScreenshareConfig check the docs here.
• enableNoiseCancellation: bool - To enable noise cancellation in prebuilt. Default value is true.

Have questions or need help? Feel free to join us on Discord