anthropics/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:

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

Need help with authentication? See the zoom-oauth skill for JWT/signature generation.

Want pre-join diagnostics? Chain probe-sdk 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 and ../../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)

npm install @zoom/meetingsdk --save

CDN

<!-- 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 (e.g., 3.11.0).

Quick Start (Client View)

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',
        passWord: 'meeting-password', // Capital W!
        success: (res) => {
          console.log('Joined meeting:', res);
          
          // Post-join: Get meeting info
          ZoomMtg.getAttendeeslist({});
          ZoomMtg.getCurrentUser({
            success: (res) => console.log('Current user:', res.result.currentUser)
          });
        },
        error: (err) => {
          console.error('Join error:', err);
        }
      });
    },
    error: (err) => {
      console.error('Init error:', err);
    }
  });
});

Quick Start (Component View)

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

// Create client instance (do this ONCE, not on every render!)
const client = ZoomMtgEmbedded.createClient();

async function startMeeting() {
  try {
    // Initialize with container element
    await client.init({
      zoomAppRoot: document.getElementById('meetingSDKElement'),
      language: 'en-US',
      debug: true,                  // Enable debug logging
      patchJsMedia: true,           // Auto-apply media fixes
      leaveOnPageUnload: true,      // Clean up on page unload
    });

    // Join meeting (note: password lowercase!)
    await client.join({
      signature: signature,          // From your auth endpoint
      sdkKey: SDK_KEY,
      meetingNumber: '1234567890',
      userName: 'User Name',
      password: 'meeting-password',  // Lowercase!
    });
    
    console.log('Joined successfully!');
  } catch (error) {
    console.error('Failed to join:', error);
  }
}

Authentication Endpoint (Required)

Both views require a JWT signature from a backend server. Never expose your SDK Secret in frontend code!

# Clone Zoom's official auth endpoint
git clone https://github.com/zoom/meetingsdk-auth-endpoint-sample --depth 1
cd meetingsdk-auth-endpoint-sample
cp .env.example .env
# Edit .env with your SDK Key and Secret
npm install && npm run start

Signature Generation

The signature encodes:

• sdkKey (or clientId for newer apps)
• meetingNumber
• role (0 = participant, 1 = host)
• iat (issued at timestamp)
• exp (expiration timestamp)
• tokenExp (token expiration)

IMPORTANT (March 2026): Apps joining meetings outside their account will require an App Privilege Token (OBF) or ZAK token. See Authorization Requirements.

Core Workflow

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Get Signature │───►│   init()        │───►│   join()        │
│   (from backend)│    │   (SDK setup)   │    │   (enter mtg)   │
└─────────────────┘    └─────────────────┘    └─────────────────┘
                              │                       │
                              ▼                       ▼
                       success/error            success/error
                        callback                 callback
                     (or Promise resolve)    (or Promise resolve)

Client View API Reference

ZoomMtg.init() - Key Options

ZoomMtg.init({
  // Required
  leaveUrl: string,              // URL to redirect after leaving

  // Display Options
  showMeetingHeader: boolean,    // Show meeting number/topic (default: true)
  disableInvite: boolean,        // Hide invite button (default: false)
  disableRecord: boolean,        // Hide record button (default: false)
  disableJoinAudio: boolean,     // Hide join audio option (default: false)
  disablePreview: boolean,       // Skip A/V preview (default: false)
  
  // HD Video (requires SharedArrayBuffer)
  enableHD: boolean,             // Enable 720p (default: true for >=2.8.0)
  enableFullHD: boolean,         // Enable 1080p for webinars (default: false)
  
  // View Options
  defaultView: 'gallery' | 'speaker' | 'multiSpeaker',
  
  // Feature Toggles
  isSupportChat: boolean,        // Enable chat (default: true)
  isSupportCC: boolean,          // Enable closed captions (default: true)
  isSupportBreakout: boolean,    // Enable breakout rooms (default: true)
  isSupportPolling: boolean,     // Enable polling (default: true)
  isSupportQA: boolean,          // Enable Q&A for webinars (default: true)
  
  // Cross-Origin
  disableCORP: boolean,          // For dev without COOP/COEP headers
  
  // Callbacks
  success: Function,
  error: Function,
});

ZoomMtg.join() - Key Options

ZoomMtg.join({
  // Required
  signature: string,             // JWT signature from backend
  meetingNumber: string | number,
  userName: string,
  
  // Authentication
  passWord: string,              // Meeting password (capital W!)
  zak: string,                   // Host's ZAK token (required to start)
  tk: string,                    // Registration token (if required)
  obfToken: string,              // App Privilege Token (for 2026 requirement)
  
  // Optional
  userEmail: string,             // Required for webinars
  customerKey: string,           // Custom identifier (max 36 chars)
  
  // Callbacks
  success: Function,
  error: Function,
});

Event Listeners (Client View)

// User events
ZoomMtg.inMeetingServiceListener('onUserJoin', (data) => {
  console.log('User joined:', data);
});

ZoomMtg.inMeetingServiceListener('onUserLeave', (data) => {
  console.log('User left:', data);
  // data.reasonCode values:
  // 0: OTHER
  // 1: HOST_ENDED_MEETING
  // 2: SELF_LEAVE_FROM_IN_MEETING
  // 3: SELF_LEAVE_FROM_WAITING_ROOM
  // 4: SELF_LEAVE_FROM_WAITING_FOR_HOST_START
  // 5: MEETING_TRANSFER
  // 6: KICK_OUT_FROM_MEETING
  // 7: KICK_OUT_FROM_WAITING_ROOM
  // 8: LEAVE_FROM_DISCLAIMER
});

ZoomMtg.inMeetingServiceListener('onUserUpdate', (data) => {
  console.log('User updated:', data);
});

// Meeting status
ZoomMtg.inMeetingServiceListener('onMeetingStatus', (data) => {
  // status: 1=connecting, 2=connected, 3=disconnected, 4=reconnecting
  console.log('Meeting status:', data.status);
});

// Waiting room
ZoomMtg.inMeetingServiceListener('onUserIsInWaitingRoom', (data) => {
  console.log('User in waiting room:', data);
});

// Active speaker detection
ZoomMtg.inMeetingServiceListener('onActiveSpeaker', (data) => {
  // [{userId: number, userName: string}]
  console.log('Active speaker:', data);
});

// Network quality monitoring
ZoomMtg.inMeetingServiceListener('onNetworkQualityChange', (data) => {
  // {level: 0-5, userId, type: 'uplink'}
  // 0-1 = bad, 2 = normal, 3-5 = good
  if (data.level <= 1) {
    console.warn('Poor network quality');
  }
});

// Join performance metrics
ZoomMtg.inMeetingServiceListener('onJoinSpeed', (data) => {
  console.log('Join speed metrics:', data);
  // Useful for performance monitoring dashboards
});

// Chat
ZoomMtg.inMeetingServiceListener('onReceiveChatMsg', (data) => {
  console.log('Chat message:', data);
});

// Recording
ZoomMtg.inMeetingServiceListener('onRecordingChange', (data) => {
  console.log('Recording status:', data);
});

// Screen sharing
ZoomMtg.inMeetingServiceListener('onShareContentChange', (data) => {
  console.log('Share content changed:', data);
});

// Transcription (requires "save closed captions" enabled)
ZoomMtg.inMeetingServiceListener('onReceiveTranscriptionMsg', (data) => {
  console.log('Transcription:', data);
});

// Breakout room status
ZoomMtg.inMeetingServiceListener('onRoomStatusChange', (data) => {
  // status: 2=InProgress, 3=Closing, 4=Closed
  console.log('Breakout room status:', data);
});

Common Methods (Client View)

// Get current user info
ZoomMtg.getCurrentUser({
  success: (res) => console.log(res.result.currentUser)
});

// Get all attendees
ZoomMtg.getAttendeeslist({});

