jpskill.com
💼 ビジネス コミュニティ

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.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
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
🪟 Windows (PowerShell)
$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. 1. 下の青いボタンを押して build-zoom-meeting-sdk-app.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → build-zoom-meeting-sdk-app フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

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)

詳細な参照

プラットフォームガイド

📜 原文 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_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

Features

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

Environment Variables

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。