ハロー・ワールド

数分で、ブラウザベースのシンプルな音声・ビデオチャットを設定できます。

前提条件

OpenTokの基本設定クライアントサイドのコードウェブ上での設定は比較的簡単ですが、正常に動作させるためには、いくつかのものが必要になります：

Chrome または Firefox ブラウザ — OpenTok は以下のブラウザに対応していますいくつかのブラウザ、ただしこのデモでは、Chrome または Firefox のご利用をお勧めします
ウェブカメラとマイク — ブラウザから、これらへのアクセス権を共有するよう求められます

OpenTokを使って簡単な音声・ビデオチャットを設定する

以下は、 編集可能なHTMLドキュメント ～が満載の OpenTok.js ライブラリ。HTMLドキュメントに記載されている手順に従って、基本的なOpenTokチャットを素早く設定してください。

「Pen」をご覧ください「Hello World」の埋め込み (@tokbox) について CodePen.

全5ステップのうちのステップ1：認証

以下のコードスニペットをコピーして、 HTML 以下の文書 // credentials (以下の [コピー]ボタン。）

var apiKey = '生成中...';
var セッションID = '生成中...';
var トークン = '生成中...';

有効な APIキー, セッションIDそして トークン OpenTokセッションに接続する際。これらの認証情報は通常、お客様のサーバーですが、今回は私たちが代わりに作成しました。

了解、追加しました

5つのステップのうちのステップ2：セッションに接続し、パブリッシャーを作成する

以下のコードスニペットをコピーして、 HTML 以下の文書 // connect to session. これによりパブリッシャー動画が作成されるため、お使いのブラウザからカメラやマイクへのアクセス許可を求めるメッセージが表示される場合があります。

var session = OT.initSession(apiKey, sessionId);

// パブリッシャーの作成
var publisher = OT.initPublisher();
セッション。コネクト(token, function(err) {
// パブリッシュパブリッシャー

});

このコードは、 セッション そして 出版社 そして コネクト セッションに。出力パネルに自分の動画が表示されるはずです。

了解。動画が表示されました。前の手順に戻る

動画が表示されませんか？ 次のリンクをクリックしてみてください。 URLバーにあるアイコンをクリックして、ウェブカメラのアクセス権限を設定してください。

全5ステップのうちのステップ3：パブリッシャーの公開

以下のコードスニペットをコピーして、 HTML 以下の文書 // publish publisher.

session.publish(publisher);

このコード出版ウェブカメラとマイクを使用して、セッションに音声・映像ストリームを送信します。

OK、追加しました。前の手順に戻る

5つのステップのうちのステップ4：購読者の作成

以下のコードスニペットをコピーして、 HTML 以下の文書 // create subscriber. HTMLドキュメント内で下にスクロールする必要がある場合があります。

session.on('streamCreated', function(event) {
セッション。サブスクライブ(event.stream);
});

このコードを使えば、 サブスクライブ そのセッション内で他のクライアントによって公開された新しいストリームに対して。

OK、追加しました。前の手順に戻る

ステップ 5/5：2人目のビデオ配信者を追加して、1対1のビデオチャットを作成する

コンピュータのスピーカーをミュートしてください（音声のフィードバックを防ぐため）。その後、下のボタンをクリックして、新しいブラウザタブで 2 つ目のクライアントを起動してください（Codepen を使用）。これにより 2 つ目のパブリッシャーが作成され、ページ上に 2 つの動画ストリームが表示されるはずです。

下のボタンをクリックすると、ブラウザの新しいタブでCodepenが開きます。その後、このタブに戻ることができます。

前の手順に戻る

以上です！

OpenTok を使って、（ごく）基本的な 1 対 1 のビデオチャットを設定しました。これは素晴らしい第一歩ですが、ここで使用したコードは、OpenTok の動作を素早く確認するために設計された、必要最低限の実装に過ぎません。本番環境のアプリをリリースするには、サーバーのデプロイを含め、もう少し設定を行う必要があります。

次のステップ

前の手順に戻る