zoom-cobrowse-sdk

Zoom Cobrowse SDK - Web Development

Zoom Cobrowse SDK を使ったウェブ上の共同閲覧に関する背景資料です。サポートのワークフローを把握したうえで、実装の詳細が必要な場合にご利用ください。

公式ドキュメント: https://developers.zoom.us/docs/cobrowse/
API リファレンス: https://marketplacefront.zoom.us/sdk/cobrowse/
クイックスタートリポジトリ: https://github.com/zoom/CobrowseSDK-Quickstart
認証エンドポイントのサンプル: https://github.com/zoom/cobrowsesdk-auth-endpoint-sample

クイックリンク

Cobrowse SDK を初めてお使いですか？次の順にお進みください。

1. はじめに - 認証情報の設定から最初のセッションまで、セットアップを完了します
2. セッションのライフサイクル - 顧客とエージェントのフローを理解します
3. JWT 認証 - トークンの生成とセキュリティについて説明します
4. 顧客側の統合 - SDK をウェブサイトに統合します
5. エージェント側の統合 - エージェントポータル（iframe または npm）を設定します

主要な概念:

• 2 つのロールのパターン - 顧客とエージェントのアーキテクチャ
• セッションのライフサイクル - PIN の生成、接続、再接続
• JWT 認証 - SDK Key と API Key、role_type、クレーム
• 配布方法 - CDN と npm（BYOP）

機能:

• 注釈ツール - 描画、ハイライト、ポインターツール
• プライバシーマスキング - エージェントから機密フィールドを非表示にします
• リモートアシスト - エージェントが顧客のページをスクロールできます
• 複数タブでのセッション維持 - タブ間でセッションを継続します
• BYOP モード - npm 統合で独自の PIN を使用します

トラブルシューティング:

• よくある問題 - 簡単な診断と解決方法
• エラーコード - エラーの完全なリファレンス
• CORS と CSP - クロスオリジンとセキュリティポリシーの設定
• ブラウザーの互換性 - 対応ブラウザーと制限事項
• 5 分間のランブック - 詳細なデバッグの前に行う、迅速な事前確認

リファレンス:

• API リファレンス - SDK のメソッドとイベントの完全な一覧
• 設定リファレンス - 初期化設定の一覧
• 統合インデックス - このファイルの下のセクションをご覧ください

SDK の概要

Zoom Cobrowse SDK は、次の機能を提供する JavaScript ライブラリです。

• リアルタイムの共同閲覧: エージェントが顧客のブラウザー操作をリアルタイムで確認できます
• PIN ベースのセッション: 顧客とエージェントの接続に、セキュリティ保護された 6 桁の PIN を使用します
• 注釈ツール: 描画、ハイライト、消えるペン、四角形、カラーピッカー
• プライバシーマスキング: CSS セレクターを使って機密性の高いフォームフィールドをマスキングします
• リモートアシスト: エージェントが顧客のページをスクロールできます（同意が必要です）
• 複数タブでのセッション維持: 顧客が新しいタブを開いてもセッションが継続します
• 自動再接続: ページの再読み込み後もセッションが復元されます（2 分間）
• セッションイベント: セッション状態の変更をリアルタイムで通知します
• HTTPS 必須: セキュアな接続が必要です（HTTP はループバックまたはローカル開発ホストでのみ動作します）
• プラグイン不要: JavaScript のみで動作し、ブラウザー拡張機能は必要ありません

2つのロールのアーキテクチャ

Cobrowse には異なる2つのロールがあり、それぞれ異なる統合方法を使用します。

ロール	role_type	統合方法	JWT 必須	目的
顧客	1	Web サイトへの統合（CDN または npm）	はい	ブラウザーセッションを共有するユーザー
エージェント	2	Iframe（CDN）または npm（BYOP のみ）	はい	顧客を閲覧・支援するサポートスタッフ

重要なポイント：顧客とエージェントでは統合方法が異なりますが、JWT 認証の方式は同じです。

まずはこちらをお読みください（重要）

