build-zoom-meeting-sdk-app

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

github.com/anthropics開発33.6k2.1k 回インストール1 日前に更新

リポジトリ

build-zoom-meeting-sdk-app について

Meeting SDK で Zoom ミーティングをクライアント環境やヘッドレス環境に組み込むためのリファレンススキルです。プラットフォーム別の設定、SDK 署名、参加フロー、UI とトラブルシューティングを扱います。

主な機能

01プラットフォーム別 SDK ガイド
02サーバー側での署名生成
03Web の Component View と Client View
04参加と認証のリファレンス
05トラブルシューティングとサンプルリンク

活用シーン

01アプリの UI への Zoom ミーティングの埋め込み
02SDK 署名を使った Web 会議フローの構築
03ヘッドレス Linux ミーティングボットの開発

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/build-zoom-meeting-sdk-appを入力して読み込まれたか確認します。

同梱ファイル

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

詳細

/build-zoom-meeting-sdk-app

Web、モバイル、デスクトップ、Linux のボット環境における、Zoom ミーティングの埋め込みに関する背景情報です。まず build-zoom-meeting-app または build-zoom-bot を優先し、その後、プラットフォームの詳細を確認する場合はこちらを参照してください。

Zoom Meeting SDK

Web、モバイル、デスクトップ、ヘッドレスの各種連携に、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 スキルを参照してください。

Web で参加前の診断が必要ですか？ 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. ミーティング開始時にアプリを非表示にする

クライアントビューではページ全体が Zoom UI に置き換わります。アプリの 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 をページ全体に表示する体験

注： UI を一から構築する Video SDK とは異なり、Meeting SDK では Zoom の UI をベースにカスタマイズを加えます。

主な概念

概念	説明
SDK Key/Secret	Marketplace から取得する認証情報
署名	SDK Secret で署名された JWT
コンポーネントビュー	切り出し可能でカスタマイズ可能な UI（Web）
クライアントビュー	ページ全体に表示する 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 - iOS API の全体像と変更差分の確認ポイント
macos/SKILL.md - macOS SDK（デスクトップのデフォルト／カスタム UI、サービスコントローラー、ホストフロー）
macos/references/macos-reference-map.md - macOS API の全体像と変更差分の確認ポイント
unreal/SKILL.md - Unreal Engine ラッパー（C++／Blueprint ラッパーの動作と SDK とのマッピング）
unreal/references/unreal-reference-map.md - Unreal ラッパーのリファレンスマップとバージョンの遅れに関する注記
references/android.md - Meeting SDK に関する幅広いクエリから迅速に案内するための Android 参照ドキュメント
references/ios.md - Meeting SDK に関する幅広いクエリから迅速に案内するための iOS 参照ドキュメント
references/macos.md - Meeting SDK に関する幅広いクエリから迅速に案内するための macOS 参照ドキュメント
references/unreal.md - Meeting SDK に関する幅広いクエリから迅速に案内するための Unreal 参照ドキュメント
linux/SKILL.md - Linux SDK のヘッドレスボット向けスキルのエントリーポイント
linux/linux.md - Linux SDK（C++ ヘッドレスボット、未加工メディアへのアクセス）
linux/references/linux-reference.md - Linux の依存関係、Docker、トラブルシューティング
react-native/SKILL.md - React Native SDK（iOS／Android ラッパー、参加／開始フロー、ブリッジのセットアップ）
react-native/SKILL.md - React Native の完全なナビゲーション
electron/SKILL.md - Electron SDK（デスクトップラッパー、認証／参加フロー、モジュールコントローラー、生データ）
electron/SKILL.md - Electron の完全なナビゲーション
windows/SKILL.md - Windows SDK（C++ デスクトップアプリケーション、未加工メディアへのアクセス）
windows/references/windows-reference.md - Windows の依存関係、Visual Studio のセットアップ、トラブルシューティング
web/references/web.md - Web SDK（Component + Client View）
web/references/web-tracking-id.md - Tracking ID の設定

機能

references/authorization.md - SDK の JWT 生成
references/bot-authentication.md - ボット向け ZAK、OBF、JWT トークンの比較
references/breakout-rooms.md - ブレイクアウトルームのプログラムによる管理
references/ai-companion.md - ミーティングでの AI Companion の制御
references/webinars.md - ウェビナー SDK の機能
references/forum-top-questions.md - フォーラムでよくある質問のパターン（取り上げる内容）
references/triage-intake.md - 最初に確認すること（曖昧な報告から回答を導く）
references/signature-playbook.md - 署名／根本原因の調査手順
references/multiple-meetings.md - 複数のミーティングへの参加／複数インスタンス
references/troubleshooting.md - よくある問題と解決策

サンプルリポジトリ

公式（Zoom 提供）

種類	リポジトリ	スター数
Linux ヘッドレス	meetingsdk-headless-linux-sample	4
Linux 生データ	meetingsdk-linux-raw-recording-sample	0
Web	meetingsdk-web-sample	643
Web NPM	meetingsdk-web	324
React	meetingsdk-react-sample	177
認証	meetingsdk-auth-endpoint-sample	124
Angular	meetingsdk-angular-sample	60
Vue.js	meetingsdk-vuejs-sample	42

全リスト: general/references/community-repos.md をご覧ください。

リソース

公式ドキュメント: https://developers.zoom.us/docs/meeting-sdk/
開発者フォーラム: https://devforum.zoom.us/

環境変数

標準化された.envキーと各値の取得先については、references/environment-variables.md をご覧ください。

Markdown 対応

ログインしてコメント

基本情報

作者: anthropics
リポジトリ: anthropics/knowledge-work-plugins
カテゴリ: 開発
インストール数: 2,085
GitHub スター: 33,644

問題を報告