// Audio/Video control
ZoomMtg.mute({ userId, mute: true });
ZoomMtg.muteAll({ muteAll: true });

// Chat
ZoomMtg.sendChat({ message: 'Hello!', userId: 0 }); // 0 = everyone

// Leave/End
ZoomMtg.leaveMeeting({});
ZoomMtg.endMeeting({});

// Host controls
ZoomMtg.makeHost({ userId });
ZoomMtg.makeCoHost({ oderId });
ZoomMtg.expel({ userId });  // Remove participant
ZoomMtg.putOnHold({ oderId, bHold: true });

// Breakout rooms
ZoomMtg.createBreakoutRoom({ rooms: [...] });
ZoomMtg.openBreakoutRooms({});
ZoomMtg.closeBreakoutRooms({});

// Virtual background
ZoomMtg.setVirtualBackground({ imageUrl: '...' });

Component View API Reference

client.init() - Key Options

await client.init({
  // Required
  zoomAppRoot: HTMLElement,      // Container element

  // Display
  language: string,              // e.g., 'en-US'
  debug: boolean,                // Enable debug logging (default: false)
  
  // Media
  patchJsMedia: boolean,         // Auto-apply media fixes (default: false)
  leaveOnPageUnload: boolean,    // Clean up on page unload (default: false)
  
  // Video
  enableHD: boolean,             // Enable 720p
  enableFullHD: boolean,         // Enable 1080p
  
  // Customization
  customize: {
    video: {
      isResizable: boolean,
      viewSizes: { default: { width, height } }
    },
    meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
    toolbar: {
      buttons: [
        {
          text: 'Custom Button',
          className: 'custom-btn',
          onClick: () => {
            console.log('Custom button clicked');
          }
        }
      ]
    }
  },
  
  // For ZFG
  webEndpoint: string,
  assetPath: string,             // Custom path for AV libraries (self-hosting)
});

client.join() - Key Options

await client.join({
  // Required
  signature: string,
  sdkKey: string,
  meetingNumber: string | number,
  userName: string,
  
  // Authentication  
  password: string,              // Lowercase! (different from Client View)
  zak: string,                   // Host's ZAK token
  tk: string,                    // Registration token
  
  // Optional
  userEmail: string,
});

Event Listeners (Component View)

// Connection state
client.on('connection-change', (payload) => {
  // payload.state: 'Connecting', 'Connected', 'Reconnecting', 'Closed'
  console.log('Connection:', payload.state);
});

// User events
client.on('user-added', (payload) => {
  console.log('Users added:', payload);
});

client.on('user-removed', (payload) => {
  console.log('Users removed:', payload);
});

client.on('user-updated', (payload) => {
  console.log('Users updated:', payload);
});

// Active speaker
client.on('active-speaker', (payload) => {
  console.log('Active speaker:', payload);
});

// Video state
client.on('video-active-change', (payload) => {
  console.log('Video active:', payload);
});

// Unsubscribe
client.off('connection-change', handler);

Common Methods (Component View)

// Get current user
const currentUser = client.getCurrentUser();

// Get all participants
const participants = client.getParticipantsList();

// Audio control
await client.mute(true);
await client.muteAudio(userId, true);

// Video control
await client.muteVideo(userId, true);

// Leave
client.leaveMeeting();

// End (host only)
client.endMeeting();

SharedArrayBuffer (CRITICAL for HD)

SharedArrayBuffer enables advanced features:

• 720p/1080p video
• Gallery view
• Virtual backgrounds
• Background noise suppression

Enable with HTTP Headers

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Verify in Browser

if (typeof SharedArrayBuffer === 'function') {
  console.log('SharedArrayBuffer enabled!');
} else {
  console.warn('HD features will be limited');
}

// Or check cross-origin isolation
console.log('Cross-origin isolated:', window.crossOriginIsolated);

Platform-Specific Setup

See concepts/sharedarraybuffer.md for:

• Vercel, Netlify, AWS CloudFront configuration
• nginx/Apache configuration
• Service worker fallback for GitHub Pages