顧客／エージェントのデモでは、顧客 SDK のイベント pincode_updated から取得する PIN のみを、ユーザーに表示する PIN として扱ってください。

• UI には、明確なラベルを付けた値を1つだけ表示してください（例：サポート PIN）。
• エージェントの参加には、同じ PIN を使用してください。
• バックエンドの開始前レコードにある仮の PIN／デバッグ用 PIN をユーザーに公開しないでください。

このルールを守らないと、エージェントデスクで Pincode is not found／コード 30308 が発生することがよくあります。

一般的な本番環境のフロー（最も一般的）

これは多くのチームが最初に実装するフローであり、通常ユーザーがデモに期待するものです。

1. 顧客が先にセッションを開始する（role_type=1）
   • バックエンドがセッションを作成／記録します
   • バックエンドが顧客用 JWT を返します
   • 顧客 SDK が起動し、PIN を受け取ります
2. エージェントが後から参加する（role_type=2）
   • エージェントが顧客の PIN を入力します
   • バックエンドが PIN とセッションの状態を検証します
   • バックエンドがエージェント用 JWT を返します
   • エージェントが Zoom ホストのデスク Iframe を開きます（または BYOP でカスタム npm エージェント UI を開きます）

デモに汎用の「セッション」ユーザーが1人いるだけでは、実際の Cobrowse 操作には不十分です。

前提条件

プラットフォーム要件

• 対応ブラウザー：

  • Chrome 80+ ✓
  • Firefox 78+ ✓
  • Safari 14+ ✓
  • Edge 80+ ✓
  • Internet Explorer ✗（非対応）

• ネットワーク要件：

  • HTTPS が必要です（HTTP はループバック／ローカル開発ホストでのみ動作します）
  • *.zoom.us へのクロスオリジンリクエストを許可してください
  • CSP ヘッダーで Zoom ドメインを許可する必要があります（CORS と CSP のガイドを参照）

• サードパーティ Cookie：

  • 再接続時のリフレッシュには、サードパーティ Cookie を有効にする必要があります
  • プライバシーモードでは一部の機能が制限される場合があります

Zoom アカウント要件

1. SDK Universal Credit を備えた Zoom Workplace アカウント
2. Zoom Marketplace で作成した Video SDK アプリ
3. アプリの Cobrowse タブにある Cobrowse SDK 認証情報

注：Cobrowse SDK はVideo SDK の機能であり、別製品ではありません。

認証情報の概要

Zoom Marketplace → Video SDK アプリ → Cobrowse タブから4つの認証情報を取得します。

認証情報	種類	用途	公開しても安全か
SDK Key	公開	CDN URL、JWT の app_key クレーム	✓ はい（クライアント側）
SDK Secret	秘密	JWT の署名	✗ いいえ（サーバー側のみ）
API Key	秘密	REST API 呼び出し（任意）	✗ いいえ（サーバー側のみ）
API Secret	秘密	REST API 呼び出し（任意）	✗ いいえ（サーバー側のみ）

重要：SDK Key は公開情報（CDN URL に埋め込まれます）ですが、SDK Secret をクライアント側に公開しては絶対にいけません。

クイックスタート

ステップ 1：SDK 認証情報を取得する

1. Zoom Marketplace にアクセスします
2. Video SDK アプリを開きます（または新規作成します）
3. Cobrowse タブに移動します
4. 認証情報をコピーします。
   • SDK Key
   • SDK Secret
   • API Key（任意）
   • API Secret（任意）

ステップ 2：トークンサーバーを設定する

JWT を生成するサーバー側エンドポイントをデプロイします。公式サンプルを使用してください。

git clone https://github.com/zoom/cobrowsesdk-auth-endpoint-sample.git
cd cobrowsesdk-auth-endpoint-sample
npm install

# Create .env file
cat > .env << EOF
ZOOM_SDK_KEY=your_sdk_key_here
ZOOM_SDK_SECRET=your_sdk_secret_here
PORT=4000
EOF

npm start

トークンエンドポイント：

