zoom-meeting-sdk-web

What this skill does

# 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** | `ZoomMtg` (global singleton) | `ZoomMtgEmbedded.createClient()` (instance) |
| **API Style** | Callbacks | Promises |
| **UI** | Full-page takeover | Embeddable in any container |
| **Password param** | `passWord` (capital W) | `password` (lowercase) |
| **Events** | `inMeetingServiceListener()` | `on()`/`off()` |
| **Import (npm)** | `import { ZoomMtg } from '@zoom/meetingsdk'` | `import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded'` |
| **CDN** | `zoom-meeting-{VERSION}.min.js` | `zoom-meeting-embedded-{VERSION}.min.js` |
| **Best For** | Quick integration, standard Zoom UI | Custom layouts, React/Vue apps |

### When to Use Which

**Use Client View when:**
- You want the familiar Zoom meeting interface
- Quick integration is priority over customization
- Full-page meeting experience is acceptable

**Use Component View when:**
- You need to embed meetings in a specific area of your page
- Building React/Vue/Angular applications
- You want Promise-based async/await syntax
- Custom positioning and resizing is required

## Installation

### NPM (Recommended)

```bash
npm install @zoom/meetingsdk --save
```

### CDN

```html
<!-- Dependencies (required for both views) -->
<script src="https://source.zoom.us/{VERSION}/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/lodash.min.js"></script>

<!-- Client View -->
<script src="https://source.zoom.us/zoom-meeting-{VERSION}.min.js"></script>

<!-- OR Component View -->
<script src="https://source.zoom.us/zoom-meeting-embedded-{VERSION}.min.js"></script>
```

Replace `{VERSION}` with the [latest version](https://www.npmjs.com/package/@zoom/meetingsdk) (e.g., `3.11.0`).

## Quick Start (Client View)

```javascript
import { ZoomMtg } from '@zoom/meetingsdk';

// Step 1: Check browser compatibility
console.log('System requirements:', ZoomMtg.checkSystemRequirements());

// Step 2: Preload WebAssembly for faster initialization
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

// Step 3: Load language files (MUST complete before init)
ZoomMtg.i18n.load('en-US');
ZoomMtg.i18n.onLoad(() => {
  
  // Step 4: Initialize SDK
  ZoomMtg.init({
    leaveUrl: 'https://yoursite.com/meeting-ended',
    disableCORP: !window.crossOriginIsolated, // Auto-detect SharedArrayBuffer
    patchJsMedia: true,           // Auto-apply media dependency fixes
    leaveOnPageUnload: true,      // Clean up when page unloads
    externalLinkPage: './external.html', // Page for external links
    success: () => {
      
      // Step 5: Join meeting (note: passWord with capital W!)
      ZoomMtg.join({
        signature: signature,       // From your auth endpoint
        meetingNumber: '1234567890',
        userName: 'User Name',
        passWor