Главная страница>Связанные с программированием>AI Исходный код
Скачать

? Руководство по настройке

  1. Зарегистрируйтесь на https://dashboard.100ms.live/register и посетите вкладку разработчика, чтобы получить доступ к вашим учетным данным.

  2. Здесь ознакомьтесь с токенами и безопасностью здесь

  3. Заполните шаги в руководстве Auth Token Quick Start Guide

  4. Получите HMSSDK через Pub.Dev. Добавьте hmssdk_flutter в свой Pubspec.yaml.

Переложите полное руководство по установке здесь.

? ♀ Как запустить пример приложения

Полное приложение примера доступно здесь.

Мы добавили объяснения и рекомендовано Руководство по использованию для различных функций, макетов пользовательского интерфейса, хранилища данных и т. Д. В примере App Readme.

Чтобы запустить пример приложения в вашей системе, выполните эти шаги -

  1. Клонировать 100 мс Flutter Github Repo

  2. В Project Root запустите flutter pub get построить пакет Flutter

  3. Изменить каталог на example папки

  4. Теперь, чтобы запустить приложение, просто выполните команду flutter run , чтобы запустить приложение на подключенном устройстве, или симуляторе iOS, или эмулятор Android.

  5. Для запуска на устройстве iOS (iPhone или iPad) убедитесь, что вы установили правильную команду разработчиков в разделе «Подписание и возможности» XCODE.

Пример примера по умолчанию использует библиотеку управления государством поставщика. Для других реализаций, пожалуйста, проверьте -

  1. Simple QuickStart
  2. Блок
  3. GetX
  4. Mobx
  5. Riverpod
  6. Audio Room App
  7. Callkit & Voip
  8. Flutterflow с предварительно построенным
  9. Живой поток с HLS
  10. Полное приложение

☝ Минимальная конфигурация

? Рекомендуемая конфигурация

Поддерживаемые устройства

? Разрешения на андроид

Полное руководство по разрешениям доступно здесь.

Добавьте следующие разрешения в файл 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 >

? Ключевые понятия

♻ Обновление настройки слушателей слушателей

100 мс 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});
}

? Как слушать обновления сверстников и треков?

SDK на 100 мс отправляет обновления в приложение о любом изменении HMSPEER, HMSTRACK, HMSRoom и т. Д. С помощью обратных вызовов в HMSUpdateListener .

Методы 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. Токен аутентификации - токен аутентификации на стороне клиента, сгенерированный службой токена.

? Получить токен аутентификации

Чтобы присоединиться к комнате, нам нужен токен аутентификации, как упомянуто выше. Есть два метода, чтобы получить токен:

Токен для извлечения с использованием метода комнаты (рекомендуется)

Мы можем получить токен аутентификации, используя код комнаты от встречи URL.

Давайте поймем субдомен и код из примера URL-адреса в этом URL: https://public.app.100ms.live/meeting/xvm-wxwo-gbl

Теперь, чтобы получить код комнаты от URL-адреса, мы можем написать нашу собственную логику или использовать метод getCode отсюда

Для генерации токена мы будем использовать метод getAuthTokenByRoomCode HMSSDK . Этот метод имеет roomCode в качестве необходимого параметра, userId и endPoint в качестве необязательного параметра.

Этот метод должен быть вызван после вызова метода 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
  }

Получите временный токен от приборной панели

Чтобы проверить функциональность звука/видео, вам нужно подключиться к комнате на 100 мс; Пожалуйста, проверьте следующие шаги для того же:

  1. Перейдите к панели 100 мс или создайте учетную запись, если у вас ее нет.
  2. Используйте Video Conferencing Starter Kit , чтобы создать комнату с шаблоном по умолчанию, назначенным ему, для быстрого протеста этого приложения.
  3. Перейдите на страницу комнат на панели приборной панели, нажмите на Room Id в комнате, который вы создали выше, и нажмите кнопку Join Room в правом верхнем углу.
  4. В разделе «Присоединение к SDK» вы можете найти Auth Token for role ; Вы можете нажать на значок «Копировать», чтобы скопировать токен аутентификации.

