ホーム > プログラミング > ビデオチャットアプリを作る > 14. オファーされる側のみビデオ(マイク)をOnにした場合の問題への対応

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



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

解説

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

準備

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

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

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

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

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

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

動作確認

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

ブラウザを2つ立ち上げ、それぞれのブラウザで「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

関連ページ

前項目 : 13. チャット離脱の相手への通知

次項目 : 15. ユーザー名の入力と表示


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


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