Multiple videos instead of the active video in Video SDK

I’m trying to achieve showing all participants videos instead of just the active speaker. In the documentation they use event_video_active_change, but I thought of using event_peer_video_state_change like this:

client.on('peer_video_state_change', async(payload) => {
  try {
    if (payload.action === 'Start') {
      await stream.startRenderVideo(canvas, quality, payload.userId, '');
    } else {
      await astream.stopRenderVideo();
    }
  } catch (error) {
    console.log(error);
  }
});

Do you think it’s possible, and if not, can I even achieve something like this? Seeing the current speaker is nice, but my app needs to show all 3-4 guests at the same time.

  1. Using peer-video-state-change is right approach.
  2. I am not sure if startRenderVideo is still available. I couldn’t find it in their lib.
  3. renderVideo(canvas: HTMLCanvasElement, userId: number, width: number, height: number, x: number, y: number, videoQuality: VideoQuality, additionalUserKey?: undefined | string): Promise<"" | Error> is the answer for this.
    3.1 As far as I understand, you can use one canvas to display multiple videos. Just set right size, and anchor position. This might help. Stream | @zoomus/instantsdk

Thanks,
Best,
KB

1 Like

Thanks for sharing the solution @ktae13 ! :slight_smile:

@treedis , please let us know if that helps!

Thanks,
Tommy