Taking photos from web

application.controller.js

import Ember from 'ember';
//http://cloudbook.biz/take-photos-using-html5/
//https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
//http://webrtc.github.io/samples/src/content/getusermedia/gum/
//https://developers.google.com/web/updates/2015/10/media-devices?hl=en
//https://webrtc.github.io/samples/src/content/getusermedia/canvas/
export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  width:380,
  height: 280,
  streaming: false,
  video: Ember.computed(function(){
    return document.querySelector('#video');
  }),
  photo: Ember.computed(function(){
    return document.querySelector('#photo');
  }),
	init(){
    //get user media device support
    /*navigator.getMedia = ( 
      navigator.getUserMedia ||        
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia);      */
  },
  actions:{
    askPermission3(){
      'use strict';

      // Put variables in global scope to make them available to the browser console.
      var video = document.querySelector('video');
      var constraints = window.constraints = { audio: false, video: true };
      var errorElement = document.querySelector('#errorMsg');

      navigator.mediaDevices.getUserMedia(constraints)
      .then(function(stream) {
        var videoTracks = stream.getVideoTracks();
        console.log('Got stream with constraints:', constraints);
        console.log('Using video device: ' + videoTracks[0].label);
        stream.onended = function() {
          console.log('Stream ended');
        };
        window.stream = stream; // make variable available to browser console
        video.srcObject = stream;
      })
      .catch(function(error) {
        if (error.name === 'ConstraintNotSatisfiedError') {
          errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
              constraints.video.width.exact + ' px is not supported by your device.');
        } else if (error.name === 'PermissionDeniedError') {
          errorMsg('Permissions have not been granted to use your camera and ' +
            'microphone, you need to allow the page access to your devices in ' +
            'order for the demo to work.');
        }
        errorMsg('getUserMedia error: ' + error.name, error);
      });

      function errorMsg(msg, error) {
        errorElement.innerHTML += '<p>' + msg + '</p>';
        if (typeof error !== 'undefined') {
          console.error(error);
        }
      }
    },
    askPermission2(){   
      /*navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
        getUserMedia: function(c) {
          return new Promise(function(y, n) {
            (navigator.mozGetUserMedia ||
             navigator.webkitGetUserMedia).call(navigator, c, y, n);
          });
        }
      } : null);*/

      if (!navigator.mediaDevices) {
        console.log("getUserMedia() not supported.");
        return;
      }

      // Prefer camera resolution nearest to 1280x720.

      var constraints = { audio: true, video: { width: 1280, height: 720 } };

      navigator.mediaDevices.getUserMedia(constraints)
        .then(function(stream) {
        var video = document.querySelector('video');
        video.src = window.URL.createObjectURL(stream);
        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
        .catch(function(err) {
        console.log(err.name + ": " + err.message);
      });

    },
    askPermission(){
      const height = this.get('height');
      const width = this.get('width');
      const video = this.get('video');
      const photo = this.get('photo');
      let streaming = this.get('streaming');
      let localstream;
      console.log(height, width, video, photo, streaming);
      //Prompts the user for permission to use a media device
      if(navigator.getMedia)  {       
        // constraints
        navigator.getMedia(
          { video: true, audio: false },
          // successCallback, function for handling users media stream
          function (stream) {               
            localstream = stream;
            //get video stream on firefox
            if (navigator.mozGetUserMedia) {
              //set video source to users camera stream
              video.mozSrcObject = stream;                  
            } else {
              //get video stream on other browsers
              var vendorURL = window.URL || window.webkitURL;         
              //set video source to users camera stream
              video.src = vendorURL.createObjectURL(stream);                       
            }
            video.play();
          },
          function (err) {
            console.log("Sorry, we are not able to use your camera.");
          }
        );
        //this event fire after video has been play. This sets the height and width of the video
        video.addEventListener('canplay', function (ev) {       
          if (!streaming) {
            video.setAttribute('width', width);
            video.setAttribute('height', height);
            streaming = true;
          }
        }, false);
      } else {
        alert("Your browser doesn't support HTML5 getUserMedia API");
      }
    },
    takepicture(){
      //create new canvas element
      const video = this.get('video');
      const photo = this.get('photo');
      let streaming = this.get('streaming');
      const height = this.get('height');
      const width = this.get('width');
      const canvas = document.getElementById("myCanvas");   
      canvas.width = width;
      canvas.height = height;

      //draw current video frame into canvas
      canvas.getContext('2d').drawImage(video, 0, 0, width, height);      
      //get drawing video frame from canvas to base64 image url
      var data = canvas.toDataURL('image/png');    
      //change photo source url
      photo.setAttribute('src', data);       
      document.querySelector('#download-pic').setAttribute("href", data);
      $('#upload-pic').prop("disabled", false);
        
    }
  }
});

application.template.hbs

<button id="capture-pic" onclick={{action "askPermission3"}}>Permission</button>
<video id="video" width="300" height="150"></video>
<button id="capture-pic" onclick={{action "takepicture"}}>Capture</button>
<img id="photo" alt="" /> <a id="download-pic" href="#" download="myimage.png">Download</a>
<button id="upload-pic" disabled="disabled">Upload</button>
<canvas id="myCanvas"></canvas>

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}