Self view and participant view in same canvas

Video SDK
1

We are trying to integrate the Zoom Video SDK (Version 1.10.7) into our application and are not able to resize or overlap the self view and participant view. The expected result, where the self-view is smaller and overlaps the remote view?

Zoom Video SDK Version (1.10.7) has a single canvas showing both the self and remote view due to which we are not able to separate and resize the self view and remote view.

Code reference : GitHub - zoom/videosdk-web-sample: Zoom Video SDK web sample

2

Hey @thoufic
Have you tried rendering the local video after you’ve rendered the remote videos?

Here’s a gist of how that would work:

await client.join(topic, token, username);
const mediaStream = client.getMediaStream();
await mediaStream.startVideo();

// render remote videos
const usersWithVideo = client.getAllUser().filter(e => e.bVideoOn);
const numberOfUser = usersWithVideo.length;
for await (const [index, user] of usersWithVideo.entries()) {
  const { x, y } = getVideoXandY(index, numberOfUser);
  // I'm using client.on("peer-video-state-change") event to call this block to check new/existing user you can use state
  if (event.userId === user.userId && user.bVideoOn) {
    // if it's a new user, render the video
    await mediaStream.renderVideo(videoCanvas, user.userId, vidWidth, vidHeight, x, y, 2);
  } else if (user.bVideoOn) {
    // if it's an existing user, adjust the position of the video
    await mediaStream.adjustRenderedVideoPosition(videoCanvas, user.userId, vidWidth, vidHeight, x, y).catch(e => console.log(e));
  }
}

// render self video at x:0, y:0
await mediaStream.renderVideo(videoCanvas, client.getCurrentUserInfo().userId, vidWidth, vidHeight, 0, 0, 2);
// or await mediaStream.adjustRenderedVideoPosition(videoCanvas, client.getCurrentUserInfo().userId, vidWidth, vidHeight, 0, 0);