Development Setup (Two-Server Pattern)

The official samples use a two-server pattern for development because COOP/COEP headers can break navigation:

// Server 1: Main app (port 9999) - NO isolation headers
// Serves index.html, navigation works normally

// Server 2: Meeting page (port 9998) - WITH isolation headers
// Serves meeting.html with SharedArrayBuffer support

// Main server proxies to meeting server
proxy: [{
  path: '/meeting.html',
  target: 'http://YOUR_MEETING_SERVER_HOST:9998/'
}]

Vite config with headers:

// vite.config.ts
export default defineConfig({
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    }
  }
});

Common Issues & Solutions

| Issue | Solution | |-------|----------| | Join fails with signature error | Verify signature generation, check sdkKey format | | "passWord" typo | Client View uses passWord (capital W), Component View uses password | | No HD video | Enable SharedArrayBuffer headers, check browser support | | Callbacks not firing | Ensure inMeetingServiceListener called after init success | | Virtual background not working | Requires SharedArrayBuffer + Chrome/Edge | | Screen share fails on Safari | Safari 17+ with macOS 14+ required for client view |

Complete troubleshooting: troubleshooting/common-issues.md

Browser Support Matrix

| Feature | Chrome | Firefox | Safari | Edge | iOS | Android | |---------|--------|---------|--------|------|-----|---------| | 720p (receive) | Yes | Yes | Yes | Yes | Yes | Yes | | 720p (send) | Yes* | Yes* | Yes* | Yes* | Yes* | Yes* | | Virtual background | Yes | Yes | No | Yes | No | No | | Screen share (send) | Yes | Yes | Safari 17+ | Yes | No | No | | Gallery view | Yes | Yes | Yes** | Yes | Yes | Yes |

*Requires SharedArrayBuffer **Safari 17+ with macOS Sonoma

See concepts/browser-support.md for complete matrix.

Authorization Requirements (2026 Update)

IMPORTANT: Beginning March 2, 2026, apps joining meetings outside their account must be authorized.

Options

1. App Privilege Token (OBF) - Recommended for bots

   ZoomMtg.join({
     ...
     obfToken: 'your-app-privilege-token'
   });
   

2. ZAK Token - For host operations

   ZoomMtg.join({
     ...
     zak: 'host-zak-token'
   });
   

Zoom for Government (ZFG)

Option 1: ZFG-specific NPM Package

{
  "dependencies": {
    "@zoom/meetingsdk": "3.11.2-zfg"
  }
}

Option 2: Configure ZFG Endpoints

Client View:

ZoomMtg.setZoomJSLib('https://source.zoomgov.com/{VERSION}/lib', '/av');
ZoomMtg.init({
  webEndpoint: 'www.zoomgov.com',
  ...
});

Component View:

await client.init({
  webEndpoint: 'www.zoomgov.com',
  assetPath: 'https://source.zoomgov.com/{VERSION}/lib/av',
  ...
});

China CDN

// Set before preLoadWasm()
ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/{VERSION}/lib', '/av');

React Integration

Official Pattern (from zoom/meetingsdk-react-sample)

The official React sample uses imperative initialization rather than React hooks:

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

// Preload at module level (outside component)
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

function App() {
  const authEndpoint = import.meta.env.VITE_AUTH_ENDPOINT;
  const meetingNumber = '';
  const passWord = '';
  const role = 0;
  const userName = 'React User';

  const getSignature = async () => {
    const response = await fetch(authEndpoint, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        meetingNumber,
        role,
      }),
    });
    const data = await response.json();
    startMeeting(data.signature);
  };

  const startMeeting = (signature: string) => {
    document.getElementById('zmmtg-root')!.style.display = 'block';

    ZoomMtg.init({
      leaveUrl: window.location.origin,
      patchJsMedia: true,
      leaveOnPageUnload: true,
      success: () => {
        ZoomMtg.join({
          signature,
          meetingNumber,
          userName,
          passWord,
          success: (res) => console.log('Joined:', res),
          error: (err) => console.error('Join error:', err),
        });
      },
      error: (err) => console.error('Init error:', err),
    });
  };

  return (
    <button onClick={getSignature}>Join Meeting</button>
  );
}

