Hi everyone,
I’m embedding the Meeting SDK Embedded Client (Component View) inside a Next.js (App Router) web app, and I’m hitting two related rendering issues that I can’t find documentation for. Posting here after several days of debugging in case someone has run into this.
Environment
- Zoom Meeting SDK Embedded, version 3.8.5 (loaded via
https://source.zoom.us/zoom-meeting-embedded-3.8.5.min.jsUMD script) - Next.js 15+ (App Router, Turbopack), React 19
client.init()is called withzoomAppRootpointing to a plain<div>,patchJsMediatoggled on/off in testing,customize.video.isResizable: trueandcustomize.video.viewSizes.defaultset
Issue 1: video canvas ignores updateVideoOptions dimensions
After client.join() succeeds, I call:
client.updateVideoOptions({
viewSizes: {
default: { width: finalWidth, height: finalHeight }
}
})
Console confirms this is called with correct, large values (e.g. {finalWidth: 806, finalHeight: 584}), matching the actual size of the container div (verified via getBoundingClientRect() on the same element passed as zoomAppRoot’s parent).
However, inspecting the DOM live (Chrome DevTools → Elements) after join, I consistently find:
<canvas id="zoom-sdk-video-canvas" width="250" height="135" ...>
The canvas itself is hard-set to 250x135px regardless of what’s passed to updateVideoOptions. It’s rendered inside a <ul>/<li> structure (looks like a MUI-based gallery list — class="MuiListItem-root..."), suggesting the SDK is rendering in a “gallery” grid-tile layout where each participant gets a small fixed-size tile, and viewSizes.default isn’t controlling that tile size.
Issue 2: defaultViewType: ‘speaker’ grows the canvas but removes the entire controls toolbar
Based on the type definitions in @zoom/meetingsdk’s embedded.d.ts (SuspensionViewType enum: Minimized | Speaker | Ribbon | Gallery | Active), I tried setting:
customize: {
video: {
isResizable: true,
viewSizes: { default: { width, height } },
defaultViewType: 'speaker'
}
}
This does make the video canvas render much larger (filling most of the container), but as a side effect, the entire meeting controls toolbar (mic, camera, share screen, leave) disappears — both in a normal-sized container and in fullscreen. Only a secondary top bar (security icon + layout/view-switcher icons) remains visible; the primary control bar seems to not render at all in this view mode.
What I’ve already tried
- Removing/adding
patchJsMedia: true - Removing a hardcoded 16:9 letterboxing calculation in favor of filling 100% of the parent container via
ResizeObserver+ pure CSS (absolute inset-0 w-full h-full), no JS-driven inline styles on the container - Enabling
Cross-Origin-Embedder-Policy: credentialless+Cross-Origin-Opener-Policy: same-originon the relevant routes (this did fix a separate, unrelated issue where screen share content wasn’t rendering at all for any participant — now it renders, just at the wrong/small size) showPureSharingContent: trueincustomize.opts
Question
- Is there a supported way to make the gallery-view participant tile (and the canvas it draws to) actually respect
viewSizes.default, instead of rendering at a fixed small size? - If
defaultViewType: 'speaker'is the right approach for a single large “active speaker” view, is there a known reason the controls toolbar disappears in that mode, or an additional option needed to keep it visible?
Happy to share more code/screenshots if useful. Thanks in advance!