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 - まだの方は 認証の設定 以上。

  1. を開く。 index.html ファイルをブラウザでダブルクリックしてください。
  2. ブラウザがカメラとマイクの使用許可を求めてきますので、アクセスを許可してください。
  3. 自分の姿がスクリーンに映し出されるはずだ。

次に、他の人が接続した場合にどのように見えるかをテストしてみよう。私たちのコードはインターネットからアクセスできないが、このページを別のウィンドウで開くことでシミュレートできる。

  1. フィードバックを避けるため、自分自身をミュートする。
  2. ブラウザのアドレスバーにURLをコピーする。
  3. 新しいウィンドウまたはタブを開き、アドレスを貼り付けてファイルを開きます。
  4. これで自分が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
結論