// POST https://YOUR_TOKEN_SERVICE_BASE_URL
{
  "role": 1,           // 1 = customer, 2 = agent
  "userId": "user123",
  "userName": "John Doe"
}

// Response
{
  "token": "eyJhbGciOiJIUzI1NiIs..."
}

ステップ 3：顧客側の統合（CDN）

<!DOCTYPE html>
<html>
<head>
  <title>Customer - Cobrowse Demo</title>
  <script type="module">
    const ZOOM_SDK_KEY = 'YOUR_SDK_KEY';
    
    // Load SDK from CDN
    (function(r, a, b, f, c, d) {
      r[f] = r[f] || { init: function() { r.ZoomCobrowseSDKInitArgs = arguments }};
      var fragment = a.createDocumentFragment();
      function loadJs(url) {
        c = a.createElement(b);
        d = a.getElementsByTagName(b)[0];
        c["async"] = false;
        c.src = url;
        fragment.appendChild(c);
      }
      loadJs(`https://us01-zcb.zoom.us/static/resource/sdk/${ZOOM_SDK_KEY}/js/2.13.2`);
      d.parentNode.insertBefore(fragment, d);
    })(window, document, "script", "ZoomCobrowseSDK");
  </script>
</head>
<body>
  <h1>Customer Support</h1>
  <button id="cobrowse-btn" disabled>Loading...</button>
  
  
  <label>SSN: <input type="text" class="pii-mask" placeholder="XXX-XX-XXXX"></label>
  <label>Credit Card: <input type="text" class="pii-mask" placeholder="XXXX-XXXX-XXXX-XXXX"></label>
  
  <script type="module">
    let sessionRef = null;
    
    const settings = {
      allowAgentAnnotation: true,
      allowCustomerAnnotation: true,
      piiMask: {
        maskCssSelectors: ".pii-mask",
        maskType: "custom_input"
      }
    };
    
    ZoomCobrowseSDK.init(settings, function({ success, session, error }) {
      if (success) {
        sessionRef = session;
        
        // Listen for PIN code
        session.on("pincode_updated", (payload) => {
          console.log("PIN Code:", payload.pincode);
          // IMPORTANT: this is the PIN agent should use
          alert(`Share this PIN with agent: ${payload.pincode}`);
        });
        
        // Listen for session events
        session.on("session_started", () => console.log("Session started"));
        session.on("agent_joined", () => console.log("Agent joined"));
        session.on("agent_left", () => console.log("Agent left"));
        session.on("session_ended", () => console.log("Session ended"));
        
        document.getElementById("cobrowse-btn").disabled = false;
        document.getElementById("cobrowse-btn").innerText = "Start Cobrowse Session";
      } else {
        console.error("SDK init failed:", error);
      }
    });
    
    document.getElementById("cobrowse-btn").addEventListener("click", async () => {
      // Fetch JWT from your server
      const response = await fetch("https://YOUR_TOKEN_SERVICE_BASE_URL", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          role: 1,
          userId: "customer_" + Date.now(),
          userName: "Customer"
        })
      });
      const { token } = await response.json();
      
      // Start cobrowse session
      sessionRef.start({ sdkToken: token });
    });
  </script>
</body>
</html>

ステップ 4：エージェント側の統合（Iframe）

<!DOCTYPE html>
<html>
<head>
  <title>Agent Portal</title>
</head>
<body>
  <h1>Agent Portal</h1>
  <iframe 
    id="agent-iframe"
    width="1024" 
    height="768"
    allow="autoplay *; camera *; microphone *; display-capture *; geolocation *;"
  ></iframe>
  
  <script>
    async function connectAgent() {
      // Fetch JWT from your server
      const response = await fetch("https://YOUR_TOKEN_SERVICE_BASE_URL", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          role: 2,
          userId: "agent_" + Date.now(),
          userName: "Support Agent"
        })
      });
      const { token } = await response.json();
      
      // Load Zoom agent portal
      const iframe = document.getElementById("agent-iframe");
      iframe.src = `https://us01-zcb.zoom.us/sdkapi/zcb/frame-templates/desk?access_token=${token}`;
    }
    
    connectAgent();
  </script>
