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: ```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', 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) ```javascript 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!** ```bash # 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](#authorization-requirements-2026-update). ## 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 ```javascript 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