Skip to content

Instantly share code, notes, and snippets.

@MSakamaki

MSakamaki/hats.on.01.js

Last active August 29, 2015 14:16
Show Gist options
  • Save MSakamaki/b38ab30af3ab0d7a69a7 to your computer and use it in GitHub Desktop.
Save MSakamaki/b38ab30af3ab0d7a69a7 to your computer and use it in GitHub Desktop.
Download ZIP
FxOSハンズオン
@MSakamaki
Copy link
Author

完成品のHTMLです。

    <body>
        <div>

            <label>作者
            <div><input type="text" id="username"></div></label>

            <label>タイトル
            <div><input type="text" id="title"></div></label>

        </div>
        <div>
            <div>
                <button id="shutter">写真を撮る</button>
                <span class="colorpick">
                    <input type="text" value="" class="pickval hide" />
                    <span class="add-on"><i></i></span>
                </span>
                <button id="undo">もどす</button>  
                <button id="redo">進む</button>

                <span></span>
            </div>
        </div>
        <div>
            <video  id="camera_video" class="hide"></video>
            <canvas id="canvas"       class="show"></canvas>
        </div>
        <div>
            <button id="imageSave">アップロード</button>
        </div>
    </body>

@MSakamaki
Copy link
Author

完成品のコードです

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);

@MSakamaki
Copy link
Author

完成品の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":{}
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment