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.
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.
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.
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.
