build-zoom-meeting-sdk-app
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.
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o build-zoom-meeting-sdk-app.zip https://jpskill.com/download/22683.zip && unzip -o build-zoom-meeting-sdk-app.zip && rm build-zoom-meeting-sdk-app.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/22683.zip -OutFile "$d\build-zoom-meeting-sdk-app.zip"; Expand-Archive "$d\build-zoom-meeting-sdk-app.zip" -DestinationPath $d -Force; ri "$d\build-zoom-meeting-sdk-app.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
build-zoom-meeting-sdk-app.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
build-zoom-meeting-sdk-appフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 16
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
/build-zoom-meeting-sdk-app
ウェブ、モバイル、デスクトップ、および Linux ボット環境における埋め込み型 Zoom ミーティングの背景参照です。まず build-zoom-meeting-app または build-zoom-bot を優先し、その後プラットフォームの詳細についてはこちらにルーティングしてください。
Zoom Meeting SDK
ウェブ、モバイル、デスクトップ、およびヘッドレス統合に、完全な Zoom ミーティング体験を埋め込みます。
ハードルーティングのガードレール(最初に読んでください)
- ユーザーがアプリ UI 内にミーティングを埋め込んだり参加したりすることを要求した場合、Meeting SDK の実装にルーティングしてください。
- ユーザーが明示的にミーティングリソース管理またはブラウザの
join_urlリンクを要求しない限り、REST のみのミーティングリンクフローに切り替えないでください。 - Meeting SDK の参加パスには、SDK 署名 + SDK 参加呼び出しが必要です。REST の
join_urlは Meeting SDK の参加ペイロードではありません。
前提条件
- Meeting SDK 認証情報を持つ Zoom アプリ
- Marketplace からの SDK Key と Secret
- プラットフォーム固有の開発環境(Web、Android、iOS、macOS、Unreal、Electron、Linux、または Windows)
OAuth または署名でお困りですか? 認証フローについては、zoom-oauth スキルを参照してください。
ウェブで参加前の診断が必要ですか? Meeting SDK の初期化/参加前に probe-sdk を使用して、準備が不十分なデバイス/ネットワークをゲートしてください。
迅速なトラブルシューティングを開始してください。 詳細なデバッグの前に、5-Minute Runbook を使用してください。
クイックスタート(Web - 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>
重要な注意事項(Web)
1. CDN と npm - API が異なります!
| 配布 | グローバルオブジェクト | ビュータイプ | APIスタイル |
|---|---|---|---|
CDN (zoom-meeting-{ver}.min.js) |
ZoomMtg |
クライアントビュー(全ページ) | コールバック |
npm (@zoom/meetingsdk) |
ZoomMtgEmbedded |
コンポーネントビュー(埋め込み可能) | Promise |
2. 本番環境にはバックエンドが必要です
クライアントコードで SDK Secret を公開しないでください。 署名はサーバー側で生成してください。
// 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 の競合 - グローバルリセットを避ける
グローバルな * { margin: 0; } は Zoom の UI を壊します。スタイルをスコープしてください。
/* BAD */
* { margin: 0; padding: 0; }
/* GOOD */
.your-app, .your-app * { box-sizing: border-box; }
4. クライアントビューのツールバーのトリミング修正
ツールバーが画面から外れる場合は、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. ミーティング開始時にアプリを非表示にする
クライアントビューは全ページを占有します。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 オプション(Web)
Meeting SDK はカスタマイズオプション付きの Zoom UI を提供します。
| ビュー | 説明 |
|---|---|
| コンポーネントビュー | 抽出可能でカスタマイズ可能な UI - div 内にミーティングを埋め込む |
| クライアントビュー | 全ページ表示の Zoom UI エクスペリエンス |
注: Video SDK が UI をゼロから構築するのとは異なり、Meeting SDK は Zoom の UI をベースとして、その上にカスタマイズを施します。
主要な概念
| 概念 | 説明 |
|---|---|
| SDK Key/Secret | Marketplace からの認証情報 |
| Signature | SDK Secret で署名された JWT |
| Component View | 抽出可能でカスタマイズ可能な UI (Web) |
| Client View | 全ページ表示の Zoom UI (Web) |
詳細な参照
プラットフォームガイド
- android/SKILL.md - Android SDK(デフォルト/カスタム UI、参加/開始/認証ライフサイクル、モバイル統合)
- android/references/android-reference-map.md - Android API サーフェスマップとドリフト監視ポイント
- ios/SKILL.md - iOS SDK(デフォルト/カスタム UI、参加/開始/認証ライフサイクル、モバイル統合)
- ios/references/ios-reference-map.md -
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
/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_urllinks. - Meeting SDK join path requires SDK signature + SDK join call; REST
join_urlis 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
.envkeys and where to find each value.
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (11,215 bytes)
- 📎 references/ai-companion.md (6,582 bytes)
- 📎 references/android.md (754 bytes)
- 📎 references/authorization.md (2,381 bytes)
- 📎 references/bot-authentication.md (10,724 bytes)
- 📎 references/breakout-rooms.md (12,132 bytes)
- 📎 references/environment-variables.md (1,448 bytes)
- 📎 references/forum-top-questions.md (3,985 bytes)
- 📎 references/ios.md (919 bytes)
- 📎 references/macos.md (599 bytes)
- 📎 references/multiple-meetings.md (965 bytes)
- 📎 references/signature-playbook.md (1,427 bytes)
- 📎 references/triage-intake.md (1,925 bytes)
- 📎 references/troubleshooting.md (4,217 bytes)
- 📎 references/unreal.md (732 bytes)
- 📎 references/webinars.md (8,059 bytes)