React Gotchas (from official samples)

| Issue | Problem | Solution | |-------|---------|----------| | Client Recreation | createClient() in component body runs every render | Use useRef to persist client | | No useEffect | Official sample doesn't use React lifecycle hooks | SDK's leaveOnPageUnload handles cleanup | | Direct DOM | Sample uses getElementById | Use useRef<HTMLDivElement> in production | | No Error State | Silent failures | Add useState for error handling | | Module-Scope Side Effects | preLoadWasm() at top level | May cause issues with SSR |

Production-Ready React Pattern

import { useEffect, useRef, useState, useCallback } from 'react';
import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';

type ZoomClient = ReturnType<typeof ZoomMtgEmbedded.createClient>;

function ZoomMeeting({ meetingNumber, password, userName }: Props) {
  const clientRef = useRef<ZoomClient | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isJoining, setIsJoining] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Create client once
  useEffect(() => {
    if (!clientRef.current) {
      clientRef.current = ZoomMtgEmbedded.createClient();
    }
  }, []);

  const joinMeeting = useCallback(async () => {
    if (!clientRef.current || !containerRef.current) return;
    
    setIsJoining(true);
    setError(null);

    try {
      // Get signature from your backend
      const response = await fetch('/api/signature', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ meetingNumber, role: 0 }),
      });
      const { signature, sdkKey } = await response.json();
      
      await clientRef.current.init({
        zoomAppRoot: containerRef.current,
        language: 'en-US',
        patchJsMedia: true,
        leaveOnPageUnload: true,
      });

      await clientRef.current.join({
        signature,
        sdkKey,
        meetingNumber,
        password,
        userName,
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to join');
    } finally {
      setIsJoining(false);
    }
  }, [meetingNumber, password, userName]);

  return (
    <div>
      <div ref={containerRef} style={{ width: '100%', height: '500px' }} />
      <button onClick={joinMeeting} disabled={isJoining}>
        {isJoining ? 'Joining...' : 'Join Meeting'}
      </button>
      {error && <div className="error">{error}</div>}
    </div>
  );
}

Environment Variables (Vite)

# .env.local
VITE_AUTH_ENDPOINT=http://YOUR_AUTH_SERVER_HOST:4000
VITE_SDK_KEY=your_sdk_key

const authEndpoint = import.meta.env.VITE_AUTH_ENDPOINT;
const sdkKey = import.meta.env.VITE_SDK_KEY;

Detailed References

Core Documentation

• SKILL.md - Complete navigation guide
• client-view/SKILL.md - Full Client View reference
• component-view/SKILL.md - Full Component View reference

Concepts

• concepts/sharedarraybuffer.md - HD video requirements
• concepts/browser-support.md - Feature matrix by browser

Troubleshooting

• troubleshooting/error-codes.md - All SDK error codes
• troubleshooting/common-issues.md - Quick diagnostics

Examples

• client-view/SKILL.md - Complete Client View guide
• component-view/SKILL.md - Component View React integration

Helper Utilities

Extract Meeting Number from Invite Link

// Users can paste full Zoom invite links
document.getElementById('meeting_number').addEventListener('input', (e) => {
  // Extract meeting number (9-11 digits)
  let meetingNumber = e.target.value.replace(/([^0-9])+/i, '');
  if (meetingNumber.match(/([0-9]{9,11})/)) {
    meetingNumber = meetingNumber.match(/([0-9]{9,11})/)[1];
  }
  
  // Auto-extract password from invite link
  const pwdMatch = e.target.value.match(/pwd=([\d,\w]+)/);
  if (pwdMatch) {
    document.getElementById('password').value = pwdMatch[1];
  }
});

Dynamic Language Switching

// Change language at runtime
document.getElementById('language').addEventListener('change', (e) => {
  const lang = e.target.value;
  ZoomMtg.i18n.load(lang);
  ZoomMtg.i18n.reload(lang);
  ZoomMtg.reRender({ lang });
});

