このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第89回

WebRTCでブラウザーが防犯カメラに!

2012年06月20日 13時17分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 WebブラウザーからPCのカメラなどのデバイスにアクセスするには、従来、Flash Playerを利用する必要がありましたが、最近ではJavaScriptで利用できるAPIがWebブラウザーに実装されてきています。たとえば、HTML5のMedia Capture APIを使うと、Webカメラから画像や映像を手軽に取り込めます。

 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が利用できます。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング