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:

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:

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.

New to Web SDK? Start Here!

The fastest way to master the SDK:

1. Choose Your View - Client View vs Component View - Understand the key architectural differences
2. Quick Start - Client View or Component View - Get a working meeting in minutes
3. SharedArrayBuffer - concepts/sharedarraybuffer.md - Required for HD video, gallery view, virtual backgrounds
4. Optional preflight diagnostics - ../../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
• Browser Support - Feature matrix by browser
• Exact deep-dive path: 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

Prerequisites

• Zoom app with Meeting SDK credentials from Marketplace
• SDK Key (Client ID) and Secret
• Modern browser (Chrome, Firefox, Safari, Edge)
• Backend auth endpoint for signature generation

…