100ms flutter
1.10.6
Melden Sie sich unter https://dashboard.100ms.live/register an und besuchen Sie die Registerkarte Entwickler, um auf Ihre Anmeldeinformationen zuzugreifen.
Lassen Sie sich hier mit Token & Security vertraut machen
Führen Sie die Schritte im Auth Token Quick Start Guide aus
Holen Sie sich das HMSDK über Pub.dev. Fügen Sie die hmssdk_flutter in Ihrem Pubspec.yaml hinzu.
Verweisen Sie hier den vollständigen Installationshandbuch.
Die vollständige Beispiel -App ist hier erhältlich.
Wir haben Erklärungen und empfohlene Verwendungshandbuch für verschiedene Funktionen, UI -Layouts, Datenspeicher usw. in Beispiel App Readme hinzugefügt.
Um die Beispiel -App in Ihrem System auszuführen, folgen Sie diesen Schritten aus:
Klon die 100 ms flattern Github Repo
In Project Root flutter pub get das Flutter -Paket erstellen
Ändern Sie das Verzeichnis in example
Um die App auszuführen, führen Sie einfach den Befehl flutter run aus, um die App auf einem angeschlossenen Gerät, iOS -Simulator oder Android -Emulator auszuführen.
Stellen Sie sicher, dass Sie das korrekte Entwicklungsteam im Abschnitt XCode Signing & Capabilities festgelegt haben, um auf einem iOS -Gerät (iPhone oder iPad) auszuführen.
Die Standardbeispiel -App verwendet die Anbieter -Statusverwaltungsbibliothek. Für andere Implementierungen schauen Sie sich bitte an -
 |  |  |
 |  |  |
