100ms Flutter SDK ?
Here you will find everything you need to build experiences with video using 100ms iOS/Android SDK. Dive into our SDKs, quick starts, add real-time video, voice, and screen sharing to your web and mobile applications.
? Download the Sample iOS app here: https://testflight.apple.com/join/Uhzebmut
? Download the Sample Android app here: https://appdistribution.firebase.dev/i/b623e5310929ab70
?♀️ How to run the Sample App
- In project root, run
flutter pub get
- Change directory to
example
folder, runflutter packages pub run build_runner build --delete-conflicting-outputs
- Run either
flutter build ios
ORflutter build apk
- Finally,
flutter run
? Key Concepts
Room
- A room represents real-time audio, video session, the basic building block of the 100mslive Video SDKTrack
- A track represents either the audio or video that makes up a streamPeer
- A peer represents all participants connected to a room. Peers can be "local" or "remote"Broadcast
- A local peer can send any message/data to all remote peers in the room
Generating Auth Token
Auth Token is used in HMSConfig instance to setup configuration.
So you need to make an HTTP request. you can use any package we are using http
package.
You will get your token endpoint at your 100ms dashboard and append api/token
to that endpoint and make an http post request.
Example:
after generating token parse it using json.
You will need this token later explained below.
♻️ Setup event listeners
100ms SDK provides callbacks to the client app about any change or update happening in the room after a user has joined by implementing HMSUpdateListener
. These updates can be used to render the video on screen or to display other info regarding the room.
? How to listen to Track, Peer and Room updates?
The HMS SDK sends updates to the application about any change in HMSPeer , HMSTrack or HMSRoom via the callbacks in HMSUpdateListener.
Application need to listen to the corresponding updates in onPeerUpdate , onTrackUpdate or onRoomUpdate
The following are the different types of updates that are emitted by the SDK -
? How to know the type and source of Track?
HMSTrack contain a field called source which denotes the source of the Track.
Source can have the following values - regular (normal), screen (for screenshare)and plugin (for plugins)
To know the type of track, check the value of type which would be one of the enum values - AUDIO or VIDEO
? Provide joining configuration
To join a room created by following the steps described in the above section, clients need to create a HMSConfig
instance and use that instance to call join
method of HMSSDK
userId
: should be unique we are using Uuid
package to generate one.
roomId
: id of the room which you want to join.
token
: follow the above step 1 to generate token.
userName
: your name using which you want to join the room.
? Join a room
Use the HMSConfig and HMSUpdateListener instances to call the join method on the instance of HMSSDK created above.
Once Join succeeds, all the callbacks keep coming on every change in the room and the app can react accordingly
? Leave Room
Call the leave method on the HMSSDK instance
? Mute/Unmute Local Audio
? Mute/Unmute Local Video
? HMSTracks Explained
HMSTrack
is the super-class of all the tracks that are used inside HMSSDK
. Its hierarchy looks like this -
? Display a Track
To display a video track, first get the HMSVideoTrack
& pass it on to HMSVideoView
using setVideoTrack
function. Ensure to attach the HMSVideoView
to your UI hierarchy.
Change a Role
To change role, you will provide peerId of selected peer and new roleName from roles. If forceChange is true, the system will prompt user for the change. If forceChange is false, user will get a prompt to accept/reject the role.
After changeRole is called, HMSUpdateListener's onRoleChangeRequest will be called on selected user's end.
? Chat Messaging
You can send a chat or any other kind of message from local peer to all remote peers in the room.
To send a message first create an instance of HMSMessage
object.
Add the information to be sent in the message
property of HMSMessage
.
Then use the Future<void> sendMessage(String message)
function on instance of HMSMeeting.
When you(the local peer) receives a message from others(any remote peer), void onMessage({required HMSMessage message})
function of HMSUpdateListener
is invoked.
?♀️ Checkout the sample implementation in the Example app folder.
? Preview
You can use our preview feature to unmute/mute audio/video before joining the room.
You can implement your own preview listener using this abstract class HMSPreviewListener
? Setup Guide
-
Sign up on https://dashboard.100ms.live/register & visit the Developer tab to access your credentials.
-
Get familiarized with Tokens & Security here
-
Complete the steps in Auth Token Quick Start Guide
-
Get the HMSSDK via pub.dev. Add the
hmssdk_flutter
to your pubspec.yaml
Android Integration
Add following permissions in Android AndroidManifest.xml file
☝️ Pre-requisites
- Support for Android API level 24 or higher
- Support for Java 8
? Supported Devices
The Android SDK supports Android API level 21 and higher. It is built for armeabi-v7a, arm64-v8a, x86, and x86_64 architectures.
iOS Integration
Add following permissions in iOS Info.plist file