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.

PackageVersion
hms_room_kitPub Version
hmssdk_flutterPub Version

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:

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

Pub Version

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

Please follow the below instructions to test the app for the android target platform:

  1. Add minimum SDK version (minSdkVersion 21) in "android/app/build.gradle" file (inside "defaultConfig").
... defaultConfig { ... minSdkVersion 21 ... } ...
  1. To add PIP support in your app manifest file("android/app/src/main/AndroidManifest.xml") add:
<activity .... android:supportsPictureInPicture="true" android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation" ... />
  1. For Auto Enter PIP support(below android 12) in your MainActivity.kt file("android/app/src/main/kotlin/live/hms/flutter/MainActivity.kt") add:
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) } }
  1. For screenshare in your MainActivity.kt file("android/app/src/main/kotlin/live/hms/flutter/MainActivity.kt") add:
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)) } }
  1. Add the FOREGROUND_SERVICE permission in AndroidManifest.xml file("android/app/src/main/AndroidManifest.xml"):
<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), ), ), ), ), );
  1. 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; }
  • 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.

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


Have a suggestion? Recommend changes ->

Was this helpful?

1234