Токен с 100 мс приборной панели предназначен только для целей тестирования, для производственных приложений вы должны генерировать токены на своем собственном сервере. Обратитесь к разделу Token Management в Руководстве по аутентификации и токенам для получения дополнительной информации.

Вы также можете при желании пройти эти поля в конструкторе HMSSDK -

  1. Настройки треков - например, присоединение к комнате с приглушенным аудио или видео с использованием объекта HMSTrackSetting . Дополнительная информация доступна здесь.

  2. Пользовательские метаданные - это можно использовать для прохождения любых дополнительных метаданных, связанных с пользователем, использующим metadata объекта HMSConfig . Например: отображение пользователя на стороне приложения. Дополнительная информация доступна здесь.

Более подробная информация о присоединении к комнате доступна здесь. 

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

? Отображать трек

Все сводится к этому. Все настройки до сих пор были сделаны, чтобы мы могли показать живые видеоролики в нашем прекрасном приложении.

100 мс Flutter Package предоставляет виджет HMSVideoView , который отображает видео на экране.

Мы просто должны передать объект видео трека в HMSVideoView , чтобы начать автоматический рендеринг видеопотока живого видео.

Мы также можем необязательно пройти реквизиты, такие как key , scaleType , mirror для настройки виджета HMSVideoView . 

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

Более подробная информация о отображении видео доступна здесь.

Оставить комнату

Как только вы закончите с собранием и хотите выйти, позвоните в уход на экземпляр HMSSDK, который вы создали, чтобы присоединиться к комнате.

Перед вызовом уйти, удалите экземпляр HMSUpdateListener как: 

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

Чтобы покинуть собрание, вызовите метод leave HMSSDK и передайте параметр hmsActionResultListener , чтобы получить обратный вызов SDK в методе переопределения onSuccess следующим образом.

Вам нужно будет реализовать интерфейс HMSActionResultListener в классе, чтобы получить обратный вызов onSuccess и onException . Чтобы узнать, как реализовать 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 объяснил

HMSTrack -это суперкласс всех треков, которые используются в HMSSDK . Его иерархия выглядит так - 

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

? Как узнать тип и источник трека?

HMSTRACK содержит поле, называемое источником, которое обозначает источник трека.

Source может иметь следующие значения -

Чтобы узнать тип трека, проверьте значение типа, которое будет одним из значений Enum - AUDIO или VIDEO

? Обмен сообщениями чата

Вы можете отправить чат или любое другое сообщение от местного сверстника на всех отдаленных сверстников в комнате.

Чтобы отправить сообщение, сначала создайте экземпляр объекта HMSMessage .

Добавьте информацию, которая будет отправлена в свойство message HMSMessage .

Затем используйте функцию sendBroadcastMessage в экземпляре HMSSDK для вещательного сообщения, sendGroupMessage для группового сообщения и sendDirectMessage для прямого сообщения.

Когда вы (локальный одноранговый) получает сообщение от других (любого удаленного одноранга), void onMessage({required HMSMessage message}) функция HMSUpdateListener .

Более подробная информация о обмене чатами здесь доступна. 

 // 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 доступно здесь.

Переложите полное руководство по документации, доступное здесь.

? ♀ Осмотрите пример реализации приложения, доступной здесь.

Мы добавили объяснения и рекомендовано Руководство по использованию для различных функций, макетов пользовательского интерфейса, хранилища данных и т. Д. В примере App Readme.

Приложения на 100 мс выпускаются в магазинах приложений, вы можете скачать их здесь:

? Приложение для iOS на Apple App Store: https://apps.apple.com/app/100ms-live/id1576541989

? Приложение Android в Google Play Store: https://play.google.com/store/apps/details?id=live.hms.flutter

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все