首页>编程相关>Ai源码

?设置指南

  1. 在https://dashboard.100ms.live/register上注册,并访问开发人员选项卡以访问您的凭据。

  2. 在这里熟悉令牌和安全性

  3. 完成Auth Token快速启动指南中的步骤

  4. 通过pub.dev获取HMSSDK。将hmssdk_flutter添加到您的pubspec.yaml。

请在此处参考完整的安装指南。

?♀️如何运行示例应用程序

完整的示例应用程序可在此处使用。

我们在示例应用程序readme中添加了有关不同功能,UI布局,数据存储等的说明和推荐使用指南。

要在系统上运行示例应用程序,请按照以下步骤进行操作 -

  1. 克隆100ms flutter github repo

  2. 在Project root中,Run flutter pub get构建颤动包装

  3. 将目录更改为example文件夹

  4. 现在,要运行该应用程序,只需执行flutter run命令即可在连接的设备或iOS模拟器或Android模拟器上运行该应用程序。

  5. 要在iOS设备(iPhone或iPad)上运行,请确保您在XCode签名和功能部分中设置了正确的开发团队。

默认示例应用程序使用提供商状态管理库。有关其他实施方式,请退房 -

  1. 简单的快速启动
  2. 集团
  3. getx
  4. mobx
  5. 河pod
  6. 音频室应用程序
  7. Callkit&VoIP
  8. 用预构建的扑面
  9. 与HLS直播
  10. 全面的应用程序

☝️最小配置

?推荐配置

支持的设备

? Android许可

完整的权限指南可在此处找到。

在Android的AndroidManifest.xml文件中添加以下权限 -

< 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 " />

? iOS许可

在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 >

?关键概念

♻️设置更新听众

100ms SDK在用户通过实现HMSUpdateListener加入后,向客户应用程序提供了有关客户应用程序的回调。这些更新可用于在屏幕上渲染视频或显示有关房间的其他信息。让我们看一下流程图。

 /// 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});
}

?如何收听Peer&Track更新?

100ms SDK通过HMSUpdateListener中的回调发送了有关HMSPER,HMSTRACK,HMSROOM等任何更改的应用程序。

调用HMSUPDATELISTENER的方法,以通知房间中发生的更新,例如同行连接/离开,跟踪静音/取消静音等。

有关更新听众的更多信息,请参见此处。

以下是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

加入一个房间

要在音频或视频通话中与其他人进行互动,用户需要join room

要加入一个房间,您的应用应该有 -

  1. 用户名 - 应该显示给房间其他同行的名称。
  2. 身份验证令牌 - 令牌服务生成的客户端身份验证令牌。

?获取身份验证令牌

要加入一个房间,我们需要一个身份验证令牌,如上所述。有两种获得令牌的方法:

使用室内代码方法获取令牌(建议)

我们可以使用MEDER URL的室内代码获得身份验证令牌。

让我们从此URL中的https://public.app.100ms.live/meeting/xvm-wxwo-gbl URL中了解子域和代码

现在,为了从满足URL获取房间代码,我们可以编写自己的逻辑或使用getCode方法

要生成令牌,我们将使用HMSSDKgetAuthTokenByRoomCode方法。此方法的roomCode是必需的参数, userIdendPoint作为可选参数。

调用build方法后应调用此方法。

让我们查看实现:

  //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
  }

从仪表板获取临时令牌

要测试音频/视频功能,您需要连接到100ms的房间;请检查以下步骤相同:

  1. 导航到您的100ms仪表板,或者如果没有帐户,则创建一个帐户。
  2. 使用Video Conferencing Starter Kit来创建一个带有默认模板的房间,以快速测试该应用程序。
  3. 转到仪表板中的房间页面,单击您上面创建的房间的Room Id ,然后单击右上角的Join Room按钮。
  4. 在与SDK节的联接连接中,您可以找到Auth Token for role ;您可以单击“复制”图标以复制身份验证令牌。

100ms仪表板的令牌仅用于测试目的,对于生产应用程序,您必须在自己的服务器上生成令牌。有关更多信息,请参阅身份验证和令牌指南的管理令牌部分。

您还可以选择在HMSSDK构造函数中传递这些字段 -

  1. 跟踪设置 - 例如使用HMSTrackSetting对象连接使用静音音频或视频的房间。更多信息可在此处提供。

  2. 用户元数据 - 可以使用HMSConfig对象的metadata传递与用户相关的任何其他元数据。例如:应用程序端的用户ID映射。更多信息可在此处提供。

有关加入房间的更多信息。

 // 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
}

?显示轨道

一切都归结为此。到目前为止,所有设置都已经完成,以便我们可以在美丽的应用中显示现场流式视频。

100ms的Flutter软件包提供了HMSVideoView小部件,该小部件在屏幕上呈现视频。

我们只需要将视频轨道对象传递到HMSVideoView即可开始自动渲染实时视频流。

我们还可以选择通过keyscaleTypemirror类的道具来自定义HMSVideoView小部件。

 HMSVideoView (
  track : videoTrack,
  key : Key (videoTrack.trackId),
),

有关显示视频的更多信息,请参见此处。

离开空间

完成会议并想退出后,请在您创建以加入房间的HMSSDK实例上致电离开。

在致电休假之前,请删除HMSUpdateListener实例为:

 // updateListener is the instance of class in which HMSUpdateListener is implemented
hmsSDK. removeUpdateListener (updateListener);

要离开会议,请致电HMSSDKleave方法,然后通过hmsActionResultListener参数,以在onSuccess Override方法中从SDK获得成功回调。

您将需要在类中实现HMSActionResultListener接口,以获取onSuccessonException回调。要知道如何实现HMSActionResultListener在此处检查文档

 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 ;
          ...
        }
      }
}

有关离开房间的更多信息。

? HMSTRACKS解释了

HMSTrackHMSSDK内部使用的所有轨道的超级类。它的层次结构看起来像这样 -

 HMSTrack
    - AudioTrack
        - LocalAudioTrack
        - RemoteAudioTrack
    - VideoTrack
        - LocalVideoTrack
        - RemoteVideoTrack 

?如何知道轨道的类型和来源?

HMSTRACK包含一个称为源的字段,该字段表示轨道的来源。

Source可以具有以下值 -

要了解轨道的类型,请检查将是枚举值之一的类型值 - AUDIOVIDEO

?聊天消息

您可以将聊天或任何其他类型的消息从本地同行发送到房间中的所有远程同行。

首先发送消息创建HMSMessage对象的实例。

添加要在HMSMessagemessage属性中发送的信息。

然后,在HMSSDK实例上使用sendBroadcastMessage函数进行广播消息,用于组消息的sendGroupMessage和用于直接消息的sendDirectMessage

当您(本地对等)从其他人(任何远程对等)接收消息时,调用了HMSUpdateListenervoid onMessage({required HMSMessage message})功能。

有关聊天消息传递的更多信息,请参见此处。

 // 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 ;
      ...
    }

  }

?预先构建的Quickstart指南可在此处找到。

请参阅此处可用的完整文档指南。

?♀️签署此处可用的示例应用程序实现。

我们在示例应用程序readme中添加了有关不同功能,UI布局,数据存储等的说明和推荐使用指南。

100ms Flutter应用程序已在应用商店中发布,您可以在此处下载它们:

? iOS应用在Apple App Store上:https://apps.apple.com/app/100ms-live/id1576541989

? Google Play商店上的Android App:https://play.google.com/store/apps/details?id=live.hms.flutter

展开
附加信息