12. カメラ（マイク）の停止と再開

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

解説

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

カメラ（マイク）を停止するには、コネクションオブジェクトが保持するトラックの削除を行います。
カメラ（マイク）を再開するには、コネクションオブジェクトにトラックの結果発生する、Negotiation needed イベント時に、OfferSDPを作成し送信し、新たなシグナリングを開始します。
新たなシグナリングにおけるお互いの情報の交換は、シグナリングサーバーを経由して行うのではなく、DataChannelを通して行います。

準備

「11. 独自データの送受信」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

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

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

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

カメラとマイクのOn/Offのチェックボックスの状態に変化があったときには、コネクションオブジェクトが保持するトラックの削除を行います。トラックは、senderが保持するので、senderの取得も行います。
トラックの削除のために、これまでのトラックのidを取得も行います。
カメラとマイクのOn/Offのチェックボックスの状態がOnに変化するときには、コネクションオブジェクトにトラックの追加を行います。

// カメラとマイクのOn/Offのチェックボックスを押すと呼ばれる関数 function onclickCheckbox_CameraMicrophone() { （・・・略・・・） let idCameraTrack_old = ""; let idMicrophoneTrack_old = ""; let stream = g_elementVideoLocal.srcObject; if( stream ) { trackCamera_old = stream.getVideoTracks()[0]; if( trackCamera_old ) { bCamera_old = true; idCameraTrack_old = trackCamera_old.id; } trackMicrophone_old = stream.getAudioTracks()[0]; if( trackMicrophone_old ) { bMicrophone_old = true; idMicrophoneTrack_old = trackCamera_old.id; } } （・・・略・・・） if( bCamera_old === bCamera_new && bMicrophone_old === bMicrophone_new ) { // チェックボックスの状態の変化なし return; } if( g_rtcPeerConnection ) { // コネクションオブジェクトに対してTrack削除を行う。 // （コネクションオブジェクトに対してTrack削除を行わなかった場合、使用していないstream通信が残る。） let senders = g_rtcPeerConnection.getSenders(); senders.forEach( ( sender ) => { if( sender.track ) { if( idCameraTrack_old === sender.track.id || idMicrophoneTrack_old === sender.track.id) { g_rtcPeerConnection.removeTrack( sender ); // removeTrack()の結果として、通信相手に、streamの「removetrack」イベントが発生する。 } } } ); } // 古いメディアストリームのトラックの停止（トラックの停止をせず、HTML要素のstreamの解除だけではカメラは停止しな（・・・略・・・） // 自分のメディアストリームを取得する。 // - 古くは、navigator.getUserMedia() を使用していたが、廃止された。 // 現在は、navigator.mediaDevices.getUserMedia() が新たに用意され、これを使用する。 console.log( "Call : navigator.mediaDevices.getUserMedia( video=%s, audio=%s )", bCamera_new, bMicrophone_new ); navigator.mediaDevices.getUserMedia( { video: bCamera_new, audio: bMicrophone_new } ) .then( ( stream ) => { if( g_rtcPeerConnection ) { // コネクションオブジェクトに対してTrack追加を行う。 stream.getTracks().forEach( ( track ) => { g_rtcPeerConnection.addTrack( track, stream ); // addTrack()の結果として、「Negotiation needed」イベントが発生する。 } ); } // HTML要素へのメディアストリームの設定 console.log( "Call : setStreamToElement( Video_Local, stream )" ); setStreamToElement( g_elementVideoLocal, stream ); } ) （・・・略・・・） }

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

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

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

データチャンネルが開いているときは、OfferSDP作成関数を呼び出します。（データチャンネルが開いていないときは、OfferSDPは、ユーザーイベントから直接呼出します。）

