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

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



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

解説

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

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

準備

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

サーバー側の処理

変更なし。

ウェブページ

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

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

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



「body」部の最後に、以下の「クライアント側の処理のファイル(client.js)を読み込むコード」を追加します。


「public/index.html」全体としては、以下のようにします。

クライアント側の処理

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

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

厳格モード

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

コード分類

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

グローバル変数

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

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

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

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

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

動作確認

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」で終了します。

ダウンロード

サンプルプログラム

デモ

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

関連ページ

前項目 : 01. 開発環境を準備する

次項目 : 03. マニュアルシグナリング(「OfferSDPの作成」まで構築)


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


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