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).

Current Package Baseline

• Latest npm package verified on 2026-07-10: @zoom/meetingsdk@6.2.0.
• The package declares exact React and React DOM peer dependencies at 18.2.0; React 19 is not part of the published support contract. Isolate the SDK in a React 18 boundary if the surrounding application uses React 19.
• The 6.2.0 changelog notes restored Client View onUserJoin behavior, Phase 1 ultrasound signaling for same-device My Notes restrictions, retired AI Companion branding in Client View, and an optimized Component View join process.
• Use 5.1.4 or newer for WebRTC video to avoid compatibility problems with future Chrome versions.
• Meeting SDK Web is for human meeting participants. Do not use it for bots or AI notetakers; route live media and notetaker workloads to RTMS.

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:

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

Minimal implementation:

tsCopy code
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 } = 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,
    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 cross-origin isolation (SharedArrayBuffer) when HD/gallery is expected or join fails with RWC abort / 4004 symptoms

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. Cross-origin isolation / SharedArrayBuffer - concepts/sharedarraybuffer.md - Required for HD video, gallery view, virtual backgrounds; also a first check for RWC abort / 4004 join failures
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)
• JOIN_MEETING_FAILED 4004/50004, aborted RWC /wc/ping, or Gallery View Not Supported → Check cross-origin isolation first: run window.crossOriginIsolated, then see troubleshooting/common-issues.md
• HD video not working → Enable cross-origin isolation / SharedArrayBuffer headers
• Hosted sample looks unstyled or logs webpack-dev-server / localhost websocket errors → See troubleshooting/common-issues.md
• Complete navigation → SKILL.md

Prerequisites

• Zoom app with Meeting SDK credentials from Marketplace
• Meeting SDK Client ID and Client 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!

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)

bashCopy code
npm install @zoom/meetingsdk --save

CDN

htmlCopy code
<!-- 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 package version you validated, for example 6.2.0.

Quick Start (Client View)

javascriptCopy code
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)

javascriptCopy code
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
      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 Client Secret in frontend code!

bashCopy 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 Meeting SDK Client ID and Client Secret
npm install && npm run start

Signature Generation

The signature encodes:

• appKey set to the Meeting SDK Client ID
• 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

Copy code
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   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

javascriptCopy code
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

javascriptCopy code
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)

javascriptCopy code
// 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)

javascriptCopy code
// 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

javascriptCopy code
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

javascriptCopy code
await client.join({
  // Required
  signature: 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)

javascriptCopy code
// 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)

javascriptCopy code
// 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();

Cross-Origin Isolation / SharedArrayBuffer (Critical for HD and Some Join Paths)

SharedArrayBuffer enables advanced features:

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

When a browser console shows JOIN_MEETING_FAILED with error code 4004/log code 50004, aborted RWC /wc/ping requests, or repeated Gallery View Not Supported warnings, verify cross-origin isolation before chasing signatures or Zoom network endpoints:

javascriptCopy code
console.log('Cross-origin isolated:', window.crossOriginIsolated);

If this logs false, add COOP/COEP headers or use the coi-serviceworker fallback described in troubleshooting/common-issues.md.

Enable with HTTP Headers

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

Verify in Browser

javascriptCopy code
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:

javascriptCopy code
// 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:

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

Common Issues & Solutions

Complete troubleshooting: troubleshooting/common-issues.md

Browser Support Matrix

*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) - Authorizes eligible cross-account joins

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

2. ZAK Token - For host operations

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

Zoom for Government (ZFG)

Option 1: ZFG-specific NPM Package

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

Option 2: Configure ZFG Endpoints

Client View:

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

Component View:

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

China CDN

javascriptCopy code
// 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:

tsxCopy code
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)

Production-Ready React Pattern

tsxCopy code
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 } = await response.json();
      
      await clientRef.current.init({
        zoomAppRoot: containerRef.current,
        language: 'en-US',
        patchJsMedia: true,
        leaveOnPageUnload: true,
      });

      await clientRef.current.join({
        signature,
        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)

bashCopy code
# .env.local
VITE_AUTH_ENDPOINT=http://YOUR_AUTH_SERVER_HOST:4000

tsxCopy code
const authEndpoint = import.meta.env.VITE_AUTH_ENDPOINT;

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

javascriptCopy code
// 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

javascriptCopy code
// 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

javascriptCopy code
// 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

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: Checked against @zoom/meetingsdk@6.2.0 on 2026-07-10.

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

By View Type

Client View (Full-Page)

Component View (Embeddable)

Concepts

Examples

Troubleshooting

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

Key Gotchas

1. Password spelling differs between views!

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

2. Cross-origin isolation / SharedArrayBuffer is a first join diagnostic

   • If JOIN_MEETING_FAILED 4004/50004, aborted RWC /wc/ping, or gallery/SAB warnings appear, check window.crossOriginIsolated first
   • 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.