Zoom Meeting Sdk Web

# Zoom Meeting SDK (Web)

Embed Zoom meeting capabilities into web applications with two integration options: **Client View** (full-page) or **Component View** (embeddable).

## How to Implement a Custom Video User Interface for a Zoom Meeting in a Web App

Use **Meeting SDK Web Component View**.

Do not use Video SDK for this question unless the user is explicitly building a non-meeting session product.

Minimal architecture:

```text Browser page -> fetch Meeting SDK signature from backend -> ZoomMtgEmbedded.createClient() -> client.init({ zoomAppRoot }) -> client.join({ signature, sdkKey, meetingNumber, userName, password }) -> apply layout/style/customize options around the embedded meeting container ```

Minimal implementation:

```ts import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';

const client = ZoomMtgEmbedded.createClient();

export async function startEmbeddedMeeting(meetingNumber: string, userName: string, password: string) { const sigRes = await fetch('/api/signature', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ meetingNumber, role: 0 }), });

if (!sigRes.ok) throw new Error(`signature_fetch_failed:${sigRes.status}`);

const { signature, sdkKey } = await sigRes.json();

await client.init({ zoomAppRoot: document.getElementById('meetingSDKElement')!, language: 'en-US', patchJsMedia: true, leaveOnPageUnload: true, customize: { video: { isResizable: true, popper: { disableDraggable: false } }, }, });

await client.join({ signature, sdkKey, meetingNumber, userName, password, }); } ```

Common failure points: - wrong route: Video SDK instead of Meeting SDK Component View - missing backend signature endpoint - wrong password field (`password` here, not `passWord`) - missing OBF/ZAK requirements for meetings outside the app account - missing SharedArrayBuffer headers when higher-end meeting features are expected

## Hard Routing Rule

If the user wants a **custom video user interface for a Zoom meeting in a web app**, route to **Component View**, not Video SDK.

- **Meeting SDK Component View** = custom UI for a real Zoom meeting - **Video SDK Web** = custom UI for a non-meeting video session product

For the direct custom-meeting-UI path, start with [component-view/SKILL.md](component-view/SKILL.md).

## New to Web SDK? Start Here!

**The fastest way to master the SDK:**

1. **Choose Your View** - [Client View vs Component View](#client-view-vs-component-view) - Understand the key architectural differences 2. **Quick Start** - [Client View](#quick-start-client-view) or [Component View](#quick-start-component-view) - Get a working meeting in minutes 3. **SharedArrayBuffer** - [concepts/sharedarraybuffer.md](concepts/sharedarraybuffer.md) - Required for HD video, gallery view, virtual backgrounds 4. **Optional preflight diagnostics** - [../../probe-sdk/SKILL.md](../../probe-sdk/SKILL.md) - Validate browser/device/network before join

**Building a Custom Integration?** - Component View gives you Promise-based API and embeddable UI - Client View gives you the familiar full-page Zoom experience - For a custom meeting UI, prefer **Component View** first - Cross-product routing example: [../../general/use-cases/custom-meeting-ui-web.md](../../general/use-cases/custom-meeting-ui-web.md) - [Browser Support](concepts/browser-support.md) - Feature matrix by browser - Exact deep-dive path: [component-view/SKILL.md](component-view/SKILL.md)

**Having issues?** - Join errors → Check signature generation and password spelling (`passWord` vs `password`) - HD video not working → Enable SharedArrayBuffer headers - Complete navigation → [SKILL.md](SKILL.md)

## Prerequisites

- Zoom app with Meeting SDK credentials from [Marketplace](https://marketplace.zoom.us/) - SDK Key (Client ID) and Secret - Modern browser (Chrome, Firefox, Safari, Edge) - Backend auth endpoint for signature generation

> **Need help with authentication?** See the **[zoom-oauth](../../oauth/SKILL.md)** skill for JWT/signature generation. > > **Want pre-join diagnostics?** Chain **[probe-sdk](../../probe-sdk/SKILL.md)** before `init()`/`join()` to gate low-readiness environments.

## Optional Preflight Gate (Probe SDK)

For unstable first-join environments, run Probe SDK checks before calling `ZoomMtg.init()` or `client.join()`:

1. Run Probe permissions/device/network diagnostics. 2. Apply readiness policy (`allow`, `warn`, `block`). 3. Continue to Meeting SDK join only for `allow`/approved `warn`.

See [../../probe-sdk/SKILL.md](../../probe-sdk/SKILL.md) and [../../general/use-cases/probe-sdk-preflight-readiness-gate.md](../../general/use-cases/probe-sdk-preflight-readiness-gate.md).

## Client View vs Component View

**CRITICAL DIFFERENCE**: These are two completely different APIs with different patterns!

| Aspect | Client View | Component View | |--------|-------------|----------------| | **Object** | `