ホーム > プログラミング > ビデオチャットアプリを作る > 06. マニュアルシグナリング(「リモートの映像の表示、音声の再生」まで構築)

06. マニュアルシグナリング(「リモートの映像の表示、音声の再生」まで構築)



WebRTCでは、P2P通信を始める前に、お互いの情報を交換するシグナリングと呼ばれる処理を行います。
シグナリングの手続きを理解するために、「03. 」~「06. 」にかけて、お互いの情報の交換を手動で行う「マニュアルによるシグナリング」の処理を構築します。
「マニュアルによるシグナリング」では、交換する情報をブラウザ画面に表示し、手動のコピー&ペーストによって情報をWebRTCに設定します。
本項では、「マニュアルによるシグナリング」の「リモートの映像の表示、音声の再生」まで構築をします。

本項で、「マニュアルによるシグナリング」の処理の構築は一区切りで、次項では、「マニュアルによるシグナリング」の処理を「シグナリングサーバーによる自動シグナリング」の処理に変更します。

解説

「マニュアルによるシグナリング」の「リモートの映像の表示、音声の再生」の手続きの流れは以下です。

  1. RTCPeerConnectionオブジェクトにメディアストリームを追加し、チャット相手と接続が完了すると、チャット相手にTrack イベントが発生します。
  2. Track イベントの処理として、リモートメディアストリームを、リモート映像表示用の要素とリモート音声再生用の要素に設定します。

準備

05. を実施していない場合は、まず、05. を実施します。

サーバー側の処理

変更なし。

ウェブページ

「public/index.html」ファイルを編集します。

「body」部の「ローカル映像表示用の要素」の下に、以下に関するコードを追加します。

クライアント側の処理

「public/client.js」ファイルを編集します。

「リモートの映像の表示、音声の再生」に関する処理を追加します。

グローバル変数

「グローバル変数」コード部に、以下のグローバル変数の定義を追加します。


Track イベントが発生したときのイベントハンドラ

「RTCPeerConnection関連の関数」コード部の「RTCPeerConnectionオブジェクトのイベントハンドラの構築」の「Track イベントが発生したときのイベントハンドラ」の処理を変更します。

動作確認

node でサーバーを起動します。

ブラウザを2つ立ち上げ、それぞれのブラウザで「localhost:1337」にアクセスします。



2つ立ち上げた一方を「オファー側」、もう一方を「アンサー側」とします。

① 「オファー側」「アンサー側」の両方で、「Camera」もしくは「Microphone」もしくは両方のチェックボックスをOnにし、カメラもしくはマイクもしくは両方を有効にします。※1

② 「オファー側」で、「Offer side」の「OfferSDP」のセルにある「Create OfferSDP」ボタンを押します。
③ 「オファー側」で、「Offer side」の「OfferSDP」のセルのテキストエリアに、生成された「OfferSDP」が表示されます。
④ 「オファー側」の「Offer side」の「OfferSDP」のセルのテキストエリアに表示された「OfferSDP」をコピーします。

⑤ 「アンサー側」で、「Answer side」の「OfferSDP」のセルのテキストエリアに、コピーした「OfferSDP」を、ペーストします。
⑥ 「アンサー側」で、「Answer side」の「AnswerSDP」のセルにある「Set OfferSDP and Create AnswerSDP」ボタンを押します。
⑦ 「アンサー側」の「Answer side」の「AnswerSDP」のセルのテキストエリアに、生成された「AnswerSDP」が表示されます。
⑧ 「アンサー側」の「Answer side」の「AnswerSDP」のセルのテキストエリアに表示された「AnswerSDP」をコピーします。

⑨ 「オファー側」で、「Offer side」の「AnswerSDP」のセルのテキストエリアに、コピーした「AnswerSDP」を、ペーストします。
⑩ 「オファー側」で、「Offer side」の「AnswerSDP」のセルにある「Set AnswerSDP. Then the chat starts.」ボタンを押します。
⑪ リモートの映像が表示される、もしくは、リモートの音声が再生される、もしくはその両方が行われます。

※1:カメラもマイクも有効にしなかった場合は、通信するデータがないので、「Create OfferSDP」ボタンを押しても、「OfferSDP」が生成されず、「OfferSDP」が表示されません。『カメラもマイクも有効にしなかった場合、「OfferSDP」が生成されない』問題は、第11項の「独自データの送受信」にて解決します。「独自データの送受信」の対応によって通信するデータとして独自データがあるので、カメラ/マイクが有効かによらず、「OfferSDP」が生成されるようになります。

「オファー側」


「アンサー側」

ダウンロード

サンプルプログラム

デモ

デモ(Google App Engine) : https://my-video-chat.appspot.com/app06/index.html
デモ(Heroku) : https://myvideochat1234.herokuapp.com/app06/index.html

関連ページ

前項目 : 05. マニュアルシグナリング(「接続完了」まで構築)

次項目 : 07. シグナリングサーバーによる自動シグナリング


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.