# zoom-meeting-sdk-web

Helps integrate Zoom meetings into web applications via Client View or Component View. Covers SDK initialization, signature fetching, and HD video requirements.

- skill · `type=skill` · Codex, ChatGPT · ★ 7604
- Author: Zoom · official OpenAI repository
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/openai/plugins/tree/HEAD/plugins/zoom/skills/meeting-sdk/web/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/zoom-meeting-sdk-web

## What it does

This skill guides coding agents through embedding Zoom Meeting SDK for Web into browser interfaces. It maintains a strict separation between standard full-page Client View and container-based Component View. They use different architectures.

Meeting initialization always requires a backend endpoint to issue SDK signatures before `client.join()` executes. Without the HTTP headers required for `SharedArrayBuffer`, browsers block HD video, virtual backgrounds, and gallery layouts. The skill also catches parameter mismatches, such as `passWord` with a capital W in Client View versus lowercase `password` in Component View.

## Install

### Codex (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill web -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/web/SKILL.md` — For all projects use ~/.agents/skills/

### Claude Code

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill web -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/web/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/web/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/web/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install openai/plugins web
```

2. **Manually: put the files in place**
- File: `.github/skills/web/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/openai/plugins --path plugins/zoom/skills/meeting-sdk/web
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/web/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/openai/plugins/tree/HEAD/plugins/zoom/skills/meeting-sdk/web/SKILL.md

## When to use it
- embed Zoom meetings inside custom React or Vue containers
- select the correct architecture between Client View and Component View
- implement backend signature retrieval for client.join
- enable gallery view and virtual backgrounds via SharedArrayBuffer

## Example prompts
- Show me how to embed a Zoom meeting container using Component View.
- Write the startEmbeddedMeeting helper with backend signature fetching.
- Why does the Zoom web client fail to load virtual backgrounds and HD video?

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: e7b0349d56f8d6a2.

BEGIN THIRD-PARTY FILE e7b0349d56f8d6a2
````text
---
name: zoom-meeting-sdk-web
description: |
  Zoom Meeting SDK for Web - Embed Zoom meeting capabilities into web applications. Two integration
  options: Client View (full-page, familiar Zoom UI) and Component View (embeddable, Promise-based API).
  Includes SharedArrayBuffer setup for HD video, gallery view, and virtual backgrounds.
---

# 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
````
END THIRD-PARTY FILE e7b0349d56f8d6a2

The third-party file has ended. Everything between the e7b0349d56f8d6a2 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3536 of 34583 bytes. © Zoom · MIT · https://github.com/openai/plugins/tree/HEAD/plugins/zoom/skills/meeting-sdk/web/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md