Optimize video experience in multi-host scenarios

mRtcEngine.joinChannelEx(null, connection, mediaOptions, new IRtcEngineEventHandler() {
    @Override
    public void onTranscodedStreamLayoutInfo(final int uid, final VideoLayoutInfo info) {
        super.onTranscodedStreamLayoutInfo(uid, info);
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                int size = info.layoutNumber;
                viewGrids.setChildCount(info.layoutNumber);
                for (int i = 0; i < size; i++) {
                    if (mUserViews.containsKey(info.layoutList[i].uid)) {
                        continue;
                    }

                    // Dynamically add the view
                    TextureView textureView = new TextureView(VideoChatViewActivity.this);
                    textureView.setLayoutParams(new ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT));
                    users.add(info.layoutList[i].uid);
                    views.add(textureView);
                    mUserViews.put(info.layoutList[i].uid, textureView);
                    viewGrids.addView(textureView);

                    // Configure VideoCanvas; set uid and subviewUid as shown,
                    // and configure other parameters as needed
                    VideoCanvas canvas = new VideoCanvas(textureView);
                    // User ID of the user forwarding the composite stream to the current channel
                    canvas.uid = uid;
                    // User ID corresponding to a specific sub-stream
                    canvas.subviewUid = info.layoutList[i].uid;
                    canvas.renderMode = Constants.RENDER_MODE_FIT;
                    mRtcEngine.setupRemoteVideoEx(canvas, connection);

                    // To remove a specific sub-stream, use the following code
                    // Do not include this in the same flow as the add code above.
                    VideoCanvas canvasToRemove = new VideoCanvas(textureView);
                    canvasToRemove.uid = uid;
                    canvasToRemove.subviewUid = info.layoutList[i].uid;
                    canvasToRemove.setupMode = VideoCanvas.VIEW_SETUP_MODE_REMOVE;
                    mRtcEngine.setupRemoteVideoEx(canvasToRemove);
                }
            }
        });
    }
});

agoraKit.joinChannelEx(byToken: nil, connection: connection, delegate: self, mediaOptions: mediaOptions)

func rtcEngine(_ engine: AgoraRtcEngineKit, didTranscodedStreamLayoutInfoUpdatedWithUserId uid: UInt, videoLayoutInfo: AgoraVideoLayoutInfo) {
    DispatchQueue.main.async { [weak self] in
        guard let self = self else { return }

        guard let layoutList = videoLayoutInfo.layoutList else { return }

        for subLayout in layoutList {
            let subUid = subLayout.uid
            if self.userViews[subUid] != nil {
                continue
            }
            // Dynamically add the view
            let view = UIView()
            view.translatesAutoresizingMaskIntoConstraints = false
            self.containerView.addSubview(view)
            self.userViews[subUid] = view

            // Configure AgoraRtcVideoCanvas; set uid and subviewUid as shown,
            // and configure other parameters as needed
            let canvas = AgoraRtcVideoCanvas()
            // User ID of the user forwarding the composite stream to the current channel
            canvas.uid = uid
            // User ID corresponding to a specific sub-stream
            canvas.subviewUid = subUid
            canvas.view = view
            canvas.renderMode = .fit
            canvas.sourceType = .transCoded
            self.agoraKit.setupRemoteVideoEx(canvas, connection: connection)

            // To remove a specific sub-stream, use the following code
            // Do not include this in the same flow as the add code above.
            let canvasToRemove = AgoraRtcVideoCanvas()
            canvasToRemove.uid = uid
            canvasToRemove.subviewUid = subUid
            canvasToRemove.view = view
            canvasToRemove.setupMode = .remove
            self.agoraKit.setupRemoteVideoEx(canvasToRemove, connection: connection)
        }
    }
}

// Register the event handler
_engine.registerEventHandler(
  RtcEngineEventHandler(
    onTranscodedStreamLayoutInfo: (RtcConnection connection, int uid,
        int width, int height, int layoutCount, List<VideoLayout> layoutlist) {
      setState(() {
        _compositeUid = uid;
        _layoutList = layoutlist;
      });
    },
  ),
);

// Join the channel containing the composite stream
await _engine.joinChannelEx(
  token: token,
  connection: RtcConnection(channelId: compositeChannelId, localUid: localUid),
  options: const ChannelMediaOptions(
    autoSubscribeVideo: true,
    autoSubscribeAudio: true,
    clientRoleType: ClientRoleType.clientRoleAudience,
  ),
);

// Build AgoraVideoView widgets for each sub-stream
Widget _buildSubStreamViews() {
  if (_layoutList == null || _compositeUid == null) {
    return const SizedBox.shrink();
  }
  return Stack(
    children: _layoutList!.map((layout) {
      return AgoraVideoView(
        controller: VideoViewController.remote(
          rtcEngine: _engine,
          canvas: VideoCanvas(
            // User ID of the user forwarding the composite stream
            uid: _compositeUid,
            // User ID corresponding to a specific sub-stream
            subviewUid: layout.uid,
            sourceType: VideoSourceType.videoSourceTranscoded,
            renderMode: RenderModeType.renderModeFit,
          ),
          connection: RtcConnection(channelId: compositeChannelId),
        ),
      );
    }).toList(),
  );
}

// To remove a specific sub-stream view, rebuild the widget tree
// without that sub-stream's AgoraVideoView, or use setupMode:
VideoCanvas(
  uid: _compositeUid,
  subviewUid: layout.uid,
  setupMode: VideoViewSetupMode.videoViewSetupRemove,
)