【HTML5】getUserMediaでブラウザからカメラを起動する


先日、Android版のGoogleChromeがアップデートされましたね〜
最近、スマートフォンでもwebRTCが使えるようになってきているみたいです。

というわけで、今日はgetUserMediaについて紹介したいと思います。
getUserMediaというのは、デバイスAPIの一種で、カメラから映像や音声を取得することができるAPIです。

利用するためにはベンダープレフィックスを利用する必要があります。
今回の記事では、webkit系のブラウザで動作するようなサンプルコードになっています。

まずgetUserMediaが使えるかどうかのチェックですが、以下の形で行えます。

  if (!navigator.webkitGetUserMedia) {
    alert('webkit系ブラウザでないか、もしくはgetUserMediaがサポートされていません');
  }

で、getUserMediaの利用ですが、引数を3つわたします。
1つ目は、映像・音声の取得に関するプロパティの指定
2つ目は、成功時のコールバック関数
3つ目は、失敗時のコールバック関数
となります。

  navigator.webkitGetUserMedia(
    {video: true},
    function(localMediaStream) {
      // 成功時の処理
    },
    function(err) {
      // 失敗時の処理
    }
  );

getUserMediaの実行に成功したら、成功時のコールバック関数にlocalMediaStreamオブジェクトというものが渡されます。
カメラから得た映像などをブラウザ上に表示するためには、videoタグを利用します。

videoタグのsrcに、getUserMediaの実行で得られたlocalMediaStreamオブジェクトを加工したものを渡して、ブラウザ上に表示する感じになります。
で、videoタグに指定すべきsrcの取得方法ですが、createObjectURLというものを使います。
使い方は、

  window.URL.createObjectURL(localMediaStream);

という風になります。
この返り値がBlob URLといわれる、一時的なPC内のリソースを指し示しているURLとなりますので、それをvideo.srcに指定します。
ここで一つ注意点ですが、srcに指定した後に、videoAPIのplayメソッドを実行する必要があります。
でないと映像の再生が始まりません。

というわけで、以下のようにするとカメラから得た映像をブラウザ上に表示することができます。

※myVideoというIDのvideoタグが存在することを前提としています。

  navigator.webkitGetUserMedia(
    {video: true},
    function(localMediaStream) {
      // 成功時の処理
      var myVideo = document.getElementById('myVideo');
      myVideo.src= window.URL.createObjectURL(localMediaStream);
      myVideo.play();
    },
    function(err) {
      // 失敗時の処理
      alert('カメラから映像を取得することができませんでした。');
      console.log(err);
    }
  );

実際に動かしてみたサンプルはこちらです。
getUserMediaを走らせるタイミングで、カメラの利用許諾を求められるので、許可してあげるとキャプチャが始まります。

カメラの利用は案外簡単にできますね!!
ちなみに、Chromeの場合、ローカルファイルにてgetUserMediaを利用することができないので、試しに動かす際はChromeの設定を変えるかサーバに上げてアクセスする必要があります。

しかしデバイス系のAPIは夢が広がりますね〜

ではまた
Let’s enjoy HTML5 Life!!

  • Yu Arai
  • 2013/03/08
  • HTML5

現在、この投稿へのコメントは受け付けていません。

Categories

Recent News

HTML5/CSS3/Javascriptのニュースまとめ[8/19〜8/25]

先週のニュース・ブログ記事を紹介していきます! 先週はちょっと少なめで...

PhoneGap3.0がリリースされましたね!

PhoneGap3.0がリリースされましたね! PhoneGap Da...

HTML5/CSS3/Javascriptのニュースまとめ[6/17〜6/23]

今日は先週のニュース・ブログ記事のまとめです。 1.HTML5 歴史的...

HTML5/CSS3/Javascriptのニュースまとめ[6/10〜6/16]

今日は先週のニュース・ブログ記事のまとめです。 個人的に気になったもの...

AndroidのWebViewでUserAgentを独自に設定する方法

今日はAndroidのWebViewでユーザーエージェントを独自のもの...