// RTCPeerConnectionオブジェクトのイベントハンドラの構築 function setupRTCPeerConnectionEventHandler( rtcPeerConnection ) { // Negotiation needed イベントが発生したときのイベントハンドラ // - このイベントは、セッションネゴシエーションを必要とする変更が発生したときに発生する。 // 一部のセッション変更はアンサーとしてネゴシエートできないため、このネゴシエーションはオファー側として実行されなければならない。 // 最も一般的には、negotiationneededイベントは、RTCPeerConnectionに送信トラックが追加された後に発生する。 // ネゴシエーションがすでに進行しているときに、ネゴシエーションを必要とする方法でセッションが変更された場合、 // ネゴシエーションが完了するまで、negotiationneededイベントは発生せず、ネゴシエーションがまだ必要な場合にのみ発生する。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onnegotiationneeded rtcPeerConnection.onnegotiationneeded = () => { console.log( "Event : Negotiation needed" ); if( !isDataChannelOpen( rtcPeerConnection ) ) { // チャット前 // OfferSDPの作成は、ユーザーイベントから直接呼び出すので、 // Negotiation Neededイベントは無視する。 } else { // チャット中 // OfferSDPを作成し、DataChannelを通して相手に直接送信 console.log( "Call : createOfferSDP()" ); createOfferSDP( rtcPeerConnection ); } }; （・・・略・・・）

OfferSDPの作成関数

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

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

OfferSDPの送信について、DataChannelが開いていないときはサーバーを経由して送信し、DataChannelが開いているときはDataChannelを通して送信するようにします。

// OfferSDPの作成 function createOfferSDP( rtcPeerConnection ) { // OfferSDPの作成 console.log( "Call : rtcPeerConnection.createOffer()" ); rtcPeerConnection.createOffer() .then( ( sessionDescription ) => { （・・・略・・・） } ) .then( () => { // Vanilla ICEの場合は、まだSDPを相手に送らない // Trickle ICEの場合は、初期SDPを相手に送る if( !isDataChannelOpen( rtcPeerConnection ) ) { // チャット前 // 初期OfferSDPをサーバーを経由して相手に送信 console.log( "- Send OfferSDP to server" ); g_socket.emit( "signaling", { type: "offer", data: rtcPeerConnection.localDescription } ); } else { // チャット中 // 初期OfferSDPをDataChannelを通して相手に直接送信 console.log( "- Send OfferSDP through DataChannel" ); rtcPeerConnection.datachannel.send( JSON.stringify( { type: "offer", data: rtcPeerConnection.localDescription } ) ); } } ) .catch( ( error ) => （・・・略・・・） }

OfferSDPの設定とAnswerSDPの作成関数

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

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

AnswerSDPの送信について、DataChannelが開いていないときはサーバーを経由して送信し、DataChannelが開いているときはDataChannelを通して送信するようにします。

// OfferSDPの設定とAnswerSDPの作成 function setOfferSDP_and_createAnswerSDP( rtcPeerConnection, sessionDescription ) { console.log( "Call : rtcPeerConnection.setRemoteDescription()" ); rtcPeerConnection.setRemoteDescription( sessionDescription ) .then( () => { （・・・略・・・） } ) .then( ( sessionDescription ) => { （・・・略・・・） } ) .then( () => { // Vanilla ICEの場合は、まだSDPを相手に送らない // Trickle ICEの場合は、初期SDPを相手に送る if( !isDataChannelOpen( rtcPeerConnection ) ) { // チャット前 // 初期AnswerSDPをサーバーを経由して相手に送信 console.log( "- Send AnswerSDP to server" ); g_socket.emit( "signaling", { type: "answer", data: rtcPeerConnection.localDescription } ); } else { // チャット中 // 初期AnswerSDPをDataChannelを通して相手に直接送信 console.log( "- Send AnswerSDP through DataChannel" ); rtcPeerConnection.datachannel.send( JSON.stringify( { type: "answer", data: rtcPeerConnection.localDescription } ) ); } } ) .catch( ( error ) => （・・・略・・・） }

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

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

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

ICE candidateの送信について、DataChannelが開いていないときはサーバーを経由して送信し、DataChannelが開いているときはDataChannelを通して送信するようにします。

