Video SDK: cannot style videos

In the documentation, it is stated that as a best practice, you should render all participant videos on a single canvas to optimize CPU usage and performance.

As a result, we have one canvas element on the page and cannot apply CSS styles to videos. For instance, we’d like to add the participant’s name at the bottom of the video.

The app is run in Chrome 91.0.4472.124 on purpose to get around cross-origin isolation issue.

Could you confirm that following the recommendation from documentation makes it impossible to apply CSS to videos?

Hey @pavloshchur

Thanks for your feedback.

As a choice, you can use HTML Element such as DIV Element to cover the canvas, put name, avatar or audio status on the DIV Element.

Thanks
Vic

Hi @vic.yang,

Thanks for the quick reply.

In such a case, we should use a separate canvas for each participant’s camera, correct?

Hey @pavloshchur

No. Just add an overlay that covers the canvas, the background of the overlay is transparent and zIndex is higher than the canvas, then add the extra info on the overlay.

Thanks
Vic

Hi @vic.yang,

Yes, it is a possible solution but not easy to maintain at all. Because in such case we have to calculate coordinates.

If we create a separate canvas for each video, will we have some errors or serious performance issues?

Hi @pavloshchur

Using separate canvases may result in high CPU and memory usage, and cannot switch videos among the canvases.
Although it’s a little complicated to calculate the coordinates, we still recommend using a single canvas to serve the videos.

Thanks
Vic

Hi @pavloshchur,

You should already have the coordinates, as you’ve had to calculate them to draw the streams to the canvas in the correct position. I would just store those coordinates and the height/widths in an array along with the name of the attendee and reuse them to position the names.

Nick

1 Like