mcpField
B
build-zoom-video-sdk-app

build-zoom-video-sdk-app

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

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

Zoom Video SDKで独自のビデオ体験を構築する開発者向けのリファレンススキルです。プラットフォーム別の実装、セッションのライフサイクル、映像表示、ストレージを扱い、Meeting SDKとの違いも説明します。

主な機能

  1. 01カスタムビデオセッションのガイド
  2. 02Web UI Toolkitと独自UI
  3. 03クロスプラットフォームSDK資料
  4. 04セッションのライフサイクルとイベント処理
  5. 05BYOS録画ストレージガイド

活用シーン

  1. 01ブランドに合わせたビデオセッション画面の計画
  2. 02Webやモバイルでのセッション参加とメディア表示の実装
  3. 03クラウド録画のAmazon S3への直接保存

インストール

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

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

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

android/
android.md
RUNBOOK.md
android/concepts/
architecture.md
lifecycle-workflow.md
android/examples/
session-join-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
flutter/
RUNBOOK.md
flutter/concepts/
high-level-scenarios.md
lifecycle-workflow.md
sdk-architecture-pattern.md
flutter/examples/
event-handling-pattern.md
session-join-pattern.md
setup-guide.md
flutter/references/
flutter-reference.md
module-map.md
official-sources.md
flutter/troubleshooting/
common-issues.md
deprecated-and-contradictions.md
version-drift.md
ios/
ios.md
ios/concepts/
architecture.md
lifecycle-workflow.md
ios/examples/
session-join-pattern.md
ios/references/
environment-variables.md
ios-reference-map.md
versioning-and-compatibility.md

詳細

/build-zoom-video-sdk-app

カスタムビデオセッション製品を完全に独自開発するための背景資料です。Meeting SDK と Video SDK のどちらを使うかまだ明確でない場合は、先に plan-zoom-product を使用してください。

Zoom のインフラストラクチャを活用して、カスタムビデオ体験を構築します。

厳格なルーティングガードレール（最初にお読みください）

  • カスタムのリアルタイムビデオアプリの動作（トピック／セッションへの参加、カスタムレンダリング、アタッチ／デタッチ）を求められた場合は、Video SDK に振り分けてください。
  • Video SDK の参加フローに REST ミーティングエンドポイントを使用しないでください。
  • Video SDK では、Meeting ID、join_url、Meeting SDK の参加ペイロードフィールド（meetingNumber、passWord）は使用しません。

Meeting SDK と Video SDK の比較

機能Meeting SDKVideo SDK
UIZoom のデフォルト UI またはカスタム UI完全なカスタム UI（自分で構築）
エクスペリエンスZoom ミーティングビデオセッション
ブランディングカスタマイズに制限ありブランディングを完全に制御
機能Zoom の全機能コアビデオ機能

UI オプション（Web）

Video SDK では、UI を完全に制御できます。

オプション説明
UI Toolkit事前構築済みの React コンポーネント（ローコード）
カスタム UISDK API を使って独自の UI を構築

前提条件

  • Marketplace で取得した Zoom Video SDK の認証情報
  • SDK Key と Secret
  • Web 開発環境

OAuth や署名についてサポートが必要ですか？ 認証フローについては、zoom-oauth スキルを参照してください。

Web で参加前の診断が必要ですか？ 最初の 1 分間に発生する障害を減らすため、Video SDK の join() の前に probe-sdk を使用してください。

すばやくトラブルシューティングを開始： 詳細なデバッグに入る前に、5 分間のランブック を使用してください。

クイックスタート（Web）

NPM の使用（Vite／Webpack などのバンドラー）
import ZoomVideo from '@zoom/videosdk';

const client = ZoomVideo.createClient();
await client.init('en-US', 'Global', { patchJsMedia: true });
await client.join(topic, signature, userName, password);