</body>
</html>

ステップ 5：連携をテストする

1. 別々のブラウザーを 2 つ開きます（または、シークレットウィンドウと通常のウィンドウを開きます）
2. 顧客のブラウザー：顧客ページを開き、「コブラウズセッションを開始」をクリックします
3. 顧客のブラウザー：表示された 6 桁の PIN を控えます
4. エージェントのブラウザー：エージェントページを開き、PIN コードを入力します
5. 両方のブラウザー：セッションが接続され、エージェントが顧客のページを確認できます
6. 機能をテスト：注釈、データマスキング、リモートアシスト

主な機能

1. 注釈ツール

顧客とエージェントの両方が、共有画面に描画できます。

const settings = {
  allowAgentAnnotation: true,      // Agent can draw
  allowCustomerAnnotation: true    // Customer can draw
};

利用可能なツール：

• ペン（残ります）
• 消えるペン（4 秒後に消えます）
• 長方形
• カラーピッカー
• 消しゴム
• 元に戻す／やり直し

2. プライバシーマスキング

CSS セレクターを使用して、機密フィールドをエージェントから隠します。

const settings = {
  piiMask: {
    maskType: "custom_input",           // Mask specific fields
    maskCssSelectors: ".pii-mask, #ssn", // CSS selectors
    maskHTMLAttributes: "data-sensitive=true" // HTML attributes
  }
};

マスキングの対応状況：

• テキストノード ✓
• フォーム入力 ✓
• セレクト要素 ✓
• 画像 ✗（未対応）
• リンク ✗（未対応）

3. リモートアシスト

エージェントは顧客のページをスクロールできます。

const settings = {
  remoteAssist: {
    enable: true,
    enableCustomerConsent: true,        // Customer must approve
    remoteAssistTypes: ['scroll_page'], // Only scroll supported
    requireStopConfirmation: false      // Confirmation when stopping
  }
};

4. 複数タブ間でのセッション維持

顧客が新しいタブを開いても、セッションは継続します。

const settings = {
  multiTabSessionPersistence: {
    enable: true,
    stateCookieKey: '$$ZCB_SESSION$$'  // Cookie key (base64 encoded)
  }
};

セッションのライフサイクル

顧客のフロー

1. SDK を読み込む → CDN スクリプトが ZoomCobrowseSDK を読み込みます
2. 初期化する → ZoomCobrowseSDK.init(settings, callback)
3. JWT を取得する → サーバーにトークンを要求します（role_type=1）
4. セッションを開始する → session.start({ sdkToken })
5. PIN が生成される → pincode_updated イベントが発生します
6. PIN を共有する → 顧客が 6 桁の PIN をエージェントに伝えます
7. エージェントが参加する → agent_joined イベントが発生します
8. セッションがアクティブになる → リアルタイム同期が始まります
9. セッションを終了する → session.end() を実行するか、エージェントが退出します

エージェントのフロー

1. JWT を取得する → サーバーにトークンを要求します（role_type=2）
2. iframe を読み込む → Zoom のエージェントポータルをトークンとともに指定します
3. PIN を入力する → エージェントが顧客の 6 桁の PIN を入力します
4. 接続する → session_joined イベントが発生します
5. セッションを表示する → エージェントに顧客のブラウザーが表示されます
6. ツールを使用する → 注釈、リモートアシスト、ズーム
7. セッションから退出する → 「コブラウズを終了」ボタンをクリックします

セッションの復旧（自動再接続）

顧客がページを更新した場合：

ZoomCobrowseSDK.init(settings, function({ success, session, error }) {
  if (success) {
    const sessionInfo = session.getSessionInfo();
    
    // Check if session is recoverable
    if (sessionInfo.sessionStatus === 'session_recoverable') {
      session.join();  // Auto-rejoin previous session
    } else {
      // Start new session
      session.start({ sdkToken });
    }
  }
});

復旧可能時間：2 分です。2 分を過ぎると、セッションは終了します。

重要な注意点とベストプラクティス

