TypeError: Cannot read property 'canvas' of null

Video SDK Web
1

Description
When a participant tries to share the screen by executing the below code, it throws error :“Cannot read property ‘canvas’ of null”.

  async shareScreen() {
     const canvas = document.getElementById('videoCanvas');
     await stream.startShareScreen(canvas);
  }

I have a “‘active-share-change’” listener that listens to the user who starts sharing the screen by calling startShareScreen.

client.on('active-share-change', async (payload) =>{
  const canvas = document.getElementById('videoCanvas');
   if(payload.state==='Active') {
       await stream.startShareView(canvas, payload.userId);
    } else if(payload.state==='Inactive'){
       await stream.stopShareView();
    }
}

Note: I am reusing this canvas for the video.

Error
TypeError: Cannot read property ‘canvas’ of null

Which Web Video SDK version?
SDK version : 1.1.4

Device (please complete the following information):

  • OS: Ubuntu 18.04.4 LTS
  • Browser: Chrome
  • Browser Version : Version 93.0.4577.63 (Official Build) (64-bit)

Additional context
Please let me know if I need to do any setup or have to follow any steps to use the screen sharing api in our web based application.

1 Like
2

Hey @mitesh.gandhi

Thanks for your feedback.
I saw you mentioned you were reusing the canvas for the video and screen share. Maybe that’s the problem. If the browser supports OffscreenCanvas, the canvas will be transferred to OffscreenCanvas, after that accessing the canvas will cause errors.

If your application needs to present video and screen sharing, 3 canvases are required. One for multiple videos, the other for receiving sharing, and the last for self sharing (If WebCodecs enabled, use video element instead of canvas element for self sharing).

Thanks
Vic

2 Likes
3

Hey @vic.yang

Thanks for the help, creating different canvases resolved my issue.

4

Happy to hear that resolved your issue! :slight_smile:

Thanks,
Tommy

5

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