このページの本文へ

WebRTCでブラウザーが防犯カメラに! (2/4)

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

文●古籏一浩

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

Google Chromeでカメラ映像を表示する

 最初に、Google Chromeを使ってカメラ映像を表示します。HTMLではvideo要素を用意し、autoplay属性を指定します。autoplay属性を指定しないと最初に取り込まれた1フレーム目しか表示されず、静止したままになってしまいます。

 デバイスからはnavigatorオブジェクトのgetUserMedia()メソッドを使って映像を取り込みます。Google Chromeではベンダープレフィックス付きで、navigator.webkitGetUserMedia()のように指定します。

 webkitGetUserMedia()には3つの引数を指定します。第1引数には取り込むメディアストリームの種類を"video"または"audio"、もしくは"video, audio"として指定します※。

 webkitGetUserMedia()の第2引数には取り込みに成功したときに呼び出す関数を指定します。この関数にデバイスから取得したデータが渡されます。Google ChromeではストリームをwebkitURL.createObjectURL()を使ってオブジェクトURL形式に変換した後にvideo要素のsrc属性に入れます。これだけで、video要素にリアルタイムで映像が流れます。

 webkitGetUserMedia()の第3引数にはエラー発生時(デバイスからの取り込みに失敗したときなど)に呼び出す関数を指定します。この関数にはエラーオブジェクトが渡されます。エラーオブジェクトのcodeプロパティを参照すれば発生したエラーを確認できます。カメラからの取り込みが許可されていない場合はPERMISSION_DENIEDエラーとなります。

 サンプル1が、Google Chromeでカメラからリアルタイムで映像を取り込み、再生するプログラムです。


※WebRTCの新しい仕様(W3C Editor's Draft 07 June 2012)では文字列ではなく{ video : true, audio: true } のように指定します。

カメラからのリアルタイム映像が表示される

カメラからのリアルタイム映像が表示される

サンプル1[HTML]


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google ChromeのWebRTC</title>
    <script>
      window.addEventListener("load", function(){
        // 映像と音声を指定。新仕様では{ video : true, audio: true }
        navigator.webkitGetUserMedia("video, audio",
          function(stream){ // カメラからの取り込みがOKな場合
            // 映像を表示するvideo要素にURLとして代入
            var myVideo = document.getElementsByTagName("video")[0];
            myVideo.src = webkitURL.createObjectURL(stream);
          }, 
          function(error){  // エラーの場合
            console.log("エラー:"+error.code);
          }
        );
      }, false);
    </script>
  </head>
  <body>
    <video src="" width="320" height="240" autoplay style="border:1px solid black"></video>
  </body>
</html>

Opera 12でカメラ映像を表示する

 次に、サンプル1と同様のプログラムをOpera 12向けに作ります。video要素にautoplay属性を指定する点やgetUserMedia()メソッドの引数は同じですが、Opera 12はベンダープレフィックスが不要でnavigator.getUserMedia()として指定します。

 カメラから取り込みに成功した場合、Google ChromeではwebkitURL.createObjectURL()メソッドで変換しましたが、Operaの場合は変換せずそのままvideo要素のsrc属性に代入します。

 実際のプログラムがサンプル2です。Opera 12でもリアルタイムで映像が表示されます。Google Chromeよりも若干高速に表示されるようです。なお、Google Chrome/Opera 12ともカメラからの取り込みを開始する際にはユーザーに許可を求める画面が表示されます。

カメラを利用してもよいかユーザーに確認するポップアップが表示される

カメラを利用してもよいかユーザーに確認するポップアップが表示される

ユーザーが許可した場合には図のように映像が画面に表示される

ユーザーが許可した場合には図のように映像が画面に表示される

サンプル2[HTML]


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Opera 12のWebRTC</title>
    <script>
      window.addEventListener("load", function(){
        // 映像と音声を指定。新仕様では{ video : true, audio: true }
        navigator.getUserMedia("video, audio",
          function(stream){ // カメラからの取り込みがOKな場合
            // 映像を表示するvideo要素にそのまま代入
            var myVideo = document.getElementsByTagName("video")[0];
            myVideo.src = stream;
          }, 
          function(error){  // エラーの場合
            console.log("エラー:"+error.code);
          }
        );
      }, false);
    </script>
  </head>
  <body>
    <video width="320" height="240" autoplay style="border:1px solid black"></video>
  </body>
</html>

この連載の記事

一覧へ

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