Zoom SDK Getting low quality for local user for a mobile browser

Video SDK Web
1

I am encountering an issue with the Zoom Video SDK on React where the participant’s local video ZoomVideo.createLocalVideoTrack(deviceId) displays low quality and the wrong aspect ratio for participants from mobile devices (IOS).
Are there any tips on how to get better quality, or is there something wrong on my end?

Example from phone:

Screenshot 2025-05-20 at 16.20.29
Screenshot 2025-05-20 at 16.20.29785×438 136 KB

2025-05-20 16.23.48
2025-05-20 16.23.481280×591 129 KB

Example from the inspector:

Screenshot 2025-05-20 at 12.40.07
Screenshot 2025-05-20 at 12.40.072359×526 198 KB

1 Like
2

hi @andriy1
zoom will lower resolution when there is not “power” or “bandwidth”.
Are you running the sdk in a web browser?
the best way to see what is going on is too ask if you can get to the settings menu from your implementation and can then look at the statistics tag.
Then I would want to know what camera you are using and what it is showing. Can you chcck by accessing from another application?
all the best

John

1 Like
3

Hi Andriy,

Thanks for the detailed post!

To improve local video quality and ensure proper aspect ratio on mobile browsers using the Zoom Video SDK, please check the following:

1. Enable HD / Full HD in startVideo

Make sure to check HD support and start video with the right quality settings:

if (stream.isSupportHDVideo()) {
  await stream.startVideo({
    hd: true,
    fullHd: true
  });
} else {
  await stream.startVideo(); // fallback if HD not supported
}

2. Set Resolution to 1080p

Explicitly set the video quality when attaching your own stream:

const userId = client.getCurrentUserInfo().userId;
const userVideo = await stream.attachVideo(userId, VideoQuality.Video_1080P);

3. Enable SharedArrayBuffer (SAB)

Ensure your deployment includes these headers to support high-performance video rendering:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

4. Enforce 16:9 Aspect Ratio

Apply this CSS to maintain a proper video layout:

.video-player-container, .video-players {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 100%;
  height: auto;
}

Reference
Please make sure your implementation aligns with Zoom’s official HD video guide:
Zoom Video SDK – Enable HD Video

If you’ve applied all of the above and still encounter issues (especially on mobile), feel free to follow up here.

Thanks,
Naeem

1 Like
4

Hey @andriy1

Thanks for your feedback.

From the screenshot, it looks like the video-player size might be too small, causing the canvas to lack enough pixels to render the video content.

You can try increasing the size of the video-player or set its width and height proportionally, and then use scale to restore it to the original position.

video-player {
  width: 200%;
  height: 200%;
  transform-origin: top left;
  transform: scale(0.5, 0.5);
}

Thanks
Vic

5

Hey and thanks @vic.yang ! It seems to be working!
Do you have any advice on how to fix the resolution, it is currently cropped and not 16/9 or is this related to Zoom Video SDK Issue: 9:16 Aspect Ratio on Desktop Browser for Participants Joining from Mobile Browser - #5 by freelancer.nak?