02. カメラとマイクの開始と停止

カメラとマイクをOn/Offするウェブページを作成します。カメラとマイクを開始/停止する処理を作成します。

解説

カメラとマイクをOnにするためにすべきことは、以下です。

navigator.mediaDevices.getUserMedia()関数を呼び出します。
カメラのOn/Off、マイクのOn/Offは、getUserMedia()関数の引数で、指定します。
getUserMedia()関数の結果得られるメディアストリームを映像表示用の要素に設定します。

カメラとマイクをOffにするためにすべきことは、以下です。

映像表示用の要素に設定されたメディアストリームが保持するトラックを停止します。
映像表示用の要素に設定されたメディアストリームを解除します。

注意点として、Chromeブラウザでカメラやマイクを使うには、標準では、HTTPS接続(https://～)またはローカルホスト接続(http://localhost/～)である必要があります。
Chromeブラウザで、HTTP接続(http://～)で、カメラやマイクを使うには、Chromeブラウザの設定項目「Insecure origins treated as secure」に、接続先のURL(http://～)を設定する必要があります。
Chromeブラウザの設定方法や最新仕様、Chrome以外のブラウザの動作仕様や設定方法、については、必要に応じて、調査・確認してください。

準備

「01. 開発環境を準備する」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

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

カメラとマイクをOn/Offするウェブページを作成します。

「body」部の<h1>My Video Chat</h>の下に、以下に関するコードを追加します。

カメラのOn/Offのチェックボックス
マイクのOn/Offのチェックボックス
映像表示用の要素

<input type="checkbox" id="checkbox_camera" onclick="onclickCheckbox_CameraMicrophone()">Camera <input type="checkbox" id="checkbox_microphone" onclick="onclickCheckbox_CameraMicrophone()">Microphone <br /> <video id="video_local" width="320" height="240" style="border: 1px solid black;" autoplay></video>

「body」部の最後に、以下の「クライアント側の処理のファイル（client.js）を読み込むコード」を追加します。
 <script src="./client.js"></script>

「public/index.html」全体としては、以下のようにします。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Video Chat</title> </head> <body> <h1>My Video Chat</h1> <input type="checkbox" id="checkbox_camera" onclick="onclickCheckbox_CameraMicrophone()">Camera <input type="checkbox" id="checkbox_microphone" onclick="onclickCheckbox_CameraMicrophone()">Microphone <br /> <video id="video_local" width="320" height="240" style="border: 1px solid black;" autoplay></video>  <script src="./client.js"></script> </body> </html>

クライアント側の処理

「public」フォルダに、「client.js」というファイルを作成します。

カメラとマイクを開始/停止する処理を作成します。

厳格モード

コードが厳格モードで実行されるように、ファイルの１行目に以下のコードを追加します。

"use strict"; // 厳格モードとする

コード分類

クライアント側の処理として記述するコードは大きく以下の分類があり、分類ごとにコードを分けて記述することとします。

グローバル変数
UIから呼ばれる関数
Socket.IO関連の関数
DataChannel関連の関数
RTCPeerConnection関連の関数
その他の内部関数

// ↓↓↓グローバル変数↓↓↓ // ↑↑↑グローバル変数↑↑↑ // ↓↓↓UIから呼ばれる関数↓↓↓ // ↑↑↑UIから呼ばれる関数↑↑↑ // ↓↓↓Socket.IO関連の関数↓↓↓ // ↑↑↑Socket.IO関連の関数↑↑↑ // ↓↓↓DataChannel関連の関数↓↓↓ // ↑↑↑DataChannel関連の関数↑↑↑ // ↓↓↓RTCPeerConnection関連の関数↓↓↓ // ↑↑↑RTCPeerConnection関連の関数↑↑↑ // ↓↓↓その他の内部関数↓↓↓ // ↑↑↑その他の内部関数↑↑↑

グローバル変数

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

カメラのOn/Offのチェックボックス
マイクのOn/Offのチェックボックス
映像表示用の要素

const g_elementCheckboxCamera = document.getElementById( "checkbox_camera" ); const g_elementCheckboxMicrophone = document.getElementById( "checkbox_microphone" ); const g_elementVideoLocal = document.getElementById( "video_local" );

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

「UIから呼ばれる関数」コード部に、「カメラとマイクのOn/Offのチェックボックスを押すと呼ばれる関数」の定義を追加します。

チェックボックスの状態の変化がある場合は、映像表示用の要素に設定されたメディアストリームが保持するトラックを停止し、映像表示用の要素に設定されたメディアストリームを解除します。
チェックボックスの状態の変化があり、かつ、カメラとマイクのどちらかもしくはどちらもOnの場合、navigator.mediaDevices.getUserMedia()関数を呼び出し、関数の結果得られるメディアストリームを映像表示用の要素に設定します。

// カメラとマイクのOn/Offのチェックボックスを押すと呼ばれる関数 function onclickCheckbox_CameraMicrophone() { console.log( "UI Event : Camera/Microphone checkbox clicked." ); // これまでの状態 let trackCamera_old = null; let trackMicrophone_old = null; let bCamera_old = false; let bMicrophone_old = false; let stream = g_elementVideoLocal.srcObject; if( stream ) { trackCamera_old = stream.getVideoTracks()[0]; if( trackCamera_old ) { bCamera_old = true; } trackMicrophone_old = stream.getAudioTracks()[0]; if( trackMicrophone_old ) { bMicrophone_old = true; } } // 今後の状態 let bCamera_new = false; if( g_elementCheckboxCamera.checked ) { bCamera_new = true; } let bMicrophone_new = false; if( g_elementCheckboxMicrophone.checked ) { bMicrophone_new = true; } // 状態変化 console.log( "Camera : %s => %s", bCamera_old, bCamera_new ); console.log( "Microphoneo : %s = %s", bMicrophone_old, bMicrophone_new ); if( bCamera_old === bCamera_new && bMicrophone_old === bMicrophone_new ) { // チェックボックスの状態の変化なし return; } // 古いメディアストリームのトラックの停止（トラックの停止をせず、HTML要素のstreamの解除だけではカメラは停止しない（カメラ動作LEDは点いたまま）） if( trackCamera_old ) { console.log( "Call : trackCamera_old.stop()" ); trackCamera_old.stop(); } if( trackMicrophone_old ) { console.log( "Call : trackMicrophone_old.stop()" ); trackMicrophone_old.stop(); } // HTML要素のメディアストリームの解除 console.log( "Call : setStreamToElement( Video_Local, null )" ); setStreamToElement( g_elementVideoLocal, null ); if( !bCamera_new && !bMicrophone_new ) { // （チェックボックスの状態の変化があり、かつ、）カメラとマイクを両方Offの場合 return; } // （チェックボックスの状態の変化があり、かつ、）カメラとマイクのどちらかもしくはどちらもOnの場合 // 自分のメディアストリームを取得する。 // - 古くは、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 ) => { // HTML要素へのメディアストリームの設定 console.log( "Call : setStreamToElement( Video_Local, stream )" ); setStreamToElement( g_elementVideoLocal, stream ); } ) .catch( ( error ) => { // メディアストリームの取得に失敗⇒古いメディアストリームのまま。チェックボックスの状態を戻す。 console.error( "Error : ", error ); alert( "Could not start Camera." ); g_elementCheckboxCamera.checked = false; g_elementCheckboxMicrophone.checked = false; return; } ); }

HTML要素へメディアストリームを設定する関数

「その他の内部関数」コード部に、「HTML要素へメディアストリームを設定する関数」の定義を追加します。

HTML要素へメディアストリームを設定します。
設定するHTML要素が「VIDEO」の場合は、ボリュームゼロ、ミュートにします。
設定するHTML要素が「AUDIO」の場合は、ボリュームあり、ミュートでないとします。

// HTML要素へのメディアストリームの設定（もしくは解除。および開始） // HTML要素は、「ローカルもしくはリモート」の「videoもしくはaudio」。 // メディアストリームは、ローカルメディアストリームもしくはリモートメディアストリーム、もしくはnull。 // メディアストリームには、Videoトラック、Audioトラックの両方もしくは片方のみが含まれる。 // メディアストリームに含まれるトラックの種別、設定するHTML要素種別は、呼び出し側で対処する。 function setStreamToElement( elementMedia, stream ) { // メディアストリームを、メディア用のHTML要素のsrcObjに設定する。 // - 古くは、elementVideo.src = URL.createObjectURL( stream ); のように書いていたが、URL.createObjectURL()は、廃止された。 // 現在は、elementVideo.srcObject = stream; のように書く。 elementMedia.srcObject = stream; if( !stream ) { // メディアストリームの設定解除の場合は、ここで処理終了 return; } // 音量 if( "VIDEO" === elementMedia.tagName ) { // VIDEO：ボリュームゼロ、ミュート elementMedia.volume = 0.0; elementMedia.muted = true; } else if( "AUDIO" === elementMedia.tagName ) { // AUDIO：ボリュームあり、ミュートでない elementMedia.volume = 1.0; elementMedia.muted = false; } else { console.error( "Unexpected : Unknown ElementTagName : ", elementMedia.tagName ); } }

動作確認

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

ブラウザから、「localhost:1337」にアクセスします。

・「Camera」のチェックボックスをOnにすると、カメラが有効になり、カメラ画像が画面に表示されます。
・「Microphone」のチェックボックスをOnにすると、マイクが有効になります。（映像表示用の要素の音量をゼロ、ミュートにしているので、マイクが拾う音はスピーカーやイヤホンから出力されません。映像表示用の要素の音量を1.0にし、ミュートをfalseにすると、マイクが拾う音がスピーカーやイヤホンから出力されます）

そのURLにおいて、初めてカメラやマイクをOnにする際は、「『カメラ(orマイク)を使用する』を許可するかブロックするか」ダイアログが表示されるので、「許可」ボタンをクリックします。

「『カメラ(orマイク)を使用する』を許可するかブロックするか」ダイアログについて、誤って「ブロック」をクリックしてしまった場合は、ブラウザの「メニュー > 設定 > プライバシーとセキュリティ > サイトの設定 > カメラ(orマイク)」の「ブロック」のURLのリストから所望のURLを探し、右側の「ゴミ箱」アイコンをクリックし、「そのURLにおける『カメラ(orマイク)をブロック』の設定をクリアします。（Google Chrome バージョン86.0.4240.75の場合）

起動したサーバーは、「Ctrl + C」で終了します。