Check System Requirements

// Check browser compatibility before initializing
const requirements = ZoomMtg.checkSystemRequirements();
console.log('Browser info:', JSON.stringify(requirements));

if (!requirements.browserInfo.isChrome && !requirements.browserInfo.isFirefox) {
  alert('For best experience, use Chrome or Firefox');
}

Sample Repositories

| Repository | Description | |------------|-------------| | meetingsdk-web-sample | Official samples (Client View & Component View) | | meetingsdk-react-sample | React integration with TypeScript + Vite | | meetingsdk-web | SDK source with helper.html | | meetingsdk-auth-endpoint-sample | Signature generation backend |

Official Resources

• Official docs: https://developers.zoom.us/docs/meeting-sdk/web/
• Client View API Reference: https://marketplacefront.zoom.us/sdk/meeting/web/index.html
• Component View API Reference: https://marketplacefront.zoom.us/sdk/meeting/web/components/index.html
• Developer forum: https://devforum.zoom.us/

---

Documentation Version: Based on Zoom Web Meeting SDK v3.11+

Need help? Start with SKILL.md for complete navigation.

Merged from meeting-sdk/web/SKILL.md

Zoom Meeting SDK (Web) - Documentation Index

Quick navigation guide for all Web SDK documentation.

Start Here

| Document | Description | |----------|-------------| | SKILL.md | Main entry point - Quick starts for both Client View and Component View |

By View Type

Client View (Full-Page)

| Document | Description | |----------|-------------| | client-view/SKILL.md | Complete Client View reference |

Component View (Embeddable)

| Document | Description | |----------|-------------| | component-view/SKILL.md | Complete Component View reference |

Concepts

| Document | Description | |----------|-------------| | concepts/sharedarraybuffer.md | HD video requirements, COOP/COEP headers | | concepts/browser-support.md | Feature matrix by browser |

Examples

| Document | Description | |----------|-------------| | examples/client-view-basic.md | Basic Client View integration | | examples/component-view-react.md | React integration with Component View |

Troubleshooting

| Document | Description | |----------|-------------| | troubleshooting/error-codes.md | All SDK error codes (3000-10000 range) | | troubleshooting/common-issues.md | Quick diagnostics and fixes |

By Topic

Authentication

• SKILL.md#authentication-endpoint - Signature generation
• SKILL.md#authorization-requirements-2026-update - OBF tokens

HD Video & Performance

• concepts/sharedarraybuffer.md - Enable 720p/1080p

Events & Callbacks

• SKILL.md#event-listeners-client-view - Client View events
• SKILL.md#event-listeners-component-view - Component View events

Government (ZFG)

• SKILL.md#zoom-for-government-zfg - ZFG configuration

China CDN

• SKILL.md#china-cdn - China-specific CDN

Quick Reference

Client View vs Component View

| Aspect | Client View | Component View | |--------|-------------|----------------| | Object | ZoomMtg | ZoomMtgEmbedded.createClient() | | API Style | Callbacks | Promises | | Password param | passWord (capital W) | password (lowercase) | | Events | inMeetingServiceListener() | on()/off() |

Key Gotchas

1. Password spelling differs between views!

   • Client View: passWord (capital W)
   • Component View: password (lowercase)

2. SharedArrayBuffer required for HD features

   • 720p/1080p video
   • Gallery view (25 videos)
   • Virtual backgrounds

3. March 2026 Authorization Change

   • Apps joining external meetings need OBF or ZAK tokens

External Resources

• Official docs: https://developers.zoom.us/docs/meeting-sdk/web/
• Client View API: https://marketplacefront.zoom.us/sdk/meeting/web/index.html
• Component View API: https://marketplacefront.zoom.us/sdk/meeting/web/components/index.html
• GitHub samples: https://github.com/zoom/meetingsdk-web-sample

Operations

• RUNBOOK.md - 5-minute preflight and debugging checklist.