Cannot get context for html canvas element (want to add text etc)

Description

Is there a way I can access the context for the canvas that
the Zoom SDK uses to render videos?

I am rendering on a canvas with the ID “video-canvas”
I want to do something like

var c = document.getElementById("video-canvas");
var ctx = c.getContext("2d");

so i can add names to the video strings or perhaps draw
boxes for users with disabled cameras.
However, when I try the above, I get following error:

Browser Console Error
Uncaught (in promise) DOMException: Failed to execute ‘getContext’ on ‘HTMLCanvasElement’: Cannot get context from a canvas that has transferred its control to offscreen.

Which Web Video SDK version?
1.1.5

Video SDK Code Snippets

                            var c = document.getElementById("video-canvas");
                            var ctx = c.getContext("2d");
                            ctx.font = "10px Arial";
                            ctx.fillText("Test", 10, 10);

To Reproduce(If applicable)
Steps to reproduce the behavior:

Screenshots
If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

  • Device: Mac mini
  • OS: macOS 11
  • Browser: Chrome
  • Browser Version 95

Additional context
Add any other context about the problem here.

Hey @simkin

Thanks for your feedback.

Canvas element used by Video SDK can not be reused in main thread, because it may be transferred to OffscreenCanvas. You can use html element like div to overlap the drawing area on canvas as a workaround.

Thanks
Vic

1 Like

Thank you Vic!
I’m overlaying the canvas with other elements now and it works.

1 Like

Thanks for the solution Vic!

Happy to hear you got it working @simkin ! :slight_smile:

-Tommy