// IMPORTANT: getMediaStream() ONLY works AFTER join()
const stream = client.getMediaStream();
await stream.startVideo();
await stream.startAudio();
CDN の使用（バンドラーなし）

警告：広告ブロッカーは source.zoom.us をブロックします。問題を避けるには、SDK をセルフホストしてください。

# Download SDK locally
curl "https://source.zoom.us/videosdk/zoom-video-1.12.0.min.js" -o js/zoom-video-sdk.min.js

<script src="js/zoom-video-sdk.min.js"></script>

// CDN exports as WebVideoSDK, NOT ZoomVideo
// Must use .default property
const ZoomVideo = WebVideoSDK.default;
const client = ZoomVideo.createClient();

await client.init('en-US', 'Global', { patchJsMedia: true });
await client.join(topic, signature, userName, password);

// IMPORTANT: getMediaStream() ONLY works AFTER join()
const stream = client.getMediaStream();
await stream.startVideo();
await stream.startAudio();
CDN を使った ES Module（競合状態の修正）

CDN と <script type="module"> を使用する場合、SDK がまだ読み込まれていないことがあります。

// Wait for SDK to load before using
function waitForSDK(timeout = 10000) {
  return new Promise((resolve, reject) => {
    if (typeof WebVideoSDK !== 'undefined') {
      resolve();
      return;
    }
    const start = Date.now();
    const check = setInterval(() => {
      if (typeof WebVideoSDK !== 'undefined') {
        clearInterval(check);
        resolve();
      } else if (Date.now() - start > timeout) {
        clearInterval(check);
        reject(new Error('SDK failed to load'));
      }
    }, 100);
  });
}

// Usage
await waitForSDK();
const ZoomVideo = WebVideoSDK.default;
const client = ZoomVideo.createClient();

SDK のライフサイクル（順序が非常に重要）

SDK には厳密なライフサイクルがあります。順序に違反すると、エラーが表示されないまま失敗します。

1. Create client:     client = ZoomVideo.createClient()
2. Initialize:        await client.init('en-US', 'Global', options)
3. Join session:      await client.join(topic, signature, userName, password)
4. Get stream:        stream = client.getMediaStream()  ← ONLY AFTER JOIN
5. Start media:       await stream.startVideo() / await stream.startAudio()

よくある間違い（エラーが表示されない失敗）：

// ❌ WRONG: Getting stream before joining
const client = ZoomVideo.createClient();
await client.init('en-US', 'Global');
const stream = client.getMediaStream();  // Returns undefined!
await client.join(...);

// ✅ CORRECT: Get stream after joining
const client = ZoomVideo.createClient();
await client.init('en-US', 'Global');
await client.join(...);
const stream = client.getMediaStream();  // Works!

ビデオのレンダリング（イベント駆動型）

SDK はイベント駆動型です。 イベントをリッスンし、それに応じてビデオをレンダリングする必要があります。

renderVideo() ではなく attachVideo() を使用
import { VideoQuality } from '@zoom/videosdk';

// Start your camera
await stream.startVideo();

// Attach video - returns element to append to DOM
const element = await stream.attachVideo(userId, VideoQuality.Video_360P);
container.appendChild(element);

// Detach when done
await stream.detachVideo(userId);
必須イベント
// When other participant's video turns on/off
client.on('peer-video-state-change', async (payload) => {
  const { action, userId } = payload;
  if (action === 'Start') {
    const el = await stream.attachVideo(userId, VideoQuality.Video_360P);
    container.appendChild(el);
  } else {
    await stream.detachVideo(userId);
  }
});

// When participants join/leave
client.on('user-added', (payload) => { /* check bVideoOn */ });
client.on('user-removed', (payload) => { stream.detachVideo(payload.userId); });

イベント処理のパターンについて詳しくは、web/references/web.md を参照してください。

主な概念

概念説明
セッションビデオセッション（ミーティングではありません）
トピックセッション識別子（任意の文字列を指定）
署名認証用 JWT
MediaStream音声／ビデオストリームの制御

