|
|---|
WebブラウザーからPCのカメラなどのデバイスにアクセスするには、従来、Flash Playerを利用する必要がありましたが、最近ではJavaScriptで利用できるAPIがWebブラウザーに実装されてきています。たとえば、HTML5のMedia Capture APIを使うと、Webカメラから画像や映像を手軽に取り込めます。
- HTML Media Capture
- http://www.w3.org/TR/html-media-capture/
Media CaptureはAndroid 4のブラウザーにも実装されており、本連載でもカメラから画像を取り込んで加工するサンプルを作成しました。
- Android 4の新機能でカメラWebアプリ作ってみた
- http://ascii.jp/elem/000/000/683/683444/
Media Captureはデバイスに用意されている撮影機能を呼び出して利用するので、画像や映像はリアルタイムでは取り込めません。リアルタイムで画像を取り込んでブラウザー上で何らかの処理をしたいときに向いているのが「WebRTC」です。
WebRTCは「Web Real-Time Communications」の略で、カメラやマイクなどのデバイスからリアルタイムでデータを取り込めるJavaScriptのAPIが揃っています。
- WebRTC（Google）
- http://www.webrtc.org/
- WebRTC（W3C）
- http://www.w3.org/TR/webrtc/
今回はWebRTCを使ってWebカメラからリアルタイムで映像を取り込み、定期的に静止画としてWebページ上に出力するプログラムを作ります。一定時間ごとに画像を出力するので、ページをブラウザーで開いておくだけで使える簡易的な防犯カメラとしても使えるでしょう。
今回作成するサンプルプログラム
WebRTCの対応ブラウザー
WebRTCは現在、W3Cが標準化を進めている段階で、実装しているブラウザーは多くありません。2012年6月時点ではOpera 12、Android版のOpera mobileが標準で対応、Google Chrome 19がオプションで対応しています。
Opera 12は実装している仕様が少し古く、Google Chromeはベンダープレフィックス付き(webkit)で実装しているため、現段階ではブラウザーごとに異なるプログラムを用意する必要があります。今回はGoogle Chrome用とOpera用のプログラムを別々に作成し、最後に共通して動作するプログラムに統合します。
Google ChromeでWebRTCを有効にする方法
Google ChromeでWebRTCを利用するにはアドレスバーにabout:flagsと入力し、オプション設定ページを開きます。
オプションの設定ページが表示される
WebRTCのオプションはページの下の方にあります。「MediaStreamを有効にする」という項目内にある「有効にする」をクリックします。
「有効にする」リンクをクリック
クリックしたらGoogle Chromeを再起動します。これでGoogle ChromeでもWebRTCが利用できます。
