When the Zoom preview screen is restarted, the background (blur, white) is no longer shown

Video SDK
1

Event Description:
I have implemented a preview screen using a canvas element as was in the previous forum.

I also used ZoomVideo.createLocalVideoTrack();.

In that case, I am having trouble with the following events.

  1. Start video call → change filters with background “none”, “blur”, and “white” respectively → background changes as normal with camera on.
  2. In the state of 1, once the preview screen is closed with the button and after restarting, select either item for background “blur” or “white” → camera is turned on but not displayed with black background. However, if the background is “none”, it behaves as usual.
  3. Reloading the screen and restarting the camera resolves the second issue.

Implementation details and possible cause of the event:
Use createLocalVideoTrack to create a new this.localVideoFilterTrack with this.localVideoFilterTrack undefined before entering the if statement.

 public localVideoFilterTrack: LocalVideoTrack | undefined;

 if (!this.localVideoFilterTrack) {
      this.localVideoFilterTrack = deviceId
        ? ZoomVideo.createLocalVideoTrack(deviceId)
        ZoomVideo.createLocalVideoTrack(); : ZoomVideo.createLocalVideoTrack(); }
    }

Then the following elements will be placed in the videoCaptureValue in this.localVideoFilterTrack.

"videoCaptureValue": {	
"canvas": "canvas-preview",	
"bgdom": "blur",	
"width": 1280,	
"height": 720,	
"ssid": 0,	
"VideoSelectValue": "XXXXXX",	
"disableOriginalRatio": false	
},

However, once the preview screen is closed with the button and after restarting

"videoCaptureValue": null

and null.
I think the reason this is happening is that the instance in this.localVideoFilterTrack also shows the same id before and after the restart and is not initialized.

2 Likes
2

Hey @yasu

Thanks for your feedback.

Based on my understanding, does the issue occur when using a canvas element as the preview element and not passing the imageUrl parameter for the virtual background when starting the video

It’s a known flaw in Video SDK Web.

We will improve the localVideoTrack’s virtual background preview method in the next version.

Thanks
Vic

3

@vic.yang

Hi, Vic

Thank you for the reply.

I am passing the canvas element as an argument to the start method of LocalVideoTrack as follows.
In that case, the imageUrl should be passed as string without any problem. But still it does not work. Will this problem be improved in the next version or later?

const myCanvas = <HTMLCanvasElement>document.querySelector('#canvas-preview');
this.localVideoFilterTrack.start(myCanvas, {
  imageUrl: filter
});

html code:
<canvas class="w-full video__preview aspect aspect-video object-cover" id="canvas-preview" playsinline>
</canvas>

Thanks
yasu

2 Likes
4

Hi @vic.yang,

The virtual background doesn’t work for preview.
This issue is related to the usage of enforceVirtualBackground: true when SharedArrayBuffer is disabled.

    const zmClient = ZoomVideo.createClient();
    await zmClient.init("en-US", `${window.location.origin}/lib`, {
        webEndpoint: window?.webEndpoint ?? "zoom.us",
        stayAwake: true,
        patchJsMedia: true,
        leaveOnPageUnload: true,
        enforceVirtualBackground: true,
    })

        const handlerStartVB = useCallback(async (imageUrl) => {
            if (!localVideo || !isStartedVideo) return false;

            await localVideo.stop();
            await localVideo.start(videoCanvasRef.current, { imageUrl });

            return true;
        }, [localVideo, isStartedVideo]);

Zoom Video SDK - 1.11.6
React 17.0.2

5

Hey @sergey77

Thanks for your feedback.

It’s a known issue and we will fix it in the next version.

The next version will be available around June 20th.

Thanks
Vic

1 Like