100ms SDK Flutter Quickstart Guide

Overview

This overview shows the major steps involved in creating a Demo Flutter Project with the 100ms SDK. Each section links to extra detail.

A sample app demonstrating this is available here.

Jump to a section you're interested in or read top down to get the overview

  • Show an optional of the user's audio video with the 100ms hmssdk.preview.

Prerequisites

Familiarity with the fundamentals of Flutter apps.

To join a video call you need an authentication token and a room id. Or a server that will translate the link into them. The 100ms Dashboard is one way to generate these auth tokens. In production your own server will generate these and manage user authentication.

Links created by the dashboard will stop working after 10k minutes of video calls. You'll need to setup your own server after.

For the purposes of this quickstart you can rely on just the 100ms dashboard. Sign up for the 100ms Dashboard here.

From either the dashboard, or your own server once implemented, you need to generate a video call link. Video call links generated by the 100ms Dashboard look like https://myname.app.100ms.live/meeting/correct-horse-battery.

⚙️ For Production

With your own server for authentication and link generation, the format of the link is up to you.

Add SDK dependencies

Add the hmssdk_flutter plugin in dependencies of pubspec.yaml

#pubspec.yaml dependencies: flutter: sdk: flutter hmssdk_flutter:

Login

Request

Here's how to get an auth token with 100ms's demo authentication

  1. Sign up to the dashboard.
  2. Get your video call link. It should look like https://myname.app.100ms.live/meeting/correct-horse-battery
  3. Send an http post request to https://prod-in.100ms.live/hmsapi/get-token
  4. With the header "subdomain" set to myname.app.100ms.live if your link was https://myname.app.100ms.live/meeting/correct-horse-battery
  5. For a link of the type https://myname.app.100ms.live/meeting/correct-horse-battery The body is json with the format {"code": "correct-horse-battery", "user_id":"your-customer-id" } the user_id can be any random string as well and you can create it with UUID.randomUUID().toString(),.

⚙️ For Production

Maybe you won't use links at all. You will need to generate tokens on the backend, and rooms for users. Look up the Token Setup Guide here.

Response

The 100ms server will respond with an auth token like this {"token":"some-token-string"}.

Add Permissions

Android Permissions

Camera, Recording Audio and Internet permissions are required. Add them to your AndroidManifest.xml.

<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.INTERNET" />

You will also need to request Camera and Record Audio permissions at runtime before you join a call or display a preview. Please follow Android Documentation for runtime permissions.

iOS Permissions

Add following permissions in iOS Info.plist file

<key>NSMicrophoneUsageDescription</key> <string>{YourAppName} wants to use your microphone</string> <key>NSCameraUsageDescription</key> <string>{YourAppName} wants to use your camera</string> <key>NSLocalNetworkUsageDescription</key> <string>{YourAppName} App wants to use your local network</string>

Join a Video Call

To join a video call, call join method on HMSMeeting with the config settings. To listen the updates, call addMeetingListener on HMSMeeting.

These are some listener's callback functions:

onJoin - called when the join was successful and you have entered the room.

💡 Audio will be automatically connected, video requires some work on your side.

onPeerUpdate - called when a person joins or leaves the call and when their audio/video mutes/unmutes.

onTrackUpdate - usually when a person joins the call, the listener will first call onPeerUpdate to notify about the join. Subsequently onTrackUpdate will be called with their actual video track.

💡 It's essential that this callback is listened to or you may have peers without video.

_meeting = HMSMeeting(); _meeting.joinMeeting(config: this.config); _meeting.addMeetingListener(listener); class AppUpdateListener extends HMSUpdateListener { void onJoin({required HMSRoom room}) {} void onPeerUpdate({required HMSPeer peer, required HMSPeerUpdate update}) {} void onTrackUpdate({required HMSTrack track, required HMSTrackUpdate trackUpdate, required HMSPeer peer}) {} void onMessage({required HMSMessage message}) {} void onUpdateSpeakers({required List<HMSSpeaker> updateSpeakers}) {} void onRoleChangeRequest({required HMSRoleChangeRequest roleChangeRequest}) {} void onRoomUpdate({required HMSRoom room, required HMSRoomUpdate update}) {} void onReconnected() {} void onReconnecting() {} void onError({required HMSError error}) {} }

How you know when people join or leave

The join method takes an interface called HMSUpdateListener. It lets you know when peers join and leave the call, mute/unmute their audio and video and lots more.

The HMSUpdateListener has a callback to notify about people joining or leaving. It is onPeerUpdate(type: HMSPeerUpdate, peer: HMSPeer).

💡 HMSPeer is object that represents a person in the call.


How to render audio and video

The SDK plays the audio for every person who joins the call. Audio will begin playing when join succeeds. To see the person's video you need to create an instance of HMSVideoView with height and width in arguments.

Showing Videos

A peer represents one person in the video call.

A peer's video track is in hmsPeer.videoTrack. ScreenShares can be found in auxilary tracks of peer i.e the auxiliary tracks is a list of tracks, one of which can be a ScreenShare if they have chosen to share their screen.

peer.auxiliaryTracks ?.where((each) => each.kind == HMSTrackKind.kHMSTrackKindVideo);

Mute/UnMute Audio

You can mute/unmute audio by calling switchAudio on HMSMeeting. isOn is state variable. If isOn is true then audio will unmute and if its false then audio will mute.

/// audio unmute _meeting.switchAudio(isOn: true); /// audio mute _meeting.switchAudio(isOn: false);

Mute/UnMute Video

You can mute/unmute video by calling switchVideo on HMSMeeting. isOn is state variable. If isOn is true then video will turn on and if its false then video will turn off.

/// video on _meeting.switchVideo(isOn: true); /// video off _meeting.switchVideo(isOn: false);

Leave a video call

To leave a video call, just call leave on HMSMeeting.

_meeting.leaveMeeting();

Where to go from here

Checkout the simple version of the project.

Glossary

  • Room: When you join a particular video call, all the peers said to be in a video call room
  • Track: Media. Can be the audio track or the video track.
  • Peer: One participant in the video call. Local peers are you, remote peers are others.
  • Broadcast: Chat messages are broadcasts.