Video SDK - webGLContextLostProtect Error

Video SDK Twilio Migration
1

Hi,

I’m currently transitioning my video chat application from Twilio to Zoom, utilizing the Zoom Video SDK. We occasionally encounter the following error when attempting to connect a video call:

Uncaught TypeError: Cannot set properties of undefined (setting ‘canvasId’) at webGLContextLostProtect at b.Get_Display.

However, we are not using any canvas elements in our video call connection implementation, and we’re unable to pinpoint where this error originates in the code.

Here’s our video connection implementation:

const videoPlayerListRef = useRef<Record<string, VideoPlayer>>({});
const mediaStream = zmClient?.getMediaStream();
const attachment = videoPlayerListRef.current[`${userId}`];
mediaStream?.attachVideo(userId, VideoQuality.Video_720P, attachment);

<video-player-container class="video-container-wrap">
    <div className="">
        {zoomLocalParticipant?.map((user: any) => {
            return (
                <div
                    className="video-cell"
                    key={user.userId}
                    style={"aspectRatio": "16/9" }
                                                    >
        <div key={user.userGuid}>
            <video-player
                class="video-player"
                ref={(element) => {
                    setVideoPlayerRef(user.userId, element);
                }}
            />
            <span>{audioDisable ? <i className="bi bi-mic-mute mute-icon"></i> : <></>} </span>
        </div>
    </div>
    );
})}
</div>
</video-player-container>

This error is causing delays in our work. We would appreciate your help in identifying the root cause and suggesting effective ways to resolve it.

Thank you in advance for your assistance.

2

Hey @anjithiruveedhi238

Thanks for your feedback.

Could you share some problematic session IDs with us for troubleshooting purposes?

Thanks
Vic

5

Sure, @vic.yang.

Here are the session IDs that are causing issues:

  • DvrZtN0OSI6kbfTu8nVy/w==
  • 0NoIxChlSGGd59q5NR05MA==
  • IWckX1tTSJOl1Qqr9hh9Pw==

I wanted to confirm that for both calls, bVideo is true.

I have some additional questions. When initiating video calls, some times it takes around 40 seconds to receive the camera feed and video stream from remote participants, and this delay seems random. I would like to have some events related to video or camera status that can alert us in such cases, allowing us to implement retry logic if needed.

For example, in Twilio, if the camera feed is lost for 30 seconds, the “recording-media-lost” event is triggered, and we can respond accordingly.

6

Hey @anjithiruveedhi238

Thanks for sharing the session IDs with us.

  • DvrZtN0OSI6kbfTu8nVy/w==
  • 0NoIxChlSGGd59q5NR05MA==
  • IWckX1tTSJOl1Qqr9hh9Pw==

After analyzing the logs, we found SharedArrayBuffer is not enabled.
Did you enable the enforceMultipleVideos option in the client.init method?

0NoIxChlSGGd59q5NR05MA==

In this session, we noticed that a user didn’t use GPU acceleration for video rendering. Does this user not have a dedicated graphics card? Both integrated and dedicated graphics cards can be used. Or did the user disable the ‘Use hardware acceleration when available’ option in chrome://settings?

I would like to have some events related to video or camera status that can alert us in such cases,

As for the issue you mentioned about not receiving video for an extended period, we don’t provide an event similar to Twilio’s, but we do offer the video-detailed-data-change event.

You can listen to this event to monitor the FPS and resolution of each user. You can enable this by subscribing with stream.subscribeVideoStatisticData({detailed: true}).

Thanks
Vic