14. オファーされる側のみビデオ（マイク）をOnにした場合の問題への対応

前項までのビデオチャットプログラムは、オファーした側でカメラ（orマイク）をOnにしなかった場合、オファーされた側でカメラ（orマイク）をOnにしても、カメラ映像（orマイク音声）の通信ストリームは作成されず、カメラ映像（orマイク音声）が相手に送信されません。
本項では、オファーされた側のみカメラ（orマイク）をOnにした場合でも、カメラ映像（orマイク音声）が相手に送信されるようにします。

解説

オファーされた側のみカメラ（orマイク）をOnにした場合でも、カメラ映像（orマイク音声）が相手に送信されるように、オファーされた側からも、OfferSDPを作成し、送信します。こうすることで、オファーした側、オファーされた側、双方で必要な通信ストリームが整います。

準備

「13. チャット離脱の相手への通知」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

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

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

DataChannelが接続に追加されるとData Channelイベントが発生します。Data Channelイベントが発生したときに、OfferSDPを作成し、チャット相手に送信します。

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

「OfferSDPの作成関数」の呼び出しを追加します。

// Data channel イベントが発生したときのイベントハンドラ // - このイベントは、createDataChannel() を呼び出すリモートピアによって // RTCDataChannelが接続に追加されたときに送信されます。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ondatachannel rtcPeerConnection.ondatachannel = ( event ) => { console.log( "Event : Data channel" ); // DataChannelオブジェクトをRTCPeerConnectionオブジェクトのメンバーに追加。 rtcPeerConnection.datachannel = event.channel; // DataChannelオブジェクトのイベントハンドラの構築 console.log( "Call : setupDataChannelEventHandler()" ); setupDataChannelEventHandler( rtcPeerConnection ); // オファーをされた側として、OfferSDPを作成し、DataChannelを通して相手に直接送信 // （オファーした側でカメラや（orマイク）をOnにしなかった場合、 // オファーされた側でカメラ（orマイク）をOnにしても、 // カメラ映像（orマイク音声）の通信ストリームは作成されず、カメラ映像（マイク音声）は相手に送信されない。 // オファーされた側として、OfferSDPを作成、送信することで、 // オファーした側、オファーされた側、双方で必要な通信ストリームが整う。） console.log( "Call : createOfferSDP()" ); createOfferSDP( rtcPeerConnection ); };

動作確認

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

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

「オファー側」は、カメラをOffのままにします。

「アンサー側」は、カメラをOnにします。

「オファー側」で、「Send OfferSDP」ボタンを押すと、ビデオチャットが開始します。
リモート映像が表示されます。
（前項までのビデオチャットプログラムでは、上記手順の場合、リモート映像が表示されません）

ダウンロード

サンプルプログラム

デモ

デモ（Google App Engine） : https://my-video-chat.appspot.com/app14/index.html
デモ（Heroku） : https://myvideochat1234.herokuapp.com/app14/index.html