■はじめに

前回は Camera API を利用して撮影した写真にエフェクトを掛けるところまでを行いました。
Firefox OSでの写真撮影には Camera API 以外にも getUserMedia と mozCamera があり、今回は getUserMedia を使用しての方法を行ってみたいと思います。

■getUserMedia

いきなり最初に書くのもアレなのですが、 Firefox OS での getUserMedia は問題点がいくつかあります…

その1: 解像度が小さい
Firefox のシミュレータでは綺麗な画像を取得できるのですが、 Firefox OS の実機( Flame, Fx0 )では取得した画像の解像度が小さくなります。表示時に倍角に引き伸ばしている模様で、荒く表示されますorz
その2: W3C のフルスペックの仕様に対応していない
W3C の仕様では取得時の縦横のサイズ、アスペクト比、フレームレートなどが指定出来ますが、そもそもで Firefox では対応していない要素もあるため、Firefox OS でも同様に指定できません。
仲さんの資料にまとまっていますのでご参照ください。
※最新の状態では変わっている可能性もありますが。ただし、少なくとも Fx0 では縦横のサイズを指定しての取得は出来ません。

dictionary MediaTrackConstraintSet {
    ConstrainLong      width;
    ConstrainLong      height;
    ConstrainDouble    aspectRatio;
    ConstrainDouble    frameRate;
    ConstrainDOMString facingMode;
    ConstrainDouble    volume;
    ConstrainLong      sampleRate;
    ConstrainLong      sampleSize;
    ConstrainBoolean   echoCancellation;
    ConstrainDOMString deviceId;
    ConstrainDOMString groupId;
};

いきなりデメリットから入ってしまいましたが、この API を使用するのはとても簡単というのが最大のメリットでもあります。
そのため、このデメリットを活かすようにアプリを作ってしまえば良いかなっと思います。
例えば、解像度の低さを利用してトイカメラを作るとか、解像度を要求しないサービスに使えます。また、Web 権限で動作するので、自分の Web サイトにおくことができますので、マーケットを利用する必要はなくなります。

manifest

というわけで使い方に入りたいと思います。

getUserMediaで動画キャプチャするには、マニフェストファイルのpermissionsに以下の定義を追加する必要があります。

  "permissions": {
    "video-capture": {
      "description": "Required to capture video via getUserMedia" 
    }
  }

処理フロー

getUserMedia で撮影した画像を video 要素に渡す
video 要素から canvas に静止画として画像を貼り付ける
canvas から jpeg として取り出し、 img 要素に設定する
エフェクト処理をする。

という流れになります。
静止画を取得するのに canvas にわざわざ貼り付けています。
私が調べた範囲では getUserMedia を利用した場合、静止画を取得する API がありませんでした。
その為、取得するのに canvas 経由で画像を取得しています。

getUserMedia から video 要素へ

カメラから撮影した画像を video 要素に渡すことで、撮影対象をプレビューすることができます。

  navigator.getUserMedia = (navigator.getUserMedia || navigator.mozGetUserMedia);

  if (navigator.getUserMedia) {
    navigator.getUserMedia (
      { video: true },
      function onSuccess(stream) {
        var video = document.querySelector('video');
        video.src = window.URL.createObjectURL(stream);
        video.play();
      },
      function onError(err) {
        console.log('error');
      }
    );
  }

video 要素から canvas へ

video 要素に表示されている画像を canvas 経由で静止画として取り出すには、context.drawImage()を使用すれば OK です。

canvas から jpeg へ

canvas から jpeg 形式の画像を取得します。

  var image = canvas.toDataURL();
  document.getElementById(エフェクト対象画像のID).src = image;

シャッター音を鳴らす

実は、ここに記載した getUserMedia から canvas 経由で jpeg 画像を取得するシャッター音は鳴りません。

その為、取得時に自分で鳴らす必要があります。
鳴らすには Audio API を使うと簡単に鳴らすことが出来ます。

今回作成したサンプルでは以下のサイトの素材を使用しました。
http://www.soundoffice.com/se/item/se-033.php

エフェクト処理

エフェクト処理前

エフェクト処理後
Seriously.js で vignette を掛けています。

■まとめ

getUserMedia を使用して写真〜エフェクトまで実現しました。
ただ、最初に記載しましたが、画像が荒く、使うにはユースケースを考える必要があります。
とは言え、非常に簡単に使用できるので、ユースケースに合致すれば有用な方法かもしれません。

次回は mozCamera 編です。

スマートフォンでカメラ画像を取得し JavaScript でエフェクト掛けてみた(その2:getUserMedia編)