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

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

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

解説

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

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

準備

「05. マニュアルシグナリング（「接続完了」まで構築）」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

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

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

リモート映像表示用の要素とリモート音声再生用の要素

クライアント側の処理

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

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

グローバル変数

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

リモートの映像表示用の要素
リモートの音声再生用の要素

const g_elementVideoRemote = document.getElementById( "video_remote" ); const g_elementAudioRemote = document.getElementById( "audio_remote" );

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

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

リモート映像表示用の要素とリモート音声再生用の要素に、リモートメディアストリームを設定する処理を追加します。

// Track イベントが発生したときのイベントハンドラ // - このイベントは、新しい着信MediaStreamTrackが作成され、 // コネクション上のレシーバーセットに追加されたRTCRtpReceiverオブジェクトに関連付けられたときに送信される。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack // - 古くは、rtcPeerConnection.onaddstream に設定していたが、廃止された。 // 現在は、rtcPeerConnection.ontrack に設定する。 rtcPeerConnection.ontrack = ( event ) => { console.log( "Event : Track" ); console.log( "- stream", event.streams[0] ); console.log( "- track", event.track ); // HTML要素へのリモートメディアストリームの設定 let stream = event.streams[0]; let track = event.track; if( "video" === track.kind ) { console.log( "Call : setStreamToElement( Video_Remote, stream )" ); setStreamToElement( g_elementVideoRemote, stream ); } else if( "audio" === track.kind ) { console.log( "Call : setStreamToElement( Audio_Remote, stream )" ); setStreamToElement( g_elementAudioRemote, stream ); } else { console.error( "Unexpected : Unknown track kind : ", track.kind ); } };

動作確認

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

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

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

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

② 「オファー側」で、「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.」ボタンを押します。
⑪ リモートの映像が表示される、もしくは、リモートの音声が再生される、もしくはその両方が行われます。

※１：カメラもマイクも有効にしなかった場合は、通信するデータがないので、「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