Error Implementing Virtual Background Preview Using `video-player` in Zoom VideoSDK v2.1.0

Video SDK
1

Video SDK Type and Version
VideoSDK: 2.1.0

Description
I attempted to remove the canvas and use the video-player nested within the video-player-container to display the virtual background preview, as outlined in the latest version of the ZoomVideoSDK documentation: Preview Camera Changelog(Version 2.1.0 - Zoom Developers). However, this approach failed and returned the following error:

Cannot start video with virtual background. Using the canvas still works as expected.

Additionally, I couldn’t find any updated implementation in the Zoom VideoSDK Web Sample. Is the new method not work yet, and does it still require the canvas to work properly?

Environment
Browser/client type and version: Chrome - Version 131.0.6778.205 (Official Build) (arm64)
OS version: MacOS 15.1

2

I tried upgrading to version 2.1.5 but it still doesn’t work. Can anyone help me with this problem? Thanks

3

Hey @lmtruong1512

Thanks for your feedback.

Could you share some code snippets with us?

The Video SDK Web sample app is also updated.

Thanks
Vic

4

Hi @vic.yang

Thank you for your response.

I have followed the exact instructions from the Zoom Video SDK documentation and implemented it as shown below:

<video-player-container class="local-preview-container">
  <video-player id="local-preview-video"></video-player>
</video-player-container>

  localVideoTrack.start(document.querySelector('#local-preview-video'), {
    imageUrl: 'blur'
  })

Regarding the Zoom VideoSDK Web Sample, I noticed that it still uses the canvas element to render the blurred background. However, according to the updated documentation, it seems that the video-player element should be used instead.

Please check the implementation at this reference:
preview.tsx#L202.

5

Hey @lmtruong1512

Yes.

Using the canvas to render video is still supported but is no longer recommended.

Additionally, the canvas approach is not supported when using the WebRTC video solution.

Thanks
Vic

6

@vic.yang
However, I am concerned about using the video-player element for rendering virtual backgrounds, as recommended in the latest documentation. It seems that this approach is not work at the moment. Could you confirm this?

7

Hey @lmtruong1512

Thanks for sharing your concern with me.

I tested the localVideoTrack.start method with the video-player and the blur virtual background, and it works as expected.

Could you try it again? You can update the sample code on line 118 to include the virtual background option.

Thanks
Vic

8

Having the same issue with the virtual background. I attempted adding the { imageUrl: ‘blur’ } to the line suggested here in the sample app and it just throws “Cannot start video with virtual background”

9

Hey @GSDev

Thanks for your feedback.

Cannot start video with virtual background

This error occurs because a virtual background was used with an HTMLVideoElement, whereas a video-player was expected.

Thanks
Vic

2 Likes
10

@vic.yang Thanks! I tried it, and it worked. Previously, I was not using the video-player element, which is why it didn’t work.

11

yep this got my sample app working with the virtual background in the video-player component. In my app I needed to go one further and load the web assembly in and make a couple configuration changes in the vite config to get the blur working.