⚠️ 重要：SDK Secret は必ずサーバー側に置いてください

問題：開発者が SDK Secret を誤ってフロントエンドのコードに埋め込んでしまうことがあります。

解決方法：

• ✓ SDK Key → 公開しても安全です（CDN URL に埋め込まれています）
• ✗ SDK Secret → 絶対に公開しないでください（サーバー側での JWT 署名に使用します）

// ❌ WRONG - Secret exposed in frontend
const jwt = signJWT(payload, 'YOUR_SDK_SECRET');  // Security risk!

// ✅ CORRECT - Secret stays on server
const response = await fetch('/api/token', {
  method: 'POST',
  body: JSON.stringify({ role: 1, userId, userName })
});
const { token } = await response.json();

SDK Key と API Key（用途が異なります！）

認証情報	用途	JWT クレーム
SDK Key	CDN URL、JWT app_key	app_key: "SDK_KEY"
API Key	REST API 呼び出し（任意）	JWT では使用しません

よくある間違い：JWT の app_key クレームで、SDK Key の代わりに API Key を使用すること。

セッションの制限

制限	値	発生する内容
セッションあたりの顧客数	1	エラー 1012：SESSION_CUSTOMER_COUNT_LIMIT
セッションあたりのエージェント数	5	エラー 1013：SESSION_AGENT_COUNT_LIMIT
ブラウザーあたりのアクティブセッション数	1	エラー 1004：SESSION_COUNT_LIMIT
PIN コードの長さ	最大 10 文字	エラー 1008：SESSION_PIN_INVALID_FORMAT

セッションのタイムアウト動作

イベント	タイムアウト	発生する内容
エージェントが顧客を待機中	3 分	セッションが自動的に終了します
ページ更新後の再接続	2 分	再接続されない場合、セッションが終了します
再接続の試行回数	最大 2 回	2 回失敗すると、セッションが終了します

HTTPS の要件

問題：HTTP サイトでは SDK が読み込まれません。

解決方法：

• 本番環境：HTTPS を使用します ✓
• 開発環境：ローカルの HTTP テストにはループバックホストを使用します ✓
• 開発環境：必要に応じて、信頼済み証明書または自己署名証明書を使用したローカル HTTPS エンドポイントを使用します ✓

サードパーティ Cookie が必要です

問題：再接続時にセッションを復元できません。

解決策：ブラウザーの設定でサードパーティ Cookie を有効にしてください。

影響するシナリオ：

• ブラウザーのプライバシーモード
• 「サイト越えトラッキングを防ぐ」が有効になっている Safari
• 「サードパーティ Cookie をブロック」が有効になっている Chrome

配布方法に関する混乱

方法	用途	エージェントとの統合	BYOP が必要
CDN	ほとんどの用途	Zoom ホストの iframe	いいえ（PIN を自動設定）
npm	カスタムエージェント UI、完全な制御	カスタム npm 統合	はい（必須）

重要なポイント：npm で統合する場合は、BYOP（Bring Your Own PIN）モードを必ず使用してください。

クロスオリジン iframe の処理

問題：クロスオリジン iframe では Cobrowse が機能しません。

解決策：クロスオリジン iframe に SDK スニペットを挿入してください：

<script>
const ZOOM_SDK_KEY = "YOUR_SDK_KEY_HERE";

(function(r,a,b,f,c,d){r[f]=r[f]||{init:function(){r.ZoomCobrowseSDKInitArgs=arguments}};
var fragment=a.createDocumentFragment();function loadJs(url) {c=a.createElement(b);d=a.getElementsByTagName(b)[0];c.async=false;c.src=url;fragment.appendChild(c);};
loadJs('https://us01-zcb.zoom.us/static/resource/sdk/${ZOOM_SDK_KEY}/js');d.parentNode.insertBefore(fragment,d);})(window,document,'script','ZoomCobrowseSDK');
</script>

同一オリジンの iframe：追加の設定は不要です。

既知の制限事項

同期の制限

同期されません：

• HTML5 Canvas 要素
• WebGL コンテンツ
• オーディオおよびビデオ要素
• Shadow DOM
• Canvas でレンダリングされた PDF
• Web Components

