ビデオチャットの埋め込み

簡単な埋め込み用ウィジェットを使って、ウェブサイトにVonage Video APIの機能をすぐに追加できます。

Video API Accountでビデオチャットの埋め込みコードを作成する

これは、ビデオチャットの埋め込み例です。
クリックして通話を開始し、その後、下のボタンをクリックして、1対1のビデオチャット用のこの固有の埋め込みリンクを共有してください。

この埋め込みを共有する

https://your-domain/opentok/embeds/?room=roomParam

チャットルームに2人目のユーザーを追加するには、上記のURLをコピーして、ブラウザの新しいタブで開くか、友人に共有してください。相手の方も、通話を開始するにはクリックする必要があります。

概要

「ビデオチャット埋め込み」は、埋め込み可能なHTMLスニペットを使用して、ウェブサイトにOpenTokの基本機能を素早く追加できる最も簡単な方法です。

サイトに埋め込みコードを実装すると、その埋め込みをクリックして「ビデオチャットルーム」に接続できます。他のユーザーも、自分のブラウザでその埋め込みをクリックすることで、同じチャットルームに参加できます。さらに、ルームパラメータ.

ビデオチャットの埋め込みは、すべての OpenTok.js ライブラリが対応しているブラウザ.

制限事項

現在、ビデオチャットの埋め込み機能はウェブ上でのみ利用可能であり、基本的な音声・映像チャット機能を提供しています。モバイルアプリとの連携や、アーカイブ、画面共有、テキストチャットなどの高度な機能は、ビデオチャットの埋め込み機能には含まれていません。

OpenTokの高度な機能やモバイルブラウザ／アプリへの対応を利用するには、ご自身の Video APIアカウントそして、当社の役立つチュートリアルそして開発者向けガイド.

クイックリンク：

ビデオチャットの埋め込みコードの作成
ウェブページにビデオチャットの埋め込みコードを追加する
部屋の増設
複数の部屋での利用例
対応しているウェブサイトプラットフォーム
サンプルアプリ
サポート

ビデオチャットの埋め込みコードの作成

あなたのところへ Video APIアカウントそして プロジェクトを作成する （サイドメニューか、Account概要のいずれかから。）
を選択する。 埋め込み プロジェクトのオプション。
埋め込みに名前を付けてください。

この名前は、後でVideo API Account内でその埋め込みコンテンツを検索する際に使用します。
埋め込みの幅と高さを指定してください。
埋め込みを使用する予定のウェブサイトのドメインを指定してください。

たとえば、example.com/test という Web ページに埋め込みコードを追加する場合は、次のように入力してください。 https://example.com. 必ず入力してください http:// または https:// その後にドメイン名を入力します。（テスト用に localhost を使用する場合は、単に http://localhost または http://localhost:[port number] （ポート80以外のポートの場合。）

重要だ： https（http ではない）の URL を使用してください。ブラウザは、http ページでのカメラへのアクセスを許可しません。ただし、次のようなローカルでのテストでは、http の使用が許可されています。 http://localhost または http://localhost:8080.
Squarespace、Weebly、WordPress などのサイトビルダーを使用してサイトを公開する場合は、 以下の技術を用いて構築されました メニュー（任意）。
をクリックする。 埋め込みを作成 ボタンをクリックする。

これらの手順を完了すると、ページ上に埋め込みコードが生成されます。このコードをコピーして保存し、ウェブサイトに追加できるようにしてください。このコードは、Vonage Video API Accountで既存のビデオチャットの埋め込みを選択し、[ 埋め込みコードをコピー 「埋め込みの概要」の上部にあるボタン。

Iframeとスクリプトによる埋め込みの比較

以下のいずれかを選択してください： iframe または スクリプト 埋め込みコード。次の2つのセクションを参照してください。

ウェブページにビデオチャットの埋め込みコードを追加する

必要なもの：

編集用のウェブページのHTMLへのアクセス
Video API Accountから発行された固有の埋め込みコード（参照：ビデオチャットの埋め込みコードの作成).

Webページへの埋め込みコードの追加とテスト：

