Labsco
anthropics logo

build-zoom-meeting-sdk-app

✓ Official★ 22,378

by anthropic · part of anthropics/knowledge-work-plugins

Reference skill for Zoom Meeting SDK. Use after routing to a meeting-embed workflow when implementing real Zoom meeting joins, platform-specific SDK behavior, auth and join flows, waiting room issues, or meeting bot patterns.

🔥🔥🔥✓ VerifiedFreeQuick setup
#automation#git
🧩 One of 7 skills in the anthropics/knowledge-work-plugins package — works on its own, and pairs well with its siblings.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

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

Critical Notes (Web)

1. CDN vs npm - Different APIs!

DistributionGlobal ObjectView TypeAPI Style
CDN (zoom-meeting-{ver}.min.js)ZoomMtgClient View (full-page)Callbacks
npm (@zoom/meetingsdk)ZoomMtgEmbeddedComponent View (embeddable)Promises

2. Backend Required for Production

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

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

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

#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:

// In ZoomMtg.init success callback:
document.documentElement.classList.add('meeting-active');
document.body.classList.add('meeting-active');
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:

ViewDescription
Component ViewExtractable, customizable UI - embed meeting in a div
Client ViewFull-page Zoom UI experience

Note: Unlike Video SDK where you build the UI from scratch, Meeting SDK uses Zoom's UI as the base with customization on top.

Key Concepts

ConceptDescription
SDK Key/SecretCredentials from Marketplace
SignatureJWT signed with SDK Secret
Component ViewExtractable, customizable UI (Web)
Client ViewFull-page Zoom UI (Web)

Detailed References

Platform Guides

Features

Sample Repositories

Official (by Zoom)

TypeRepositoryStars
Linux Headlessmeetingsdk-headless-linux-sample4
Linux Raw Datameetingsdk-linux-raw-recording-sample0
Webmeetingsdk-web-sample643
Web NPMmeetingsdk-web324
Reactmeetingsdk-react-sample177
Authmeetingsdk-auth-endpoint-sample124
Angularmeetingsdk-angular-sample60
Vue.jsmeetingsdk-vuejs-sample42

Full list: See general/references/community-repos.md

Resources

Environment Variables