一部のみ同期されます：

• ドロップダウンボックス（選択された結果のみ）
• 日付ピッカー（選択された結果のみ）
• カラーピッカー（選択された結果のみ）

レンダリングの制限

• 高解像度の画像は圧縮される場合があります
• 画面サイズの違いにより、CSS メディアクエリーに差異が生じる場合があります
• クロスオリジン画像はレンダリングされない場合があります（CORS の制限）
• クロスオリジンフォントはレンダリングされない場合があります（CORS の制限）

マスキングの制限

対応しています：

• テキストノード ✓
• フォーム入力 ✓
• Select 要素 ✓

対応していません：

• <img> 要素 ✗
• リンク ✗

ドキュメントライブラリ全体

このスキルには、カテゴリ別に整理された包括的なガイドが含まれています：

基本概念

• 2 つのロールのパターン - 顧客とエージェントのアーキテクチャ
• セッションのライフサイクル - 開始から終了までの完全なフロー
• JWT 認証 - トークンの構造と署名
• 配布方法 - CDN と npm（BYOP）の比較

例

• 顧客側の統合 - 顧客側のセットアップ全体
• エージェント側の統合 - iframe および npm を使ったエージェントのセットアップ
• 注釈 - 描画ツールの設定
• プライバシーマスキング - フィールドをマスキングするパターン
• リモートアシスト - エージェントページの操作
• 複数タブ間の永続化 - タブ間のセッション
• BYOP カスタム PIN - カスタム PIN コード

リファレンス

• API リファレンス - SDK のすべてのメソッドとイベント
• 設定リファレンス - 初期化設定の一覧
• エラーコード - エラーの完全なリファレンス
• セッションイベント - すべてのイベントタイプ

トラブルシューティング

• よくある問題 - 簡易診断
• エラーコード - エラーコードのリファレンス
• CORS と CSP - クロスオリジンの設定
• ブラウザーの互換性 - ブラウザーのサポート状況

リソース

• 公式ドキュメント：https://developers.zoom.us/docs/cobrowse-sdk/
• API リファレンス：https://marketplacefront.zoom.us/sdk/cobrowse/
• クイックスタートリポジトリ：https://github.com/zoom/CobrowseSDK-Quickstart
• 認証エンドポイントのサンプル：https://github.com/zoom/cobrowsesdk-auth-endpoint-sample
• 開発者フォーラム：https://devforum.zoom.us/
• 開発者ブログ：https://developers.zoom.us/blog/?category=zoom-cobrowse-sdk

---

お困りですか？ 完全なナビゲーションについては、以下の「統合インデックス」セクションをご覧ください。

---

統合インデックス

このセクションは SKILL.md から移行されました。

Cobrowse SDK ドキュメント全体のナビゲーションガイドです。

はじめに（ここから始めましょう！）

Zoom Cobrowse SDK を初めて利用する場合は、次の学習パスに沿って進めてください。

1. SKILL.md - 全体概要とクイックスタート
2. 5-Minute Runbook - よくある失敗に備えた事前チェック
3. Get Started Guide - 認証情報から最初のセッションまでのセットアップ手順
4. Session Lifecycle - 顧客とエージェントの完全なフローを理解する
5. Customer Integration - SDK をウェブサイトに統合する
6. Agent Integration - エージェントポータルをセットアップする

コアコンセプト

理解しておく必要がある基本的なコンセプトです。

• Two Roles Pattern - 顧客（role_type=1）とエージェント（role_type=2）のアーキテクチャ
• Session Lifecycle - 完全なフロー：init → start → PIN → connect → end
• JWT Authentication - トークン構造、署名、SDK Key と API Key
• Distribution Methods - CDN と npm（BYOP モード）

サンプルとパターン

よくあるシナリオで使える、完全に動作するサンプルです。

セッション管理

• Customer Integration - 顧客側の完全な実装（CDN と npm）
• Agent Integration - iframe と npm を使ったエージェントのセットアップパターン
• Session Events - セッションのライフサイクルに関するすべてのイベントを処理する
• Auto-Reconnection - ページの更新とセッションの復旧