エディタでウェブページのHTMLを開き、Video API Accountから埋め込みコードをコピーして、HTMLの本文に貼り付けてください。貼り付ける場所は、表示させたい位置によって異なりますが、必ず <body> そして </body> ページに表示されるタグ。
HTMLを保存して、ブラウザで読み込んでください。すると、次のようなボックスが表示されるはずです。 クリックして通話を開始 ボタンをクリックする。
ボタンをクリックすると、ビデオチャットルームに接続されます。必要に応じて、カメラとマイクへのアクセスを許可してください。これで、ブラウザに自分の映像が表示されるはずです。
ビデオチャットが正常に動作しているか確認するには、マイクをミュートにしてから、別のタブ、ブラウザ、または別のパソコンで同じURLを開き、クリックして通話を開始してください。すると、埋め込み画面に2つの映像が表示されるはずです。

部屋の増設

埋め込みには2種類あります―― iframe そして スクリプト 参照上記（詳細についてはこちら）。これら2つのタイプには、以下の基本形式があります：

iframe

<iframe
  src="https://[YOUR EMBED HOST]/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&iframe=true&room=DEFAULT"
  allow="microphone; camera"
></iframe>

スクリプト

<div
  id="otEmbedContainer"
  style="width:[YOUR EMBED WIDTH];
  height:[YOUR EMBED HEIGHT]"
></div>
<script
  src="https://[YOUR EMBED HOST]/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&room=DEFAULT"
></script>

どちらの場合も、その終わりは src URLはパラメータです room=DEFAULT. このパラメータは、埋め込みが使用する「ルーム」を指定します。複数のユーザーが同じ embedId そして room パラメータが一致した場合、ビデオチャットセッションが開始され、各ユーザーは他のユーザーのビデオストリームを視聴できるようになります。ルームが一致しない場合、同じルームには参加できません。

同じ埋め込みコードを使って複数の独立したルームを作成したい場合は、「room」パラメータを変更することで新しいルームを設定できます。たとえば、次のような埋め込みコードを作成できます。 room=group1 そして、もう一つは room=group2 — 「group1」ルームにアクセスしたユーザーは、「group1」ルームにアクセスしている他のユーザーからの配信を視聴できますが、「group2」ルームにアクセスしているユーザーは表示されません。

いずれの単一のイベントにおいても、参加者の最大人数は部屋は3です。

複数の部屋での利用例

一方、ルームパラメータ埋め込み機能を使用した本番用アプリの作成には必須ではありませんが、この機能を活用することで、より堅牢な動画アプリケーションを構築する方法はいくつかあります。以下に、その活用例をいくつか紹介します：

プログラムによる部屋の作成 — プライベートなビデオチャットルームで個人同士（例えば医師と患者）を動的に接続する必要があるアプリケーションの場合、サーバーサイドのアプリケーションで、各ミーティングごとに一意の「ルーム」IDを生成することができます。その後、そのIDを room パラメータ — これにより、ユーザーはブラウザで動的に生成された埋め込みコンテンツを読み込み、同じルームIDを持つ他のユーザーと同じルームに参加することになります。
ユーザーが作成したルーム — 他のユーザーが参加できるチャットルームを「作成」する前に、サイト上のフォームを通じてユーザーがルーム名を登録できるようにすることもできます。その後、このルーム名を埋め込みコードの room パラメータ。これにより、他のユーザーも同じルーム名を入力することで、同じビデオチャットセッションに参加できるようになります。
WebサイトのURLを介してルームIDを渡す — URL を通じて部屋名を指定したい場合は（例： www.example.com?room=group1)、ユーザーがページを読み込んだ際に、URL を解析して埋め込みコードを生成し、 ?room パラメータを埋め込みに組み込む src URL。その実際の例このページの上部には、このユースケースの実際の使用例が掲載されています。

対応しているウェブサイトプラットフォーム

現在、ビデオチャットの埋め込み機能は、以下のいずれかのプラットフォームで構築されたウェブサイトに統合することができます：

WordPressホスティングアカウント（有料）
Squarespace
Zoho Sites

現在、以下のプラットフォームが利用可能です違う埋め込みに対応：

WordPressの無料アカウント
Weebly
Wix

また、以下のオンラインコードエディタでは、埋め込み機能が正常に動作しません：

Codepen.io
JSFiddle
JSBin

サンプルアプリ

このサンプルWebアプリ Node.js を使用して、1対1の予約ワークフロー向けに動的なビデオチャット埋め込みルームを生成する方法をご紹介します。これは、医師と患者、生徒と教師、あるいはその他のあらゆる1対1のウェブ予約アプリケーションに活用できます。

サポート

埋め込みの実装で問題が発生し、このページで解決策が見つからない場合は、以下の方法があります。サポートチームまでお問い合わせください.