Is it possible to show video inside circular container in Zoom Web SDK?

In the single canvas based integration of Web SDK, is it possible to show circular videos instead of rectangular?

Hi @harshita.kanal ,
Thanks for your post! Yes, this is possible using the Video SDK. With CSS, you can customize the canvas or video element that will render your video.

Thanks,
Rehema

Thanks for the reply! However, the doc points to ways to update the position and dimensions of the videos, is there a way to render each individual video as circular, inside the single canvas?

Hi @harshita.kanal ,

Yes, this is possible. After subscribing each video input to the same canvas element, use CSS to customize the shape of the element to a circle. Example code is shown below (the first chunk pulled from the previously linked documentation)

let participants = client.getAllUser()

stream.renderVideo(document.querySelector('#participants-canvas'), participants[0].userId, 960, 540, 0, 540, 2)
stream.renderVideo(document.querySelector('#participants-canvas'), participants[1].userId, 960, 540, 960, 540, 2)
stream.renderVideo(document.querySelector('#participants-canvas'), participants[2].userId, 960, 540, 0, 0, 2)
stream.renderVideo(document.querySelector('#participants-canvas'), participants[3].userId, 960, 540, 960, 0, 2)
#participant-canvas {
  position: relative;
  box-sizing: border-box;
  width: 800px;
  height: 450px;
  background: rgb(32, 31, 31);
  margin: 1px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 1);
  shape-outside: circle(50%);
  clip-path: circle(6rem at 12rem 8rem);
}

Please let me know if this helps!

Thanks,
Rehema

1 Like

Thank you! Really appreciate the help - I was able to get this to work with a single video in the view but not with multiple videos visible, can I achieve something like this image with a similar approach?

Yes, you should be able to achieve this view without issue. How did your other videos render when you tried this? Also, could you share a code snippet of what you currently have?

Thanks,
Rehema

1 Like

Hey, so with this approach - I could get only one video to show up as a circle and the other gets hidden - I assume this is because using clip path we are clipping the canvas view to the single circle, so anything around that gets hidden. Currently I have a single canvas element -

  <canvas
      className="video-track-component"
      id="zoomsdk-video-canvas"
      width={width}
      height={height}
    />

And I am applying this CSS to it -

  #zoomsdk-video-canvas {
    position: relative;
    box-sizing: border-box;
    shape-outside: circle(50%);
    clip-path: circle(6rem at 10rem 6rem);
  }

Other than that - the logic to subscribe each video input to the same canvas element is same as the documentation.

Thanks for the support!

Hi @harshita.kanal,
Yep, I see what you’re saying. With that, the previously provided code snippets aren’t the best solution for this. Luckily, we have a customer who wrote an article on implementing more complex views with the Video SDK. I’ll link it here, along with a repo created by one of our team members who also implement a circular view of canvas elements. I believe these two resources will be useful guides for you to achieve your goal!

Thanks,
Rehema