機能

• Annotation Tools - 描画、ハイライト、消えるペンを有効にする
• Privacy Masking - CSS セレクターで機密フィールドをマスクする
• Remote Assist - エージェントが顧客のページをスクロールできるようにする
• Multi-Tab Persistence - ブラウザーのタブをまたいでセッションを継続する
• BYOP Custom PIN - npm 統合で独自の PIN を使用する

リファレンス

API と設定に関する包括的なリファレンスです。

SDK リファレンス

• API Reference - SDK のすべてのメソッドとインターフェース

  • ZoomCobrowseSDK.init()
  • session.start()
  • session.join()
  • session.end()
  • session.on()
  • session.getSessionInfo()

• Settings Reference - 初期化設定の一覧

  • allowAgentAnnotation
  • allowCustomerAnnotation
  • piiMask
  • remoteAssist
  • multiTabSessionPersistence

• Session Events Reference - すべてのイベントタイプ

  • pincode_updated
  • session_started
  • session_ended
  • agent_joined
  • agent_left
  • session_error
  • session_reconnecting
  • remote_assist_started
  • remote_assist_stopped

エラーリファレンス

• Error Codes - エラーコードの完全なリファレンス
  • 1001-1017：セッションエラー
  • 2001：トークンエラー
  • 9999：サービスエラー

公式ドキュメント

• Get Started - 公式のスタートガイドドキュメント（クローリング済み）
• Features - 公式の機能ドキュメント（クローリング済み）
• Authorization - 公式の JWT 認証ドキュメント（クローリング済み）
• API Documentation - クローリング済みの API リファレンスドキュメント

トラブルシューティング

迅速な診断と、よくある問題の解決方法：

• よくある問題 - よくある問題の簡単な解決方法

  • SDK が読み込まれない
  • トークンの生成に失敗する
  • エージェントが接続できない
  • フィールドがマスクされない
  • 更新後にセッションが再接続されない

• エラーコード - エラーコードの検索と解決方法

  • セッションの開始／参加に関する失敗（1001、1011、1016）
  • セッション上限エラー（1002、1004、1012、1013、1015）
  • PIN コードエラー（1006、1008、1009、1010）
  • トークンエラー（2001）

• CORS と CSP - クロスオリジンと Content Security Policy の設定

  • Access-Control-Allow-Origin ヘッダー
  • Content-Security-Policy ヘッダー
  • クロスオリジン iframe の処理
  • 同一オリジン iframe の処理

• ブラウザーの互換性 - ブラウザーの要件と制限

  • 対応ブラウザー（Chrome 80+、Firefox 78+、Safari 14+、Edge 80+）
  • Internet Explorer は非対応
  • プライバシーモードの制限
  • サードパーティ Cookie の要件

ユースケース別

実現したいことに応じてドキュメントを探せます。

こんなことをしたい場合...

初めて cobrowse をセットアップする：

• スタートガイド
• JWT 認証
• 顧客向けインテグレーション
• エージェント向けインテグレーション

注釈ツールを追加する：

