ホーム > プログラミング > ビデオチャットアプリを作る > 12. カメラ(マイク)の停止と再開

12. カメラ(マイク)の停止と再開



前項までのビデオチャットプログラムは、チャットの途中でカメラの停止をするとチャット相手のリモート映像は静止画像となり、停止したカメラを再開してもチャット相手のリモート映像は再開しません。
本項では、チャットの途中でカメラ(マイク)の停止や再開ができるようにします。

解説

チャットの途中でカメラとマイクの停止や再開ですべきことは、以下です。

準備

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

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

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

カメラとマイクのOn/Offのチェックボックスを押すと呼ばれる関数

「UIから呼ばれる関数」コード部の「カメラとマイクのOn/Offのチェックボックスを押すと呼ばれる関数」の処理を変更します。

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

RTCPeerConnectionオブジェクトに対するTrackの追加の結果として、Negotiation needed イベントが発生します。Negotiation needed イベント時の処理として、OfferSDPを作成し送信し、新たなシグナリングを開始します。

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

OfferSDPの作成関数

DataChannelが開いているときは、OfferSDPの送信を、DataChannelを通して行うようにします。

「RTCPeerConnection関連の関数」コード部の「OfferSDPの作成」関数の処理を変更します。

OfferSDPの設定とAnswerSDPの作成関数

DataChannelが開いているときは、AnswerSDPの送信を、DataChannelを通して行うようにします。

「RTCPeerConnection関連の関数」コード部の「OfferSDPの設定とAnswerSDPの作成」関数の処理を変更します。

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

DataChannelが開いているときは、ICE candidateの送信を、DataChannelを通して行うようにします。

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

DataChannelオブジェクトのイベントハンドラの構築関数

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

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

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

動作確認

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

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



片方のブラウザで「Send OfferSDP」ボタンを押すと、ビデオチャットが開始します。


チャット相手がカメラを停止すると、リモート映像がクリアされます。


チャット相手が再度、カメラを開始すると、リモート映像が表示されます。

ダウンロード

サンプルプログラム

デモ

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

関連ページ

前項目 : 11. 独自データの送受信

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


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


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