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