// ICE candidate イベントが発生したときのイベントハンドラ（・・・略・・・） rtcPeerConnection.onicecandidate = ( event ) => { console.log( "Event : ICE candidate" ); if( event.candidate ) { // ICE candidateがある console.log( "- ICE candidate : ", event.candidate ); // Vanilla ICEの場合は、何もしない // Trickle ICEの場合は、ICE candidateを相手に送る if( !isDataChannelOpen( rtcPeerConnection ) ) { // チャット前 // ICE candidateをサーバーを経由して相手に送信 console.log( "- Send ICE candidate to server" ); g_socket.emit( "signaling", { type: "candidate", data: event.candidate } ); } else { // チャット中 // ICE candidateをDataChannelを通して相手に直接送信 console.log( "- Send ICE candidate through DataChannel" ); rtcPeerConnection.datachannel.send( JSON.stringify( { type: "candidate", data: event.candidate } ) ); } } else （・・・略・・・） };

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

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

Signalingメッセージに対する処理を追加します。
処理内容は、サーバーからのメッセージ受信に対する処理におけるSignalingメッセージの受信の処理と同様です。

// DataChannelオブジェクトのイベントハンドラの構築 function setupDataChannelEventHandler( rtcPeerConnection ) { （・・・略） // message イベントが発生したときのイベントハンドラ rtcPeerConnection.datachannel.onmessage = ( event ) => { console.log( "DataChannel Event : message" ); let objData = JSON.parse( event.data ); console.log( "- type : ", objData.type ); console.log( "- data : ", objData.data ); if( "message" === objData.type ) { // 受信メッセージをメッセージテキストエリアへ追加 let strMessage = objData.data; g_elementTextareaMessageReceived.value = strMessage + "\n" + g_elementTextareaMessageReceived.value; // 一番上に追加 //g_elementTextareaMessageReceived.value += strMessage + "\n"; // 一番下に追加 } else if( "offer" === objData.type ) { // 受信したOfferSDPの設定とAnswerSDPの作成 console.log( "Call : setOfferSDP_and_createAnswerSDP()" ); setOfferSDP_and_createAnswerSDP( rtcPeerConnection, objData.data ); } else if( "answer" === objData.type ) { // 受信したAnswerSDPの設定 console.log( "Call : setAnswerSDP()" ); setAnswerSDP( rtcPeerConnection, objData.data ); } else if( "candidate" === objData.type ) { // 受信したICE candidateの追加 console.log( "Call : addCandidate()" ); addCandidate( rtcPeerConnection, objData.data ); } } }

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

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

「相手のメディアストリームがRTCPeerConnectionから削除されたときのイベントハンドラ」を追加します。
処理内容は、削除されたトラックの種類に対応したHTML要素に設定されたメディアストリームをクリアします。

// Track イベントが発生したときのイベントハンドラ（・・・略・・・） rtcPeerConnection.ontrack = ( event ) => { （・・・略・・・） // 相手のメディアストリームがRTCPeerConnectionから削除されたときのイベントハンドラ // - 相手の RTCPeerConnection.removeTrack( sender ); // の結果として、streamの「removetrack」イベントが発生する。 // - 古くは、rtcPeerConnection.onremovetrack に設定していたが、廃止された。 // 現在は、stream.onremovetrack に設定する。 stream.onremovetrack = ( evt ) => { console.log( "Stream Event : remove track" ); console.log( "- stream", stream ); console.log( "- track", evt.track ); // HTML要素のメディアストリームの解除 let trackRemove = evt.track; if( "video" === trackRemove.kind ) { console.log( "Call : setStreamToElement( Video_Remote, null )" ); setStreamToElement( g_elementVideoRemote, null ); } else if( "audio" === trackRemove.kind ) { console.log( "Call : setStreamToElement( Audio_Remote, null )" ); setStreamToElement( g_elementAudioRemote, null ); } else { console.error( "Unexpected : Unknown track kind : ", trackRemove.kind ); } }; };

動作確認

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

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

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

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

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