100ms flutter
1.10.6
Inscrivez-vous sur https://dashboard.100ms.live/register et visitez l'onglet Developer pour accéder à vos informations d'identification.
Familiarisez-vous avec les jetons et la sécurité ici
Complétez les étapes du guide de démarrage rapide du jeton AUTH
Obtenez le HMSSDK via Pub.Dev. Ajoutez le hmssdk_flutter à votre pubSpec.yaml.
Référez le guide d'installation complet ici.
L'exemple complet de l'application en vedette est disponible ici.
Nous avons ajouté des explications et un guide d'utilisation recommandé pour différentes fonctionnalités, dispositions d'interface utilisateur, magasin de données, etc. dans Exemple Readme de l'application.
Pour exécuter l'application d'exemple sur votre système, suivez ces étapes -
Clone le dépositif de Flutter Github de 100 ms
Dans Project Root, Run flutter pub get la construction du package Flutter
Modifier le répertoire en example de dossier
Maintenant, pour exécuter l'application, exécutez simplement la commande flutter run pour exécuter l'application sur un périphérique connecté, ou un simulateur iOS ou un émulateur Android.
Pour fonctionner sur un périphérique iOS (iPhone ou iPad), assurez-vous que vous avez défini la bonne équipe de développement dans la section Signature et capacités Xcode.
L'exemple par défaut de l'application utilise la bibliothèque de gestion de l'état du fournisseur. Pour d'autres implémentations, veuillez consulter -
 |  |  |
 |  |  |
