Pre-join camera preview does not display in 16:9 aspect ratio with createLocalVideoTrack().start() (Web Video SDK v1.5.0)

Video SDK Web
1

Note: This post was translated from Japanese into English with the assistance of AI. Please let me know if anything is unclear.

Description

We are currently developing a live streaming application using React and the Zoom Video SDK. While testing the pre-join camera preview feature, we observed the following behavior, and we would like to ask about the possible cause and any workarounds:

  • We create a video track with ZoomVideo.createLocalVideoTrack() and render it using the track’s start() method.
  • The <canvas> element generated by the SDK is created with a 16:9 aspect ratio, and we also apply aspect-ratio: 16 / 9 in CSS on the preview element. However, depending on the camera, the rendered video appears approximately 7:6 instead of 16:9. The affected cameras themselves do support a 16:9 aspect ratio, and after joining the session, the same camera’s video attached via attachVideo() is displayed correctly at 16:9.
  • In addition, when we switch the preview camera device using the switchCamera() method and then switch back to the device where the issue occurred, the problematic device sometimes starts rendering correctly at 16:9. This tends to happen when the device we switched to in between was displaying correctly at 16:9.

Browser Console Error

No error is output to the browser console. The preview video itself renders, but its aspect ratio is approximately 7:6 instead of 16:9.

Which Web Video SDK version?

Zoom Video SDK (Web) v1.5.0

Video SDK Code Snippets

Below are simplified and masked snippets from our implementation:

// Create the local video track for the pre-join preview
const cameraTrack = ZoomVideo.createLocalVideoTrack(cameraDeviceId)

// Start the preview.
// The SDK renders a <canvas> element inside the given target element.
const target = document.querySelector('#preview-video')
if (target) {
  await cameraTrack.start(target)
}

// Switch the preview camera device
await cameraTrack
  .switchCamera(deviceId)
  .catch((error) => console.error('Failed to switch camera:', error))

/* Container of the preview area */
.preview-video-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* The element passed to track.start() (the SDK appends a <canvas> into it) */
.preview-video-player {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

To Reproduce

  1. On a machine with one of the affected cameras (see Device / Additional context below), open our pre-join settings screen.
  2. Initialize the camera preview with ZoomVideo.createLocalVideoTrack() followed by track.start(previewElement).
  3. The preview video is displayed at approximately 7:6, even though the generated <canvas> element has a 16:9 aspect ratio and the CSS sets aspect-ratio: 16 / 9.
  4. Join the session with the same camera — the video attached via attachVideo() is displayed correctly at 16:9.
  5. Switch the preview camera with switchCamera() to another camera that is displayed correctly at 16:9, then switch back to the affected camera — the affected camera now sometimes displays correctly at 16:9.

Screenshots

Troubleshooting Routes

  • Confirmed that the affected cameras support a 16:9 aspect ratio, and that the same camera is displayed at 16:9 in the in-session video attached via attachVideo().
  • Confirmed that the <canvas> element generated by start() is created with a 16:9 aspect ratio, and that our CSS also applies aspect-ratio: 16 / 9.
  • Tried switching the camera back and forth with switchCamera(), which sometimes restores the correct 16:9 rendering.

Device (please complete the following information):

  • Device: MacBook Pro 14-inch 2024 (Apple M4), MacBook Pro 16-inch 2021 (Apple M1 Max)
  • OS: macOS 26.2, macOS Sonoma 14.8.7, macOS Sonoma 14.8.9
  • Browser: Chrome
  • Browser Version: Latest stable version (auto-updated)

Additional context

  • Cameras with which the issue occurred:
    • MacBook Pro built-in camera (0000:0001)
    • FaceTimeHD camera (3A71:F4B5)
    • C270 HD WebCam (046d:0825) — external USB webcam
  • The issue only occurs in the pre-join preview (createLocalVideoTrack() + start()); the in-session video (attachVideo()) is not affected.
  • We would appreciate any insights into the possible cause of this behavior and any workarounds.

Thank you in advance for your help!