セッション作成モデル

重要： Video SDK のセッションは、事前ではなく必要な時点で作成されます。

項目Video SDKMeeting SDK
事前作成不要先に API でミーティングを作成
セッション開始最初の参加者がトピックを指定して参加既存の Meeting ID に参加
トピック任意の文字列（自分で定義）API から取得した Meeting ID
スケジュール設定該当なし — セッションは随時開催ミーティングはスケジュール設定可能
セッションの仕組み
  1. 事前作成は不要： 誰かが参加するまでセッションは存在しません
  2. トピック ＝ セッション ID： 同じ topic 文字列を指定して参加する参加者は、同じセッションに参加します
  3. 最初の参加で作成： 最初の参加者が参加した時点でセッションが作成されます
  4. Meeting ID はありません： Zoom Meetings のような数値の Meeting ID はありません
// Session is created on-the-fly when first user joins
// Any string can be the topic - it becomes the session identifier
await client.join('my-custom-session-123', signature, 'User Name');

// Other participants join the SAME session by using the SAME topic
await client.join('my-custom-session-123', signature, 'Another User');
署名エンドポイントの設定

署名エンドポイントには、CORS の問題なくフロントエンドからアクセスできる必要があります。

オプション 1：同一オリジンのプロキシ（推奨）

# Nginx config
location /api/ {
    proxy_pass http://YOUR_BACKEND_HOST:3005/api/;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
}

// Frontend uses relative URL (same origin)
const response = await fetch('/api/signature', { ... });

オプション 2：CORS の設定

// Express.js backend
const cors = require('cors');
app.use(cors({
  origin: ['https://your-domain.com'],
  credentials: true
}));

警告： 混在コンテンツ（HTTPS ページ → HTTP API）はブラウザーによってブロックされます。

ユースケース

ユースケース説明
Video SDK BYOS（ストレージの持ち込み）録画を S3 バケットに直接保存します

BYOS（ストレージの持ち込み）

Video SDK の機能です。Zoom がクラウド録画を 直接 Amazon S3 バケットに保存します。ダウンロードは不要です。

公式ドキュメント： https://developers.zoom.us/docs/build/storage/

前提条件：

  • Cloud Recording アドオン付きの Video SDK アカウント（Universal Credit に含まれています）
  • AWS S3 バケット

認証オプション：

  1. AWS Access Key - 設定が簡単です
  2. Cross Account Access - より安全です（IAM ロールの引き受け）

S3 パスの構造：

Buckets/{bucketName}/cmr/byos/{YYYY}/{MM}/{DD}/{GUID}/cmr_byos/

主なメリット：

  • ダウンロード時の帯域幅コストがゼロです
  • 録画中に直接ストレージへ保存します
  • 設定のみで導入できます（Webhook やダウンロード用コードは不要です）

設定場所： Developer Portal → Account Settings → General → Communications Content Storage Location

完全なセットアップガイドについては、../general/use-cases/video-sdk-bring-your-own-storage.md を参照してください。

詳細リファレンス

UI とコンポーネント
プラットフォームガイド

サンプルリポジトリ

公式（Zoom 提供）
種類リポジトリスター数
Webvideosdk-web-sample137
Web NPMvideosdk-web56
認証videosdk-auth-endpoint-sample23
UI Toolkit Webvideosdk-zoom-ui-toolkit-web17
UI Toolkit Reactvideosdk-zoom-ui-toolkit-react-sample17
Next.jsvideosdk-nextjs-quickstart16
遠隔医療VideoSDK-Web-Telehealth11
Linuxvideosdk-linux-raw-recording-sample-

全一覧： general/references/community-repos.md を参照してください。

リソース

環境変数

Linux の運用

  • linux/RUNBOOK.md - Linux プラットフォームの事前確認とデバッグのチェックリスト。

コメント

Markdown 対応