JavaScript
ブラウザでコードをテストする
この時点で app.js ファイルは次のようになるはずだ(少し調整して):
// replace these values with those generated in your Video API account
var applicationId = "YOUR_APP_ID";
var sessionId = "YOUR_SESSION_ID";
var token = "YOUR_TOKEN";
initializeSession();
// Handling all of our errors here by alerting them
function handleError(error) {
if (error) {
alert(error.message);
}
}
function initializeSession() {
const session = OT.initSession(applicationId, sessionId);
// Subscribe to a newly created stream
session.on('streamCreated', function(event) {
session.subscribe(event.stream, 'subscriber', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
});
// Create a publisher
const publisher = OT.initPublisher('publisher', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
// Connect to the session
session.connect(token, function(error) {
// If the connection is successful, publish to the session
if (error) {
handleError(error);
} else {
session.publish(publisher, handleError);
}
});
}
完成したコードでは、以下の値をハードコードで置き換える必要があります。 YOUR_APP_ID, YOUR_SESSION_ID そして YOUR_TOKEN - まだの方は 認証の設定 以上。
- を開く。
index.htmlファイルをブラウザでダブルクリックしてください。 - ブラウザがカメラとマイクの使用許可を求めてきますので、アクセスを許可してください。
- 自分の姿がスクリーンに映し出されるはずだ。
次に、他の人が接続した場合にどのように見えるかをテストしてみよう。私たちのコードはインターネットからアクセスできないが、このページを別のウィンドウで開くことでシミュレートできる。
- フィードバックを避けるため、自分自身をミュートする。
- ブラウザのアドレスバーにURLをコピーする。
- 新しいウィンドウまたはタブを開き、アドレスを貼り付けてファイルを開きます。
- これで自分が2度表示されるはずだ(ブラウザによっては、片方がもう片方からミラーリングされている)。
トラブルシューティングのヒント ページに動画が表示されない場合は、ブラウザのツールで「コンソール」タブを開き(Macではcommand+option+i、WindowsではCTRL+i)、エラーがないか確認してください。最も可能性の高い問題は、APIキー、セッションID、またはトークンが正しく設定されていないことです。認証情報をハードコーディングしているため、トークンの有効期限が切れている可能性もあります。
基本的なビデオチャット
Vonage Video API プラットフォームの基本概念(ビデオ、音声、メッセージングによるユーザ間のコミュニケーション方法など)を学びます。Vonage Video API の基本的なフローを説明します。
手順
1
概要2
始める前に3
Vonageビデオアプリケーションの設定4
プロジェクトフォルダーとHTMLテンプレートの作成5
認証の設定6
セッションへの接続とパブリッシャの作成7
加入者の初期化8
ブラウザでコードをテストする9
CSSのカスタマイズ10
結論