The virtual background with a custom image has an unnecessary black edge

[lmtruong1512 (TruongLM)]

Description

The virtual background with a custom image has an unnecessary black edge. (Ratio camera view is: 16 : 9)

Which Web Video SDK version?
2.1.0

Video SDK Code Snippets

    try {
      if (imageUrl) {
        await this.localVideoTrack.start(document.querySelector('#preview-camera-canvas'), { imageUrl: imageUrl });
      } else {
        await this.localVideoTrack.start(document.querySelector('#preview-camera-video'));
      }
    } catch (error) {
      Logger.error('[VIDEO-SDK JS] Start local preview video error', error);
      throw error;
    }

Screenshots

Device:

• Device: Mac
• OS: MacOS 15.1
• Browser: Chrome
• Browser Version: 134.0.6998.89

[ekaansh.zoom (Ekaansh)]

Hey @lmtruong1512
Do you observe this in the latest version of the Video SDK? I’m unable to reproduce this in v2.1.10. I tried both a vertical and a horizontal image.

I’m using this repo: GitHub - zoom/videosdk-web-helloworld
Here’s the code change I made:

await mediaStream.startVideo({ virtualBackground: { imageUrl: "image-url" } });

We don’t recommend using a <canvas> element anymore, you can use the standard <video-player-container> element.

[lmtruong1512 (TruongLM)]

@ekaansh.zoom Thank you for your response.

We switched to using the <video-player-container> element but still face this issue. The example above uses mediaStream during the meeting instead of the local video track in the preview. We noticed that the problem only occurs during the preview. Could you check if it happens in the preview as well?

[ekaansh.zoom (Ekaansh)]

Hi @lmtruong1512

From our docs, we suggest using this pattern for previewing virtual background:

  const mediaStream = client.getMediaStream();
  const vidPlayer = document.querySelector("#in-session-preview-video") as VideoPlayer
  mediaStream.previewVirtualBackground(vidPlayer, "url", false)

  <video-player-container>
    <video-player id="in-session-preview-video"></video-player>
  </video-player-container>

Here is the doc: Video SDK - web - Video

---

I also tried and used the createLocalVideoTrack method and don’t observe the black edge on the latest VSDK release, however the quality is not as good as the suggested method above.

  const localVid = ZoomVideo.createLocalVideoTrack();
  const vidPlayer = document.querySelector("#in-session-preview-video") as VideoPlayer
  await localVid.start(vidPlayer, { imageUrl: "https://images.pexels.com/photos/31410286/pexels-photo-31410286/free-photo-of-serene-view-of-tibetan-plateau-antelopes.jpeg" });

[lmtruong1512 (TruongLM)]

Thanks, @ekaansh.zoom! I’ll try using mediaStream instead.