--- title: HTML5のWebRTCでPCに接続されたカメラ映像をウェブブラウザー上に表示してコマ画像を保存したい tags: HTML5 WebRTC mediaDevices getUserMedia author: qiita_mona slide: false --- #PCに接続されたカメラ映像をウェブブラウザー上に表示する 【目的】 PCに接続されたカメラの映像を分析するシステムを開発する。 HTML5やら、javascriptやらを使ってシンプルに映像取得、 静止画と保存したい。 【技術】 開発環境はWindows10です。映像は家電量販店で安く買える USBカメラをUSB接続して使います。USBカメラからの映像を ウェブブラウザー上に表示して、静止画としてダウンロード 保存できることの確認までやっていきます。今回はウェブサーバー を立ち上げませんが、サーバーにソースを置く場合は、 ブラウザのセキュリティーポリシーに従ってURLを指定 しないと動作しません。(今回は気にする必要ありません) ## システムの実装 実装は、HTML5でWebRCT(Web Real-Time Communication)を使います。 基本的なjavascript言語の知識も必要です。 ※ MediaDevices.getUserMedia() の使い方は下記を参照。 https://developer.mozilla.org/ja/docs/Web/API/Navigator/getUserMedia ``` getUserMedia-Demo ``` 上記のHTMLを『camdemo.html』の名称でUTF-8エンコードで保存します。 USBカメラが接続されているPCで、Chromeブラウザーで直接開いてみてください。 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/8f0bf489-a968-4a6e-03b8-0a9d887ecf58.png) 『映像表示開始』ボタンを押下します。 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/11f02dbc-8cc9-29da-ca6d-5ae0f88b313f.png) カメラを使用するので、「許可」します。 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/e700ee3b-cf50-ea7f-c9c9-89b0ccade1d2.png) はい、映像が表示されました。 映像は静止画ではなく、動画映像として、表示されます。 ## 映像から静止画(コマ画像)をcanvasエリアに表示します。 映像のコマ画像を、画面上の別のエリアに静止画として表示するコードを追加していきます。 実装はシンプルです。 1.「静止画キャプチャ」ボタンを追加します。 2.キャプチャーした静止画を表示するエリアを追加します。 3.(1.)のボタン押下で(2.)のエリアに画像を表示するコードを追加します。 ``` getUserMedia-Demo ``` ![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/3f08e326-9e4f-468d-14f0-368fb381483b.png) 「静止画取得」ボタンを押下します。 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/191aa617-3750-6f53-f06a-3d8669928c91.png) 「静止画取得」ボタンを押下した瞬間の映像が複写されました。 静止画なので、映像が変化しても一度キャプチャした映像は変わりません。 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/397f97d5-b878-cfda-a0aa-08b69f779ac3.png) もう一度「静止画取得」ボタンを押下すれば、静止画も更新されます。 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/1ec7920d-e165-3082-2a12-1e914c438088.png) 静止画側の画像の上で、マウス右クリックで「名前を付けて画像を保存」することができます。 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/3d5fdb5d-e0bf-5ffa-3ac2-2a9cc0b3cb1f.png) Windows標準のペイントで開いてみました。こんな感じです。 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/d57402ea-4db2-0a4f-aa89-362460ad8332.png) また、『toDataURL() メソッド』を使って画像を所定の名称でダウンロード保存させることもできます。 それはまた次回。 以上です。