Build Zoom Meeting Sdk App

# /build-zoom-meeting-sdk-app

Background reference for embedded Zoom meetings across web, mobile, desktop, and Linux bot environments. Prefer `build-zoom-meeting-app` or `build-zoom-bot` first, then route here for platform detail.

# Zoom Meeting SDK

Embed the full Zoom meeting experience into web, mobile, desktop, and headless integrations.

## Hard Routing Guardrail (Read First)

- If the user asks to embed/join meetings inside their app UI, route to Meeting SDK implementation. - Do not switch to REST-only meeting link flow unless the user explicitly asks for meeting resource management or browser `join_url` links. - Meeting SDK join path requires SDK signature + SDK join call; REST `join_url` is not a Meeting SDK join payload.

## Prerequisites

- Zoom app with Meeting SDK credentials - SDK Key and Secret from Marketplace - Platform-specific development environment (Web, Android, iOS, macOS, Unreal, Electron, Linux, or Windows)

> **Need help with OAuth or signatures?** See the **[zoom-oauth](../oauth/SKILL.md)** skill for authentication flows.

> **Need pre-join diagnostics on web?** Use **[probe-sdk](../probe-sdk/SKILL.md)** before Meeting SDK init/join to gate low-readiness devices/networks.

> **Start troubleshooting fast:** Use the **[5-Minute Runbook](RUNBOOK.md)** before deep debugging.

## Quick Start (Web - Client View via CDN)

```html <script src="https://source.zoom.us/3.1.6/lib/vendor/react.min.js"></script> <script src="https://source.zoom.us/3.1.6/lib/vendor/react-dom.min.js"></script> <script src="https://source.zoom.us/3.1.6/lib/vendor/redux.min.js"></script> <script src="https://source.zoom.us/3.1.6/lib/vendor/redux-thunk.min.js"></script> <script src="https://source.zoom.us/3.1.6/lib/vendor/lodash.min.js"></script> <script src="https://source.zoom.us/3.1.6/zoom-meeting-3.1.6.min.js"></script>

<script> // CDN provides ZoomMtg (Client View - full page) // For ZoomMtgEmbedded (Component View), use npm instead

ZoomMtg.preLoadWasm(); ZoomMtg.prepareWebSDK();

ZoomMtg.init({ leaveUrl: window.location.href, patchJsMedia: true, disableCORP: !window.crossOriginIsolated, success: function() { ZoomMtg.join({ sdkKey: 'YOUR_SDK_KEY', signature: 'YOUR_SIGNATURE', // Generate server-side! meetingNumber: 'MEETING_NUMBER', userName: 'User Name', passWord: '', // Note: camelCase with capital W success: function(res) { console.log('Joined'); }, error: function(err) { console.error(err); } }); }, error: function(err) { console.error(err); } }); </script> ```

## Critical Notes (Web)

### 1. CDN vs npm - Different APIs!

| Distribution | Global Object | View Type | API Style | |--------------|---------------|-----------|-----------| | CDN (`zoom-meeting-{ver}.min.js`) | `ZoomMtg` | Client View (full-page) | Callbacks | | npm (`@zoom/meetingsdk`) | `ZoomMtgEmbedded` | Component View (embeddable) | Promises |

### 2. Backend Required for Production

**Never expose SDK Secret in client code.** Generate signatures server-side:

```javascript // server.js (Node.js example) const KJUR = require('jsrsasign');

app.post('/api/signature', (req, res) => { const { meetingNumber, role } = req.body; const iat = Math.floor(Date.now() / 1000) - 30; const exp = iat + 60 * 60 * 2; const header = { alg: 'HS256', typ: 'JWT' }; const payload = { sdkKey: process.env.ZOOM_SDK_KEY, mn: String(meetingNumber).replace(/\D/g, ''), role: parseInt(role, 10), iat, exp, tokenExp: exp }; const signature = KJUR.jws.JWS.sign('HS256', JSON.stringify(header), JSON.stringify(payload), process.env.ZOOM_SDK_SECRET ); res.json({ signature, sdkKey: process.env.ZOOM_SDK_KEY }); }); ```

### 3. CSS Conflicts - Avoid Global Resets

Global `* { margin: 0; }` breaks Zoom's UI. Scope your styles:

```css /* BAD */ * { margin: 0; padding: 0; }

/* GOOD */ .your-app, .your-app * { box-sizing: border-box; } ```

### 4. Client View Toolbar Cropping Fix

If toolbar falls off screen, scale down the Zoom UI:

```css #zmmtg-root { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; /* Critical for SPAs (React/Next/etc): ensure Zoom UI isn't behind your app shell/overlays. */ z-index: 9999 !important; transform: scale(0.95) !important; transform-origin: top center !important; } ```

### 5. Hide Your App When Meeting Starts

Client View takes over full page. Hide your UI:

```javascript // In ZoomMtg.init success callback: document.documentElement.classList.add('meeting-active'); document.body.classList.add('meeting-active'); ```

```css body.meeting-active .your-app { display: none !important; } body.meeting-active { background: #000 !important; } ```

## UI Options (Web)

Meeting SDK provides **Zoom's UI with customization options**:

| View | Description | |------|-------------| | **Component View** | Extract