FxOSハンズオン

hats.on.01.js

完成品のコードです

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

// Flame size : 320 x 240
var constrainedWidth = 240;
var constrainedHeight = 320;
var $$ = function(selector) {return document.querySelector(selector); };
var $$$ = function(tag) { return document.createElement(tag); };
var FxOSApp = {
  /** 初期化処理 **/
  init: function(){
    FxOSApp.canvas = $$('#canvas');
    FxOSApp.ctx = FxOSApp.canvas.getContext('2d');
    FxOSApp.video.element = $$('#camera_video');
    FxOSApp.resize();
  },
  /** データの保存 **/
  service:{
    save: function(){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(data){
        if( this.readyState === 4 && this.status === 200 )
        {
         console.log('sucess!', data);
        }
      }
      xhr.open( 'POST', 'http://fxos-ps.azurewebsites.net/api/photos' );
      xhr.setRequestHeader( 'Content-Type', 'application/json; charset=utf-8' );
      xhr.send(JSON.stringify({
        img: FxOSApp.canvas.toDataURL(), title: $$('#title').value,
        usr: $$('#username').value
      }));
    },
  },
  /** キャンバスとカメラ入力の操作 **/
  drowImg: function(img) {
    FxOSApp.ctx.drawImage(img, 0, 0, FxOSApp.canvas.width, FxOSApp.canvas.height); 
  },
  resize: function(e){
    FxOSApp.canvas.width = constrainedWidth;
    FxOSApp.canvas.height = constrainedHeight;
    FxOSApp.video.element.width = constrainedWidth;
    FxOSApp.video.element.height = constrainedHeight;
  },
  /** canvas と video タグの切り替え **/
  show:{
    video:function(){
      $$('#camera_video').className = 'show';
      $$('#canvas').className = 'hide';
    },
    canvas:function(){
      $$('#camera_video').className = 'hide';
      $$('#canvas').className = 'show';
    }
  },
  /** ビデオ要素関係の操作 **/
  video:{
    shutter: function(){
      FxOSApp.show.video();
      window.navigator.getUserMedia({
        video:{
          "mandatory": {
            "minWidth": constrainedWidth,
            "minHeight": constrainedHeight,
            "minFrameRate": "30"
          },
        },
        audio: false
        },
        FxOSApp.video.sucess,
        FxOSApp.video.error);
      },
      element:null,
      MediaStream:null,
      sucess: function(localMediaStream){
        FxOSApp.video.MediaStream = localMediaStream;
        FxOSApp.video.element.src = window.URL.createObjectURL(localMediaStream);
        FxOSApp.video.element.play();
        // この処理は<video>タグがクリックされると、実行される処理です。 
        FxOSApp.video.element.addEventListener("click", function shot() {
          //<video>から<canvas>へ書き出す処理です
          FxOSApp.drowImg(FxOSApp.video.element);
          // video の秒が処理を止めます。
          FxOSApp.video.element.pause()
          // getUserMadia の処理を止めます。
          FxOSApp.video.MediaStream.stop();
          // 画面に<canvas>を表示して、<video>タグを隠します。
          FxOSApp.show.canvas();
          // <video>タグがクリックされたときの処理を解放します。
          FxOSApp.video.element.removeEventListener("click", shot);
        });
      },
      error: function(err) {
        console.log("The following error occured: ", err);
      }
  }
};
var onload_func = function() {
  // 初期化処理
  FxOSApp.init();
  $$('#imageSave').addEventListener('click', FxOSApp.service.save, false);
  /************************** カメラを使う **************************/
  $$('#shutter').addEventListener('click', FxOSApp.video.shutter, false);
};
document.addEventListener('DOMContentLoaded', onload_func, false);

完成品のmanifest.webappです

{
  "version": "1",
  "name": "写真アプリ",
  "description": "写真をとるアプリです",
  "launch_path": "/index.html",
  "icons": {
    "16": "/icons/firefox-16.png",
    "48": "/icons/firefox-48.png",
    "128": "/icons/firefox-128.png"
  },
  "orientation":"portrait-primary",
  "type": "privileged",
  "permissions": {
    "video-capture":{}
  }
}