Le SDK Android prend en charge l'API Android niveau 21 et supérieur. Il est conçu pour les architectures Armaibi-V7A, ARM64-V8A, X86 et X86_64. Les appareils exécutant Android OS 12 ou plus sont recommandés.
L'iPhone et les iPads avec iOS version 12 ou plus sont pris en charge. Les appareils exécutant iOS 16 ou plus sont recommandés.
Le guide complet des autorisations est disponible ici.
Ajoutez les autorisations suivantes dans le fichier AndroidManifest.xml d'Android -
< 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 " />Ajouter les autorisations suivantes dans le fichier iOS Info.plist
< 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 Une pièce est l'objet de base que les SDK de 100 ms renvoient sur une connexion réussie. Cela contient des références aux pairs, à des pistes et à tout ce dont vous avez besoin pour rendre une application de streaming en direct A / V ou en direct.
Peer A Peer est l'objet renvoyé par 100 ms SDK qui contient toutes les informations sur un utilisateur - nom, rôle, piste vidéo, etc.
Track d'une piste est un segment de supports (audio / vidéo) capturés à partir de l'appareil photo et du microphone du pair. Les pairs d'une session publient des pistes locales et s'abonnent à des pistes éloignées d'autres pairs.
Role un rôle définit qui peut voir / entendre un pair, la qualité à laquelle il publie sa vidéo, qu'il ait des autorisations pour publier la vidéo / la capture d'écran, Muet quelqu'un, changer le rôle de quelqu'un.
100ms SDK fournit des rappels à l'application Client sur toute modification ou mise à jour qui se passe dans la salle après qu'un utilisateur a rejoint en implémentant HMSUpdateListener . Ces mises à jour peuvent être utilisées pour rendre la vidéo à l'écran ou pour afficher d'autres informations concernant la salle. Jetons un coup d'œil à l'organigramme.
/// 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});
} Le SDK de 100 ms envoie des mises à jour à l'application sur tout changement de hmspeer, hmstrack, hmsroom, etc. via les rappels dans HMSUpdateListener .
Les méthodes de HMSUPDateListener sont invoquées pour informer les mises à jour dans la salle comme une jointure / congé de pair, une muet / un coup de main-d'œuvre, etc.
Plus d'informations sur les auditeurs de mise à jour sont disponibles ici.
Voici les différents types de mises à jour émises par le SDK -
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 Pour rejoindre et interagir avec les autres dans un appel audio ou vidéo, l'utilisateur doit join une room .
Pour rejoindre une pièce, votre application devrait avoir -
Pour rejoindre une pièce, nous avons besoin d'un jeton d'authentification comme mentionné ci-dessus. Il existe deux méthodes pour obtenir le jeton:
Nous pouvons obtenir le jeton d'authentification en utilisant le code de la salle à partir de l'URL de la réunion.
Comprenons le sous-domaine et le code de l'échantillon URL de cette URL: https://public.app.100ms.live/meeting/xvm-wxwo-gbl
publicxvm-wxwo-gbl Maintenant, pour obtenir le code de la salle à partir de l'URL de la réunion, nous pouvons écrire notre propre logique ou utiliser la méthode getCode à partir d'ici
Pour générer des jetons, nous utiliserons la méthode getAuthTokenByRoomCode de HMSSDK . Cette méthode a un roomCode en tant que paramètre requis, userId et endPoint comme paramètre facultatif.
Cette méthode doit être appelée après avoir appelé la méthode
build.
Découvrez la mise en œuvre:
//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
}Pour tester les fonctionnalités audio / vidéo, vous devez vous connecter à une salle de 100 ms; Veuillez vérifier les étapes suivantes pour la même chose:
Video Conferencing Starter Kit pour créer une pièce avec un modèle par défaut qui lui est attribué pour tester cette application rapidement.Room Id de la pièce que vous avez créée ci-dessus et cliquez sur le bouton Join Room en haut à droite.Auth Token for role ; Vous pouvez cliquer sur l'icône «Copier» pour copier le jeton d'authentification.Le jeton à partir du tableau de bord de 100 ms est à des fins de test uniquement, pour les applications de production, vous devez générer des jetons sur votre propre serveur. Reportez-vous à la section de jeton de gestion dans le guide d'authentification et de jetons pour plus d'informations.
Vous pouvez également passer éventuellement ces champs dans le constructeur HMSSDK -
Paramètres de piste - comme rejoindre une salle avec un audio ou une vidéo en désuté à l'aide de l'objet HMSTrackSetting . Plus d'informations sont disponibles ici.
Métadonnées de l'utilisateur - Ceci peut être utilisé pour transmettre toutes les métadonnées supplémentaires associées à l'utilisateur à l'aide metadata de l'objet HMSConfig . Pour EG: mappage de l'utilisateur-ID du côté de l'application. Plus d'informations sont disponibles ici.
Plus d'informations sur l'adhésion à une salle sont disponibles ici.
// 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
}Tout se résume à cela. Toute la configuration jusqu'à présent a été effectuée afin que nous puissions afficher des vidéos de diffusion en direct dans notre belle application.
Le package Flutter 100MS fournit le widget HMSVideoView qui rend la vidéo à l'écran.
Nous devons simplement passer un objet de piste vidéo au HMSVideoView pour commencer le rendu automatique du flux vidéo en direct.
Nous pouvons également éventuellement transmettre des accessoires comme key , scaleType , mirror pour personnaliser le widget HMSVideoView .
HMSVideoView (
track : videoTrack,
key : Key (videoTrack.trackId),
),Plus d'informations sur l'affichage d'une vidéo sont disponibles ici.
Une fois que vous avez terminé la réunion et que vous souhaitez quitter, appelez le congé sur l'instance HMSSDK que vous avez créée pour rejoindre la salle.
Avant d'appeler congé, supprimez l'instance HMSUpdateListener comme:
// updateListener is the instance of class in which HMSUpdateListener is implemented
hmsSDK. removeUpdateListener (updateListener); Pour quitter la réunion, appelez la méthode leave de HMSSDK et transmettez le paramètre hmsActionResultListener pour obtenir un rappel de réussite du SDK dans la méthode onSuccess Override comme suivant.
Vous devrez implémenter l'interface
HMSActionResultListenerdans une classe pour obtenir un rappelonSuccessetonException. Pour savoir comment implémenterHMSActionResultListener, vérifiez les documents ici
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 ;
...
}
}
}Plus d'informations sur la sortie d'une chambre sont disponibles ici.
HMSTrack est la super-classe de toutes les pistes utilisées à l'intérieur HMSSDK . Sa hiérarchie ressemble à ceci -
HMSTrack
- AudioTrack
- LocalAudioTrack
- RemoteAudioTrack
- VideoTrack
- LocalVideoTrack
- RemoteVideoTrack HMSTRACK contient un champ appelé source qui désigne la source de la piste.
Source peut avoir les valeurs suivantes -
regular pour audio ou vidéo normal publié par des pairsscreen pour la piste de capture d'écran lorsque un pair commence à diffuser son écran dans une pièceplugin pour un plugin audio ou vidéo personnalisé utilisé dans la salle Pour connaître le type de piste, vérifiez la valeur du type qui serait l'une des valeurs d'énumération - AUDIO ou VIDEO
Vous pouvez envoyer une conversation ou tout autre type de message d'un pair local à tous les pairs éloignés de la salle.
Pour envoyer un message, créez d'abord une instance de l'objet HMSMessage .
Ajoutez les informations à envoyer dans la propriété message de HMSMessage .
Utilisez ensuite la fonction sendBroadcastMessage sur l'instance de HMSSDK pour le message de diffusion, sendGroupMessage pour le message de groupe et sendDirectMessage pour le message direct.
Lorsque vous (le pair local) recevez un message d'autres (tout pair distant), void onMessage({required HMSMessage message}) de HMSUpdateListener est invoqué.
Plus d'informations sur la messagerie de chat sont disponibles ici.
// 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 ;
...
}
}? Le guide QuickStart prédéfini est disponible ici.
Référez le guide de documentation complet disponible ici.
? ♀️ Consultez l'exemple de l'implémentation de l'application disponible ici.
Nous avons ajouté des explications et un guide d'utilisation recommandé pour différentes fonctionnalités, dispositions d'interface utilisateur, magasin de données, etc. dans Exemple Readme de l'application.
Les applications Flutter 100ms sont publiées dans les magasins d'applications, vous pouvez les télécharger ici:
? Application iOS sur Apple App Store: https://apps.apple.com/app/100ms-live/id1576541989
? Application Android sur Google Play Store: https://play.google.com/store/apps/details?id=live.hms.fluffer