Der Android SDK unterstützt Android API Level 21 und höher. Es ist für Architekturen für Barmabi-V7A, ARM64-V8A, X86 und X86_64 gebaut. Geräte mit Android OS 12 oder höher werden empfohlen.
iPhone & iPads mit iOS -Version 12 oder höher werden unterstützt. Geräte, die iOS 16 oder höher ausgeführt werden, werden empfohlen.
Hier finden Sie eine vollständige Berechtigungshandbuch.
Fügen Sie die folgenden Berechtigungen in die AndroidManifest.xml -Datei von Android hinzu - -
< uses-feature android : name = " android.hardware.camera " />
< uses-feature android : name = " android.hardware.camera.autofocus " />
< uses-permission android : name = " android.permission.CAMERA " />
< uses-permission android : name = " android.permission.CHANGE_NETWORK_STATE " />
< uses-permission android : name = " android.permission.MODIFY_AUDIO_SETTINGS " />
< uses-permission android : name = " android.permission.RECORD_AUDIO " />
< uses-permission android : name = " android.permission.INTERNET " />
< uses-permission android : name = " android.permission.ACCESS_NETWORK_STATE " />
< uses-permission android : name = " android.permission.FOREGROUND_SERVICE " />
< uses-permission android : name = " android.permission.BLUETOOTH " android : maxSdkVersion = " 30 " />
< uses-permission android : name = " android.permission.BLUETOOTH_CONNECT " />Fügen Sie die folgenden Berechtigungen in iOS info.plist -Datei hinzu
< 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 > Room Ein Raum ist das grundlegende Objekt, das 100 ms SDKs auf eine erfolgreiche Verbindung zurückgeben. Dies enthält Verweise auf Gleichaltrige, Spuren und alles, was Sie benötigen, um eine Live -A/V- oder Live -Streaming -App zu rendern.
Peer a Peer ist das von 100 ms SDKs zurückgegebene Objekt, das alle Informationen über einen Benutzer enthält - Name, Rolle, Video -Track usw.
Track a Track ist ein Segment von Medien (Audio/Video), das aus der Kamera und dem Mikrofon des Peer aufgenommen wurde. Peers in einer Sitzung veröffentlichen lokale Tracks und abonnieren Remote -Tracks von anderen Kollegen.
Role Eine Rolle definiert, wer ein Gleichaltrige sehen/hören kann, welche Qualität sie veröffentlichen, ob sie Berechtigungen für die Veröffentlichung von Video/Screenshare, stumm jemandem, die Rolle eines Menschen ändern können.
100MS SDK bietet Rückrufe zur Client -App über Änderungen oder Aktualisierungen im Raum, nachdem ein Benutzer durch die Implementierung HMSUpdateListener verbunden ist. Diese Updates können verwendet werden, um das Video auf dem Bildschirm zu rendern oder andere Informationen zum Raum anzuzeigen. Werfen wir einen Blick auf das Flussdiagramm.
/// 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 the screen or to display other info regarding the room.
abstract class HMSUpdateListener {
/// This will be called on a successful JOIN of the room by the user
///
/// This is the point where applications can stop showing their loading state
/// [room] : the room which was joined
void onJoin ({ required HMSRoom room});
/// This will be called whenever there is an update on an existing peer
/// or a new peer got added/existing peer is removed.
///
/// This callback can be used to keep a track of all the peers in the room
/// [peer] : the peer who joined/left or was updated
/// [update] : the triggered update type. Should be used to perform different UI Actions
void onPeerUpdate ({ required HMSPeer peer, required HMSPeerUpdate update});
/// This is called when there are updates on an existing track
/// or a new track got added/existing track is removed
///
/// This callback can be used to render the video on screen whenever a track gets added
/// [track] : the track which was added, removed or updated
/// [trackUpdate] : the triggered update type
/// [peer] : the peer for which track was added, removed or updated
void onTrackUpdate ({ required HMSTrack track, required HMSTrackUpdate trackUpdate, required HMSPeer peer});
/// This will be called when there is an error in the system
/// and SDK has already retried to fix the error
/// [error] : the error that occurred
void onHMSError ({ required HMSException error});
/// This is called when there is a new broadcast message from any other peer in the room
///
/// This can be used to implement chat is the room
/// [message] : the received broadcast message
void onMessage ({ required HMSMessage message});
/// This is called every 1 second with a list of active speakers
///
/// ## A HMSSpeaker object contains -
/// - peerId: the peer identifier of HMSPeer who is speaking
/// - trackId: the track identifier of HMSTrack which is emitting audio
/// - audioLevel: a number within range 1-100 indicating the audio volume
///
/// A peer who is not present in the list indicates that the peer is not speaking
///
/// This can be used to highlight currently speaking peers in the room
/// [speakers] the list of speakers
void onUpdateSpeakers ({ required List < HMSSpeaker > updateSpeakers});
/// This is called when there is a change in any property of the Room
///
/// [room] : the room which was joined
/// [update] : the triggered update type. Should be used to perform different UI Actions
void onRoomUpdate ({ required HMSRoom room, required HMSRoomUpdate update});
/// when network or some other error happens it will be called
void onReconnecting ();
/// when you are back in the room after reconnection
void onReconnected ();
/// This is called when someone asks for a change or role
///
/// for eg. admin can ask a peer to become host from guest.
/// this triggers this call on peer's app
void onRoleChangeRequest ({ required HMSRoleChangeRequest roleChangeRequest});
/// when someone requests for track change of yours be it video or audio this will be triggered
/// [hmsTrackChangeRequest] request instance consisting of all the required info about track change
void onChangeTrackStateRequest ({ required HMSTrackChangeRequest hmsTrackChangeRequest});
/// when someone kicks you out or when someone ends the room at that time it is triggered
/// [hmsPeerRemovedFromPeer] it consists of info about who removed you and why.
void onRemovedFromRoom ({ required HMSPeerRemovedFromPeer hmsPeerRemovedFromPeer});
/// whenever a new audio device is plugged in or audio output is changed we
/// get the onAudioDeviceChanged update
/// This callback is only fired on Android devices. On iOS, this callback will not be triggered.
/// - Parameters:
/// - currentAudioDevice: Current audio output route
/// - availableAudioDevice: List of available audio output devices
void onAudioDeviceChanged (
{ HMSAudioDevice ? currentAudioDevice,
List < HMSAudioDevice > ? availableAudioDevice});
/// Whenever a user joins a room [onSessionStoreAvailable] is fired to get an instance of [HMSSessionStore]
/// which can be used to perform session metadata operations
/// - Parameters:
/// - hmsSessionStore: An instance of HMSSessionStore which will be used to call session metadata methods
void onSessionStoreAvailable (
{ HMSSessionStore ? hmsSessionStore});
/// Upon joining a room with existing peers, onPeerListUpdated will be called with the list of peers present
/// in the room instead of getting onPeerUpdate for each peer in the room.
/// Subsequent peer joins/leaves would be notified via both onPeerUpdate and onPeerListUpdated
void onPeerListUpdate (
{ required List < HMSPeer > addedPeers, required List < HMSPeer > removedPeers});
} Der 100MS SDK sendet Aktualisierungen an die Anwendung über jede Änderung in HMSpeer, HMStrack, HMSroom usw. über die Rückrufe in HMSUpdateListener .
Die Methoden von HMSUPDATELISTEERER werden angerufen, um Updates im Raum wie ein Peer -Join/Urlaub zu benachrichtigen, Stummschalter/Stütze usw. zu verfolgen usw.
Weitere Informationen zu Update -Hörern finden Sie hier.
Im Folgenden sind die verschiedenen Arten von Updates aufgeführt, die vom SDK - emittiert werden -
HMSPeerUpdate
.peerJoined: A new peer joins the Room
.peerLeft: An existing peer leaves the Room
.roleUpdated: When a peer's Role has changed
.metadataChanged: When a peer's metadata has changed
.nameChanged: When a peer's name has changed
HMSTrackUpdate
.trackAdded: A new track (audio or video) is added to the Room
.trackRemoved: An existing track is removed from the Room
.trackMuted: A track of a peer is muted
.trackUnMuted: A muted track of a peer was unmuted
.trackDegraded: When track is degraded due to bad network conditions
.trackRestored: When a degraded track is restored when optimal network conditions are available again
HMSRoomUpdate
.roomMuted: When room is muted to due external interruption like a Phone Call
.roomUnmuted: When a muted room is unmuted when external interruption has ended
.serverRecordingStateUpdated: When Server recording state is updated
.browserRecordingStateUpdated: When Browser recording state is changed
.rtmpStreamingStateUpdated: When RTMP is started or stopped
.hlsStreamingStateUpdated: When HLS is started or stopped
.hlsRecordingStateUpdated: When HLS recording state is updated Um mit anderen in Audio- oder Videoanrufen teilzunehmen und mit anderen zu interagieren, muss der Benutzer einem room join .
Um sich einem Raum anzuschließen, sollte Ihre App - haben -
Um sich einem Raum anzuschließen, benötigen wir ein Authentifizierungs -Token, wie oben erwähnt. Es gibt zwei Methoden, um das Token zu erhalten:
Wir können das Authentifizierungs-Token mit einem Raumcode von der Erfüllung der URL erhalten.
Lassen Sie uns die Subdomain und den Code aus der Beispiel- https://public.app.100ms.live/meeting/xvm-wxwo-gbl in dieser URL verstehen
publicxvm-wxwo-gbl Um nun den Raumcode vom Treffen mit URL zu erhalten, können wir unsere eigene Logik schreiben oder die getCode -Methode von hier verwenden
Um Token zu generieren, werden wir getAuthTokenByRoomCode -Methode von HMSSDK verwenden. Diese Methode hat roomCode als erforderlichen Parameter, userId und endPoint als optionaler Parameter.
Diese Methode sollte nach dem Aufrufen der
build-Methode aufgerufen werden.
Lassen Sie uns die Implementierung auschecken:
//This returns an object of Future<dynamic> which can be either
//of HMSException type or String? type based on whether
//method execution is completed successfully or not
dynamic authToken = await hmsSDK. getAuthTokenByRoomCode (roomCode : 'YOUR_ROOM_CODE' );
if (authToken is String ){
HMSConfig roomConfig = HMSConfig (
authToken : authToken,
userName : userName,
);
hmsSDK. join (config : roomConfig);
}
else if (authToken is HMSException ){
// Handle the error
}Um Audio-/Videofunktionen zu testen, müssen Sie eine Verbindung zu einem 100 -ms -Raum herstellen. Bitte überprüfen Sie die folgenden Schritte für dasselbe:
Video Conferencing Starter Kit , um einen Raum mit einer Standardvorlage zu erstellen, die ihm zugewiesen ist, um diese App schnell zu testen.Room Id des oben erstellten Raums und klicken Sie oben rechts auf die Schaltfläche Join Room .Auth Token for role finden. Sie können auf das Symbol "Kopieren" klicken, um das Authentifizierungs -Token zu kopieren.Token aus 100 ms Dashboard dient nur zu Testzwecken. Für Produktionsanwendungen müssen Sie Token auf Ihrem eigenen Server generieren. Weitere Informationen finden Sie im Abschnitt "Management Token" in Authentication and Tokens Guide.
Sie können diese Felder auch optional im HMSDK -Konstruktor - übergeben -
Track -Einstellungen - wie das Verbinden eines Raums mit gedämpftem Audio oder Video mit dem HMSTrackSetting -Objekt. Weitere Informationen finden Sie hier.
Benutzermetadaten - Dies kann verwendet werden, um zusätzliche Metadaten zu übergeben, die dem Benutzer zugeordnet sind, indem metadata des HMSConfig -Objekts verwendet werden. Für EG: Benutzer-ID-Zuordnung auf der Anwendungsseite. Weitere Informationen finden Sie hier.
Weitere Informationen zum Beitritt zu einem Raum finden Sie hier.
// create a class that implements `HMSUpdateListener` and acts as a data source for our UI
class Meeting implements HMSUpdateListener {
late HMSSDK hmsSDK;
Meeting () {
initHMSSDK ();
}
void initHMSSDK () async {
hmsSDK = HMSSDK (); // create an instance of `HMSSDK` by invoking it's constructor
await hmsSDK. build (); // ensure to await while invoking the `build` method
hmsSDK. addUpdateListener ( this ); // `this` value corresponds to the instance implementing HMSUpdateListener
HMSConfig config = HMSConfig (authToken : 'eyJH5c' , // client-side token generated from your token service
userName : 'John Appleseed' );
hmsSDK. join (config : config); // Now, we are primed to join the room. All you have to do is call `join` by passing the `config` object.
}
... // implement methods of HMSUpdateListener
}Es kommt darauf an. Das gesamte Setup wurde bisher durchgeführt, damit wir Live-Streaming-Videos in unserer schönen App zeigen können.
Das 100 -ms -Flutter -Paket bietet das HMSVideoView -Widget, das das Video auf dem Bildschirm rendert.
Wir müssen lediglich ein Video -Track -Objekt an die HMSVideoView übergeben, um die automatische Darstellung des Live -Video -Streams zu beginnen.
Wir können auch optional Requisiten wie key , scaleType und mirror übergeben, um das HMSVideoView -Widget anzupassen.
HMSVideoView (
track : videoTrack,
key : Key (videoTrack.trackId),
),Weitere Informationen zum Anzeigen eines Videos finden Sie hier.
Sobald Sie mit dem Meeting fertig sind und beenden möchten, rufen Sie an der HMSDK -Instanz, die Sie erstellt haben, um sich dem Raum anzuschließen.
Entfernen Sie vor dem Aufrufen von Urlaub die HMSUpdateListener -Instanz als:
// updateListener is the instance of class in which HMSUpdateListener is implemented
hmsSDK. removeUpdateListener (updateListener); Um das Meeting zu verlassen, rufen Sie die leave von HMSSDK an und übergeben Sie den Parameter hmsActionResultListener , um einen Erfolgsruf von SDK in der onSuccess Override -Methode wie folgt abzurufen.
Sie müssen die
HMSActionResultListener-Schnittstelle in einer Klasse implementieren, umonSuccessundonException-Rückruf zu erhalten. Um zu wissen, wie SieHMSActionResultListenerimplementieren können, finden Sie hier die Dokumente
class Meeting implements HMSActionResultListener {
//this is the instance of class implementing HMSActionResultListener
await hmsSDK. leave (hmsActionResultListener : this );
@override
void onSuccess (
{ HMSActionResultListenerMethod methodType = HMSActionResultListenerMethod .unknown, Map < String , dynamic > ? arguments}) {
switch (methodType) {
case HMSActionResultListenerMethod .leave :
// Room leaved successfully
// Clear the local room state
break ;
...
}
}
}Weitere Informationen zum Verlassen eines Raumes finden Sie hier.
HMSTrack ist die Superklasse aller Tracks, die in HMSSDK verwendet werden. Seine Hierarchie sieht so aus -
HMSTrack
- AudioTrack
- LocalAudioTrack
- RemoteAudioTrack
- VideoTrack
- LocalVideoTrack
- RemoteVideoTrack HMStrack enthält ein Feld namens Quelle, das die Quelle der Spur bezeichnet.
Source kann die folgenden Werte haben -
regular für normale Audio- oder Video -Veröffentlichung von Kollegenscreen für Screenshare Track, wenn ein Peer beginnt, seinen Bildschirm in einem Raum zu übertragenplugin für ein benutzerdefiniertes Audio- oder Video -Plugin, das im Raum verwendet wird Überprüfen Sie den Wert des Typs, der einer der Enum -Werte wäre - AUDIO oder VIDEO
Sie können einen Chat oder eine andere Art von Nachricht von einem örtlichen Kollegen an alle Remote -Kollegen im Raum senden.
So senden Sie eine Nachricht zuerst eine Instanz des HMSMessage -Objekts.
Fügen Sie die Informationen hinzu, die in der message von HMSMessage gesendet werden sollen.
Verwenden Sie dann die Funktion sendBroadcastMessage auf der Instanz von HMSSDK für die Sendungsnachricht, sendGroupMessage für Gruppennachricht und sendDirectMessage für direkte Nachricht.
Wenn Sie (der lokale Peer) eine Nachricht von anderen (einem Remote -Peer) empfangen, wird die Funktion von HMSUpdateListener void onMessage({required HMSMessage message}) aufgerufen.
Weitere Informationen zu Chat -Messaging finden Sie hier.
// onMessage is HMSUpdateListener method called when a new message is received
@override
void onMessage ({ required HMSMessage message}) {
//Here we will receive messages sent by other peers
}
/// [message] : Message to be sent
/// [type] : Message type(More about this at the end)
/// [hmsActionResultListener] : instance of class implementing HMSActionResultListener
//Here this is an instance of class that implements HMSActionResultListener i.e. Meeting
hmsSDK. sendBroadcastMessage (
message : message,
type : type,
hmsActionResultListener : this );
/// [message] : Message to be sent
/// [peerTo] : Peer to whom message needs to be sent
/// [type] : Message type(More about this at the end)
/// [hmsActionResultListener] : instance of class implementing HMSActionResultListener
//Here this is an instance of class that implements HMSActionResultListener i.e. Meeting
hmsSDK. sendDirectMessage (
message : message,
peerTo : peerTo,
type : type,
hmsActionResultListener : this );
/// [message] : Message to be sent
/// [hmsRolesTo] : Roles to which this message needs to be sent
/// [type] : Message type(More about this at the end)
/// [hmsActionResultListener] : instance of class implementing HMSActionResultListener
//Here this is an instance of class that implements HMSActionResultListener i.e. Meeting
hmsSDK. sendGroupMessage (
message : message,
hmsRolesTo : rolesToSendMessage,
type : type,
hmsActionResultListener : this );
@override
void onSuccess (
{ HMSActionResultListenerMethod methodType =
HMSActionResultListenerMethod .unknown,
Map < String , dynamic > ? arguments}) {
switch (methodType) {
case HMSActionResultListenerMethod .sendBroadcastMessage :
//Broadcast Message sent successfully
break ;
case HMSActionResultListenerMethod .sendGroupMessage :
//Group Message sent successfully
break ;
case HMSActionResultListenerMethod .sendDirectMessage :
//Direct Message sent successfully
break ;
...
}
}
@override
void onException (
{ HMSActionResultListenerMethod methodType =
HMSActionResultListenerMethod .unknown,
Map < String , dynamic > ? arguments,
required HMSException hmsException}) {
switch (methodType) {
case HMSActionResultListenerMethod .sendBroadcastMessage :
// Check the HMSException object for details about the error
break ;
case HMSActionResultListenerMethod .sendGroupMessage :
// Check the HMSException object for details about the error
break ;
case HMSActionResultListenerMethod .sendDirectMessage :
// Check the HMSException object for details about the error
break ;
...
}
}? Der vorgebaute QuickStart -Handbuch ist hier verfügbar.
Verweisen Sie hier den vollständigen Dokumentationshandbuch.
♀️ Checkout Die hier verfügbare Beispiel -App -Implementierung.
Wir haben Erklärungen und empfohlene Verwendungshandbuch für verschiedene Funktionen, UI -Layouts, Datenspeicher usw. in Beispiel App Readme hinzugefügt.
100 ms Flutter -Apps werden in den App Stores veröffentlicht. Sie können sie hier herunterladen:
? iOS-App im Apple App Store: https://apps.apple.com/app/100ms-live/id1576541989
? Android -App im Google Play Store: https://play.google.com/store/apps/details?id=live.hms.flutter
