Preview

Initialize HMSSDK

late HMSSDK hmsSDK;
HMSSDK hmsSDK = HMSSDK();

Call build method on HMSSDK instance

await hmsSDK.build(); // ensure to await while invoking the `build` method

Attach preview listeners and call preview method

Let's see the complete implementation till now:

class Preview implements HMSPreviewListener{

   late HMSSDK hmsSDK;

   Preview(){
      initHMSSDK();
   }

   void initHMSSDK() async {
      hmsSDK = HMSSDK();
      await hmsSDK.build(); // ensure to await while invoking the `build` method
      HMSConfig config = HMSConfig(
         userName: "John Doe",
         authToken: "eyJH5c", // client-side token generated from your token service
      );

      //Here this is an instance of a class that implements HMSPreviewListener, that is, Preview
      hmsSDK.addPreviewListener(listener:this);
      hmsSDK.preview(config: config);
   }

   @override
   void onPreview(
      {required HMSRoom room,
      required List<HMSTrack> localTracks}) {
         /// We will get the callback here if the preview succeeds
   }

   @override
   void onHMSError({required HMSException error}) {
        //Error updates: https://www.100ms.live/docs/flutter/v2/features/error-handling#hms-exception
   }

   @override
   void onRoomUpdate(
      {required HMSRoom room, required HMSRoomUpdate update}) {
         /// Only sent when Preview Room State is enabled.
         /// Room updates: https://www.100ms.live/docs/flutter/v2/features/update-listener-enums#hms-room-update
   }

   @override
   void onPeerUpdate(
      {required HMSPeer peer, required HMSPeerUpdate update}) async {
         /// Only sent when Preview Room State is enabled.
         /// Peer updates: https://www.100ms.live/docs/flutter/v2/features/update-listener-enums#hms-peer-update
   }   

   @override
   void onAudioDeviceChanged(
      {HMSAudioDevice? currentAudioDevice,
      List<HMSAudioDevice>? availableAudioDevice}) {
         /// Get notified when the audio device is changed: https://www.100ms.live/docs/flutter/v2/features/audio-output-routing#adding-audio-device-change-event-listener-android-only
   }

   @override
   void onPeerListUpdate(
      {required List<HMSPeer> addedPeers, required List<HMSPeer> removedPeers}){
         ///When a room is joined we can get the list of peers in the room from `addedPeers`
         /// Get notified when a peer is added or removed: https://www.100ms.live/docs/flutter/v2/features/update-listener-enums#hms-peer-update
      }
}

After calling preview your app will be provided an update from the 100ms SDK.

✅ If successful, the onPreview({required HMSRoom room, required List<HMSTrack> localTracks}) method of HMSPreviewListener will be invoked with information about the room encapsulated in the HMSRoom object.

❌ If failure, the onHMSError({required HMSException error}) method will be invoked with exact failure reason.

Render Preview

In case of success onPreview provides an array of local tracks in the parameter localTracks that you can display to the user (see Render Video and Mute sections for more details).

• Fetching the track in onPreview callback:

class Preview implements HMSPreviewListener{

   ...
   List<HMSVideoTrack> videoTracks = [];

   @override
   void onPreview({required HMSRoom room, required List<HMSTrack> localTracks}) {

      for (var track in localTracks) {
         if (track.kind == HMSTrackKind.kHMSTrackKindVideo) {
         isVideoOn = !(track.isMute);
         videoTracks.add(track as HMSVideoTrack);
         }
         if (track.kind == HMSTrackKind.kHMSTrackKindAudio) {
         isAudioOn = !(track.isMute);
         }
      }
   }
}

• Display the track using HMSVideoView:

//videoTracks is the List<HMSVideoTrack> which we have set above
HMSVideoView(
   scaleType:
         ScaleType.SCALE_ASPECT_FILL,
   track:videoTracks[0],//setting the first track from videoTracks list to render on screen
   setMirror: true,
   matchParent: false,
)

Check how we have implemented the preview in our sample app here

Remove HMSPreviewListener before calling join

class Preview implements HMSPreviewListener{

   ...
   void removePreviewListener(){
      //Here this is an instance of a class that implements HMSPreviewListener, that is, Preview
      hmsSDK.removePreviewListener(this);
   }

}

After calling removePreviewListener to remove HMSPreviewListener call join by passing the same HMSSDK instance and HMSConfig.

Call join method and attach HMSUpdateListener

class Meeting implements HMSUpdateListener{

   late HMSSDK hmsSDK;

   Meeting({required HMSSDK hmsSDKFromPreview,HMSConfig configFromPreview}){
         hmsSDK = hmsSDKFromPreview;
         hmsSDK.addUpdateListener(listener: this);
         hmsSDK.join(config: configFromPreview);
   }

   @override
   void onJoin({required HMSRoom room}) async {
       // User Joined successfully.
   }
   ...

}

In this way, a room can be joined with Preview. The rest of the functions and their implementation is same as we do in the case of direct join.