• 注釈ツールの例
• [設定リファレンス - allowAgentAnnotation](references/settings-reference.md#allowa gentannotation)
• 設定リファレンス - allowCustomerAnnotation

機密データをエージェントから隠す：

• プライバシーマスキングの例
• 設定リファレンス - piiMask

エージェントが顧客のページを操作できるようにする：

• リモートアシストの例
• 設定リファレンス - remoteAssist

カスタム PIN コードを使用する：

• BYOP カスタム PIN の例
• JWT 認証 - enable_byop

ページ更新に対応する：

• 自動再接続の例
• セッションのライフサイクル - リカバリー

npm（CDN ではなく）と統合する：

• BYOP カスタム PIN の例
• 配布方法

セッション接続の問題をデバッグする：

• よくある問題
• エラーコード
• セッションイベント - session_error

CORS と CSP ヘッダーを設定する：

• CORS と CSP のガイド
• ブラウザーの互換性

エラーコード別

エラーコードの解決方法をすばやく検索できます。

セッションエラー

• 1001 (SESSION_START_FAILED) → エラーコード
• 1002 (SESSION_CONNECTING_IN_PROGRESS) → エラーコード
• 1004 (SESSION_COUNT_LIMIT) → エラーコード
• 1011 (SESSION_JOIN_FAILED) → エラーコード
• 1012 (SESSION_CUSTOMER_COUNT_LIMIT) → エラーコード
• 1013 (SESSION_AGENT_COUNT_LIMIT) → エラーコード
• 1015 (SESSION_DUPLICATE_USER) → エラーコード
• 1016 (NETWORK_ERROR) → エラーコード
• 1017 (SESSION_CANCELING_IN_PROGRESS) → エラーコード

PIN エラー

• 1006 (SESSION_JOIN_PIN_NOT_FOUND) → エラーコード
• 1008 (SESSION_PIN_INVALID_FORMAT) → エラーコード
• 1009 (SESSION_START_PIN_REQUIRED) → エラーコード
• 1010 (SESSION_START_PIN_CONFLICT) → エラーコード

認証エラー

• 2001 (TOKEN_INVALID) → エラーコード

サービスエラー

• 9999 (UNDEFINED) → エラーコード

公式リソース

外部ドキュメントとサンプル：

• 公式ドキュメント：https://developers.zoom.us/docs/cobrowse-sdk/
• API リファレンス：https://marketplacefront.zoom.us/sdk/cobrowse/
• クイックスタートリポジトリ：https://github.com/zoom/CobrowseSDK-Quickstart
• 認証エンドポイントのサンプル：https://github.com/zoom/cobrowsesdk-auth-endpoint-sample
• 開発者フォーラム：https://devforum.zoom.us/
• 開発者ブログ：https://developers.zoom.us/blog/?category=zoom-cobrowse-sdk

ドキュメント構成

cobrowse-sdk/
├── SKILL.md                    # Main skill entry point
├── SKILL.md                    # This file - complete navigation
├── get-started.md              # Step-by-step setup guide
│
├── concepts/                   # Core concepts
│   ├── two-roles-pattern.md
│   ├── session-lifecycle.md
│   ├── jwt-authentication.md
│   └── distribution-methods.md
│
├── examples/                   # Working examples
│   ├── customer-integration.md
│   ├── agent-integration.md
│   ├── annotations.md
│   ├── privacy-masking.md
│   ├── remote-assist.md
│   ├── multi-tab-persistence.md
│   ├── byop-custom-pin.md
│   ├── session-events.md
│   └── auto-reconnection.md
│
├── references/                 # API and config references
│   ├── api-reference.md        # SDK methods
│   ├── settings-reference.md   # Init settings
│   ├── session-events.md       # Event types
│   ├── error-codes.md          # Error reference
│   ├── get-started.md          # Official docs (crawled)
│   ├── features.md             # Official docs (crawled)
│   ├── authorization.md        # Official docs (crawled)
│   └── api.md                  # API docs (crawled)
│
└── troubleshooting/            # Problem resolution
    ├── common-issues.md
    ├── error-codes.md
    ├── cors-csp.md
    └── browser-compatibility.md

検索のヒント

キーワードで検索：

• "annotation" → アノテーションツール
• "mask" または "privacy" → プライバシーマスキング
• "PIN" または "custom PIN" → BYOP カスタム PIN
• "JWT" または "token" → JWT 認証
• "error" → エラーコード
• "CORS" または "CSP" → CORS と CSP
• "iframe" → エージェント統合
• "npm" → 配布方法、BYOP
• "refresh" または "reconnect" → 自動再接続
• "agent" → エージェント統合、2 つの役割パターン
• "customer" → 顧客統合、2 つの役割パターン

---

お探しの情報が見つかりませんか？ 公式ドキュメントを確認するか、開発者フォーラムで質問してください。

環境変数

• 標準化された.envキーと各値の確認方法については、references/environment-variables.mdを参照してください。