Getting webGLContextLostProtect error

Video SDK Web
1

Hey, I understand that Zoom advises rendering multiple videos on a single canvas. However, we frequently need to display additional information along with video, such as the username, mute/unmute button, etc.
Calling the
“canvas.getContext(“2d”)”
function on canvas is required to do that. nonetheless, the moment I call this method, I receive the following error:

cdc37ca3-005f-43ed-a64d-499975686a4e:1 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at p.webGLContextLostProtect (cdc37ca3-005f-43ed-a64d-499975686a4e:1:181061)
    at p.Get_Display (cdc37ca3-005f-43ed-a64d-499975686a4e:1:182334)
    at cdc37ca3-005f-43ed-a64d-499975686a4e:1:167535

code snippet -

 console.log('===rendering video',x,y, cellWidth, cellHeight,canvas)
    if(user.bVideoOn){
      mediaStream.renderVideo(canvas, user.userId, cellWidth, cellHeight, x, y, 2)
    }else{
      mediaStream.stopRenderVideo(canvas, user.userId)
    }
    if(x=== 0)
    {
      x = cellWidth;
    }
    if(y ===0){
      y = cellHeight;
    }
    var ctx = canvas.getContext("2d");
    const nameText = ctx.measureText(user.displayName);
    ctx.fillStyle = "#ffffff"
    ctx.fillText(user.displayName, (x/2) - (nameText.width / 2), (y - y/4));
2

Hey @irfan.ali1922

Thanks for your feedback.

The canvas which is used to render the video will be transferred to OffscreenCanvas, for that reason, the canvas cannot be used as “2d context”.

We recommend using the DOM elements(DivElement) that overlap the canvas to present more information, such as display name, and audio status.

Thanks
Vic

1 Like
3

@vic.yang

Do you have any pseudo code that showcases this concept?

PS - I was trying to look at the <ul> + <avatar> component in the sample app, but was having a hard time understanding it.

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.