build-zoom-meeting-sdk-app

Name: build-zoom-meeting-sdk-app
Author: anthropics

github.com/anthropicsDevelopment33.6k2.1k installsUpdated 1d ago

About build-zoom-meeting-sdk-app

A reference skill for embedding Zoom meetings with the Meeting SDK across supported client and headless environments. It covers platform-specific setup, SDK signatures, join flows, UI options, and troubleshooting.

Key features

01Platform-specific SDK guidance
02Server-side signature generation
03Web Component and Client Views
04Join and authorization references
05Troubleshooting and sample links

Use cases

01Embedding Zoom meetings in an app interface
02Building a web meeting flow with SDK signatures
03Developing a headless Linux meeting bot

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/anthropics/knowledge-work-plugins --skill build-zoom-meeting-sdk-app

After installing, type/build-zoom-meeting-sdk-appin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

android/

android.md

RUNBOOK.md

android/concepts/

architecture.md

lifecycle-workflow.md

android/examples/

join-start-pattern.md

android/references/

android-reference-map.md

environment-variables.md

versioning-and-compatibility.md

android/scenarios/

high-level-scenarios.md

android/troubleshooting/

common-issues.md

electron/

RUNBOOK.md

electron/concepts/

high-level-scenarios.md

lifecycle-workflow.md

sdk-architecture-pattern.md

electron/examples/

authentication-pattern.md

join-meeting-pattern.md

raw-data-pattern.md

setup-guide.md

electron/references/

electron-reference.md

module-map.md

electron/troubleshooting/

common-issues.md

deprecated-and-contradictions.md

version-drift.md

ios/

ios.md

ios/concepts/

architecture.md

lifecycle-workflow.md

ios/examples/

join-start-pattern.md

ios/references/

environment-variables.md

ios-reference-map.md

versioning-and-compatibility.md

Details

From the project README

/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 skill for authentication flows.

Need pre-join diagnostics on web? Use probe-sdk before Meeting SDK init/join to gate low-readiness devices/networks.

Start troubleshooting fast: Use the 5-Minute Runbook before deep debugging.

Quick Start (Web - Client View via CDN)

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

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

View	Description
Component View	Extractable, customizable UI - embed meeting in a div
Client View	Full-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

Concept	Description
SDK Key/Secret	Credentials from Marketplace
Signature	JWT signed with SDK Secret
Component View	Extractable, customizable UI (Web)
Client View	Full-page Zoom UI (Web)

Detailed References

Platform Guides

android/SKILL.md - Android SDK (default/custom UI, join/start/auth lifecycle, mobile integration)
android/references/android-reference-map.md - Android API surface map and drift watchpoints
ios/SKILL.md - iOS SDK (default/custom UI, join/start/auth lifecycle, mobile integration)
ios/references/ios-reference-map.md - iOS API surface map and drift watchpoints
macos/SKILL.md - macOS SDK (desktop default/custom UI, service controllers, host flows)
macos/references/macos-reference-map.md - macOS API surface map and drift watchpoints
unreal/SKILL.md - Unreal Engine wrapper (C++/Blueprint wrapper behavior and SDK mapping)
unreal/references/unreal-reference-map.md - Unreal wrapper reference map and version-lag notes
references/android.md - Android pointer doc for fast routing from broad Meeting SDK queries
references/ios.md - iOS pointer doc for fast routing from broad Meeting SDK queries
references/macos.md - macOS pointer doc for fast routing from broad Meeting SDK queries
references/unreal.md - Unreal pointer doc for fast routing from broad Meeting SDK queries
linux/SKILL.md - Linux SDK headless bot skill entrypoint
linux/linux.md - Linux SDK (C++ headless bots, raw media access)
linux/references/linux-reference.md - Linux dependencies, Docker, troubleshooting
react-native/SKILL.md - React Native SDK (iOS/Android wrapper, join/start flows, bridge setup)
react-native/SKILL.md - React Native complete navigation
electron/SKILL.md - Electron SDK (desktop wrapper, auth/join flows, module controllers, raw data)
electron/SKILL.md - Electron complete navigation
windows/SKILL.md - Windows SDK (C++ desktop applications, raw media access)
windows/references/windows-reference.md - Windows dependencies, Visual Studio setup, troubleshooting
web/references/web.md - Web SDK (Component + Client View)
web/references/web-tracking-id.md - Tracking ID configuration

Features

references/authorization.md - SDK JWT generation
references/bot-authentication.md - ZAK vs OBF vs JWT tokens for bots
references/breakout-rooms.md - Programmatic breakout room management
references/ai-companion.md - AI Companion controls in meetings
references/webinars.md - Webinar SDK features
references/forum-top-questions.md - Common forum question patterns (what to cover)
references/triage-intake.md - What to ask first (turn vague reports into answers)
references/signature-playbook.md - Signature/root-cause playbook
references/multiple-meetings.md - Joining multiple meetings / multiple instances
references/troubleshooting.md - Common issues and solutions

Sample Repositories

Official (by Zoom)

Type	Repository	Stars
Linux Headless	meetingsdk-headless-linux-sample	4
Linux Raw Data	meetingsdk-linux-raw-recording-sample	0
Web	meetingsdk-web-sample	643
Web NPM	meetingsdk-web	324
React	meetingsdk-react-sample	177
Auth	meetingsdk-auth-endpoint-sample	124
Angular	meetingsdk-angular-sample	60
Vue.js	meetingsdk-vuejs-sample	42

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

Resources

Official docs: https://developers.zoom.us/docs/meeting-sdk/
Developer forum: https://devforum.zoom.us/

Environment Variables

See references/environment-variables.md for standardized .env keys and where to find each value.

Comments

Markdown supported

Details

Author: anthropics
Repository: anthropics/knowledge-work-plugins
Category: Development
Installs: 2,085
GitHub stars: 33,644

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.