From bceab2315c3a0704ce0d933e2a47c4ef3940fef3 Mon Sep 17 00:00:00 2001
From: Benjamin RICHARD <richard.tribes@gmail.com>
Date: Thu, 11 Feb 2016 14:43:09 +0100
Subject: [PATCH 1/3] provide a way to get access to photo content and to call
 closeAndCallback function to allow the template remove from DOM It also add a
 way to specify options using Meteor.settings.public.Meteor.Camera : { camera:
 {type: "front"/"back", width: 640, height: 480, quality: 80, viewFinder:
 {width: 320, height: 240}}

---
 packages/mdg:camera/photo-browser.js | 179 +++++++++++++++++++++------
 packages/mdg:camera/photo.html       | 166 ++++++++++++-------------
 packages/mdg:camera/photo.js         |  67 +++++++++-
 3 files changed, 291 insertions(+), 121 deletions(-)

diff --git a/packages/mdg:camera/photo-browser.js b/packages/mdg:camera/photo-browser.js
index b54cead..7b130d1 100644
--- a/packages/mdg:camera/photo-browser.js
+++ b/packages/mdg:camera/photo-browser.js
@@ -1,5 +1,35 @@
-var stream;
-var closeAndCallback;
+// merge defaults settings with Meteor settings if exists
+var settings = (function(defaults) {
+  var settings =
+  {
+    camera: {
+      type: "back",
+      width: 640,
+      height: 480
+    },
+    quality: 80,
+    viewFinder: {
+        width: 320,
+        height: 240
+    }
+  };
+
+  if (!defaults) return settings;
+
+  if (defaults.camera) {
+    settings.camera = _.extend(settings.camera, defaults.camera);
+  }
+
+  if (defaults.quality && check(defaults.quality, Number)) {
+    settings.quality = defaults.quality;
+  }
+
+  if (defaults.viewFinder) {
+    settings.viewFinder = _.extend(settings.viewFinder, defaults.viewFinder);
+  }
+
+  return settings;
+})(Meteor.settings.public.MeteorCamera);
 
 var photo = new ReactiveVar(null);
 var error = new ReactiveVar(null);
@@ -8,9 +38,7 @@ var waitingForPermission = new ReactiveVar(null);
 var canvasWidth = 0;
 var canvasHeight = 0;
 
-var quality = 80;
-
-Template.viewfinder.rendered = function() {
+Template.viewfinder.onRendered(function() {
   var template = this;
 
   waitingForPermission.set(true);
@@ -19,13 +47,13 @@ Template.viewfinder.rendered = function() {
 
   // stream webcam video to the <video> element
   var success = function(newStream) {
-    stream = newStream;
+    MeteorCamera.setStream(newStream);
 
     if (navigator.mozGetUserMedia) {
-      video.mozSrcObject = stream;
+      video.mozSrcObject = MeteorCamera.getStream();
     } else {
       var vendorURL = window.URL || window.webkitURL;
-      video.src = vendorURL.createObjectURL(stream);
+      video.src = vendorURL.createObjectURL(MeteorCamera.getStream());
     }
     video.play();
 
@@ -51,25 +79,71 @@ Template.viewfinder.rendered = function() {
     return;
   }
 
-  // initiate request for webcam
-  navigator.getUserMedia({
+  /**
+   * Hack to force Wished camera
+   */
+  var wishedCameraSource;
+  var gotWishedCameraSource = function (sourceInfos) {
+    for (var i = 0; i < sourceInfos.length; ++i) {
+      var sourceInfo = sourceInfos[i];
+      var option = document.createElement('option');
+      option.value = sourceInfo.id;
+
+      console.log("sourceInfo", i, sourceInfo, sourceInfo.kind);
+
+      if (sourceInfo.kind == 'video') {
+        wishedCameraSource = sourceInfo;
+        var isWished = sourceInfo.label.match(settings.camera.type);
+        console.log("source id", wishedCameraSource, isWished);
+
+        if (isWished) {
+          console.log("wished found, break loop", wishedCameraSource, isWished);
+          i = sourceInfos.length;
+          return;
+        }
+      }
+    }
+
+    if (!wishedCameraSource) {
+      failure("VIDEO_NOT_SUPPORTED");
+      return;
+    }
+
+    // initiate request for webcam
+    var userMediaConfig = {
+      video: {
+        optional: [{
+          sourceId: wishedCameraSource.id
+        }]
+      },
+      audio: false
+    };
+
+    navigator.getUserMedia(userMediaConfig, success, failure);
+  };
+
+  // @TODO : be compliant with mobile IE/Safari/Other and not only Chrome
+  if (MediaStreamTrack) {
+    MediaStreamTrack.getSources(gotWishedCameraSource);
+  } else {
+    // initiate request for webcam
+    navigator.getUserMedia({
       video: true,
       audio: false
-  }, success, failure);
+    }, success, failure);
+  }
 
   // resize viewfinder to a reasonable size, not necessarily photo size
-  var viewfinderWidth = 320;
-  var viewfinderHeight = 240;
   var resized = false;
+
   video.addEventListener('canplay', function() {
     if (! resized) {
-      viewfinderHeight = video.videoHeight / (video.videoWidth / viewfinderWidth);
-      video.setAttribute('width', viewfinderWidth);
-      video.setAttribute('height', viewfinderHeight);
+      video.setAttribute('width', settings.viewFinder.width);
+      video.setAttribute('height', (video.videoHeight / (video.videoWidth / settings.viewFinder.width)));
       resized = true;
     }
   }, false);
-};
+});
 
 // is the current error a permission denied error?
 var permissionDeniedError = function () {
@@ -81,7 +155,8 @@ var permissionDeniedError = function () {
 
 // is the current error a browser not supported error?
 var browserNotSupportedError = function () {
-  return error.get() && error.get() === "BROWSER_NOT_SUPPORTED";
+  return error.get() && error.get() === "BROWSER_NOT_SUPPORTED" ||
+    error.get() === "VIDEO_NOT_SUPPORTED"; // HTML5 feature ok, but no camera available on device
 };
 
 Template.camera.helpers({
@@ -97,25 +172,58 @@ Template.camera.helpers({
 
 Template.camera.events({
   "click .use-photo": function () {
-    closeAndCallback(null, photo.get());
+    MeteorCamera.closeAndCallback(null, photo.get());
   },
   "click .new-photo": function () {
     photo.set(null);
   },
   "click .cancel": function () {
     if (permissionDeniedError()) {
-      closeAndCallback(new Meteor.Error("permissionDenied", "Camera permissions were denied."));
+      MeteorCamera.closeAndCallback(new Meteor.Error("permissionDenied", "Camera permissions were denied."));
     } else if (browserNotSupportedError()) {
-      closeAndCallback(new Meteor.Error("browserNotSupported", "This browser isn't supported."));
+      MeteorCamera.closeAndCallback(new Meteor.Error("browserNotSupported", "This browser isn't supported."));
     } else if (error.get()) {
-      closeAndCallback(new Meteor.Error("unknownError", "There was an error while accessing the camera."));
+      MeteorCamera.closeAndCallback(new Meteor.Error("unknownError", "There was an error while accessing the camera."));
     } else {
-      closeAndCallback(new Meteor.Error("cancel", "Photo taking was cancelled."));
+      MeteorCamera.closeAndCallback(new Meteor.Error("cancel", "Photo taking was cancelled."));
     }
-    
-    if (stream) {
-      stream.stop();
+  },
+  "change #videofallback": function(ev, tpl) {
+    var files = ev.currentTarget.files; // FileList
+    if(!files.length){
+      error.set("Please, click on browse button to select a file.");
+      return;
     }
+
+    var reader  = new FileReader();
+    reader.addEventListener("load", function () {
+      photo.set(reader.result);
+    }, false);
+
+    if (files[0]) {
+      reader.readAsDataURL(files[0]);
+    }
+/*
+    var vendorURL = window.URL || window.webkitURL;
+    var imageUrl = vendorURL.createObjectURL(files[0]);
+    var image = new Image();
+    image.src = imageUrl;
+
+    var canvas = tpl.find("canvas");
+
+    var fileCanvasWidth = canvas.width / image.width;
+    var fileCanvasHeight = canvas.height / image.height;
+    var ratio = Math.min(fileCanvasWidth, fileCanvasHeight);
+
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+    canvas.getContext('2d').drawImage(image,
+      0, 0, image.width, image.height,
+      0, 0, image.width*ratio, image.height*ratio);
+    var data = canvas.toDataURL('image/jpeg', settings.quality);
+    photo.set(imageUrl /*data* /);
+ */
+
   }
 });
 
@@ -127,9 +235,9 @@ Template.viewfinder.events({
     canvas.width = canvasWidth;
     canvas.height = canvasHeight;
     canvas.getContext('2d').drawImage(video, 0, 0, canvasWidth, canvasHeight);
-    var data = canvas.toDataURL('image/jpeg', quality);
+    var data = canvas.toDataURL('image/jpeg', settings.quality);
     photo.set(data);
-    stream.stop();
+    MeteorCamera.stopStream();
   }
 });
 
@@ -176,14 +284,11 @@ MeteorCamera.getPicture = function (options, callback) {
   canvasHeight = Math.round(canvasHeight);
 
   var view;
-  
-  closeAndCallback = function () {
-    var originalArgs = arguments;
-    UI.remove(view);
-    photo.set(null);
-    callback.apply(null, originalArgs);
-  };
-  
+
   view = UI.renderWithData(Template.camera);
   UI.insert(view, document.body);
-};
+  MeteorCamera
+    .setView(view)
+    .setPhoto(photo)
+    .setCallback(callback);
+};
\ No newline at end of file
diff --git a/packages/mdg:camera/photo.html b/packages/mdg:camera/photo.html
index a29ccf0..22f44e7 100644
--- a/packages/mdg:camera/photo.html
+++ b/packages/mdg:camera/photo.html
@@ -1,83 +1,83 @@
-<template name="camera">
-  <div class="camera-overlay">
-    {{! used to make the background dark}}
-  </div>
-
-  <div class="camera-popup {{#if permissionDeniedError}}camera-popup-wide{{/if}}">
-    {{#if error}}
-      {{#if permissionDeniedError}}
-        {{> permissionDenied}}
-      {{else}}
-        {{#if browserNotSupportedError}}
-          {{> genericError message="Sorry, this browser is currently not supported for camera functionality."}}
-        {{else}}
-          {{> genericError message="There was an error accessing the camera."}}
-        {{/if}}
-      {{/if}}
-    {{else}}
-      {{#if photo}}
-        <div class="center">
-          <img src="{{photo}}" class="photo-preview" />
-          <div>
-            <button class="button use-photo">Use Photo</button>
-            <button class="button new-photo">Take New Photo</button>
-          </div>
-        </div>
-      {{else}}
-        {{> viewfinder}}
-      {{/if}}
-    {{/if}}
-  </div>
-</template>
-
-<template name="viewfinder">
-  <div class="viewfinder">
-    <video id="video" class="{{#if waitingForPermission}}hidden{{/if}}">
-      </video>
-    
-    <div>
-      {{#if waitingForPermission}}
-        <p>Waiting for camera permissions...</p>
-      {{else}}
-        <button class="button shutter">Take Photo</button>
-      {{/if}}
-      <button class="button cancel">Cancel</button>
-    </div>
-  </div>
-
-  <canvas id="canvas" style="visibility: hidden"></canvas>
-</template>
-
-<template name="genericError">
-  <div class="generic-error">
-    <p>{{message}}</p>
-    <button class="button cancel">Close Popup</button>
-  </div>
-</template>
-
-<template name="permissionDenied">
-  <div class="permission-denied-error">
-    <h2>Camera Permissions Denied</h2>
-
-    <p>
-      You have denied this app permission to use your camera.
-      If you would like to allow permissions, follow the directions for your
-      browser below.
-    </p>
-
-    <dl class="permissions-howto">
-      <dt>Google Chrome</dt>
-        <dd>Go to Settings > "Show advanced settings..." >
-          "Content settings..." > Media heading > "Manage exceptions...",
-          then find this website in the list and allow video capture.</dd>
-      <dt>Mozilla Firefox</dt>
-        <dd>Reload the page and try again.</dd>
-      <dt>Opera</dt>
-        <dd>Go to Preferences > Websites > Media heading >
-          "Manage exceptions...", then find this website in the list and
-          allow video capture.</dd>
-    </dl>
-
-    <button class="button cancel">Close Popup</button>
-  </div>
-</template>
+<template name="camera">
+  <div class="camera-overlay">
+    {{! used to make the background dark}}
+  </div>
+
+  <div class="camera-popup {{#if permissionDeniedError}}camera-popup-wide{{/if}}">
+    {{#if error}}
+      {{#if permissionDeniedError}}
+        {{> permissionDenied}}
+      {{else}}
+        {{#if browserNotSupportedError}}
+          {{> genericError message="Sorry, this browser is currently not supported for camera functionality."}}
+          {{else}}
+            {{> genericError message="There was an error accessing the camera."}}
+          {{/if}}
+        {{/if}}
+        <input type="file" accept="image/*" multiple="false" id="videofallback">
+      {{/if}}
+      {{#if photo}}
+        <div class="center">
+          <img src="{{photo}}" class="photo-preview" />
+          <div>
+            <button class="button use-photo">Use Photo</button>
+            <button class="button new-photo">Take New Photo</button>
+          </div>
+        </div>
+      {{else}}
+        {{> viewfinder}}
+      {{/if}}
+  </div>
+</template>
+
+<template name="viewfinder">
+  <div class="viewfinder">
+    <video id="video" class="{{#if waitingForPermission}}hidden{{/if}}">
+      </video>
+    
+    <div>
+      {{#if waitingForPermission}}
+        <p>Waiting for camera permissions...</p>
+      {{else}}
+        <button class="button shutter">Take Photo</button>
+      {{/if}}
+      <button class="button cancel">Cancel</button>
+    </div>
+  </div>
+
+  <canvas id="canvas" style="visibility: hidden"></canvas>
+</template>
+
+<template name="genericError">
+  <div class="generic-error">
+    <p>{{message}}</p>
+    <button class="button cancel">Close Popup</button>
+  </div>
+</template>
+
+<template name="permissionDenied">
+  <div class="permission-denied-error">
+    <h2>Camera Permissions Denied</h2>
+
+    <p>
+      You have denied this app permission to use your camera.
+      If you would like to allow permissions, follow the directions for your 
+      browser below.
+    </p>
+
+    <dl class="permissions-howto">
+      <dt>Google Chrome</dt>
+        <dd>Go to Settings > "Show advanced settings..." >
+          "Content settings..." > Media heading > "Manage exceptions...",
+          then find this website in the list and allow video capture.</dd>
+      <dt>Mozilla Firefox</dt>
+        <dd>Reload the page and try again.</dd>
+      <dt>Opera</dt>
+        <dd>Go to Preferences > Websites > Media heading >
+          "Manage exceptions...", then find this website in the list and
+          allow video capture.</dd>
+    </dl>
+
+    <button class="button cancel">Close Popup</button>
+  </div>
+</template>
diff --git a/packages/mdg:camera/photo.js b/packages/mdg:camera/photo.js
index fa058a0..b0e8c6b 100644
--- a/packages/mdg:camera/photo.js
+++ b/packages/mdg:camera/photo.js
@@ -1 +1,66 @@
-MeteorCamera = {};
\ No newline at end of file
+MeteorCamera = (function() {
+  if (!UI) throw new Meteor.Error('Missing UI package');
+
+  var myStream,
+    myView,
+    myPhoto,
+    myCallback;
+
+  return {
+    closeAndCallback: function () {
+      var originalArgs = arguments;
+      if (myView) UI.remove(myView);
+      if (myPhoto) myPhoto.set(null);
+      if (myCallback) myCallback.apply(null, originalArgs);
+
+      this.stopStream();
+    },
+
+    setView: function (view) {
+      myView = view;
+      return this;
+    },
+
+    setPhoto: function (photo) {
+      myPhoto = photo;
+      return this;
+    },
+
+    getPhoto: function () {
+      return myPhoto;
+    },
+
+    setCallback: function (cb) {
+      myCallback = cb;
+      return this;
+    },
+
+    setStream: function (stream) {
+      myStream = stream;
+      return this;
+    },
+
+    getStream: function () {
+      return myStream;
+    },
+
+    stopStream: function() {
+      if (!myStream) return;
+
+      if(myStream.stop) {
+        myStream.stop();
+        return;
+      }
+
+      if(!myStream.getTracks) return;
+
+      var tracks = myStream.getTracks();
+      for(var i = 0; i < tracks.length; i++) {
+        var track = tracks[i];
+        if(track && track.stop) {
+          track.stop();
+        }
+      }
+    }
+  }
+})();
\ No newline at end of file

From 61e383bff321baf7b7d06a5357dbf7617559e33d Mon Sep 17 00:00:00 2001
From: Benjamin RICHARD <richard.tribes@gmail.com>
Date: Thu, 11 Feb 2016 16:25:19 +0100
Subject: [PATCH 2/3] missing cameraFallback

---
 packages/mdg:camera/photo.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/mdg:camera/photo.html b/packages/mdg:camera/photo.html
index 22f44e7..a4fc7ef 100644
--- a/packages/mdg:camera/photo.html
+++ b/packages/mdg:camera/photo.html
@@ -14,7 +14,7 @@
             {{> genericError message="There was an error accessing the camera."}}
           {{/if}}
         {{/if}}
-        <input type="file" accept="image/*" multiple="false" id="videofallback">
+        {{> cameraFallback}}
       {{/if}}
       {{#if photo}}
         <div class="center">
@@ -30,6 +30,15 @@
   </div>
 </template>
 
+<template name="cameraFallback">
+  <input type="file" accept="image/*" multiple="false" id="videofallback"/>
+  {{>cameraCanvas}}
+</template>
+
+<template name="cameraCanvas">
+  <canvas id="canvas" style="visibility: hidden;"></canvas>
+</template>
+
 <template name="viewfinder">
   <div class="viewfinder">
     <video id="video" class="{{#if waitingForPermission}}hidden{{/if}}">
@@ -45,7 +54,7 @@
     </div>
   </div>
 
-  <canvas id="canvas" style="visibility: hidden"></canvas>
+  {{> cameraCanvas}}
 </template>
 
 <template name="genericError">

From 38ba722529f6f8861c5ccb41566a40b84902ddaf Mon Sep 17 00:00:00 2001
From: Benjamin RICHARD <richard.tribes@gmail.com>
Date: Thu, 11 Feb 2016 16:31:30 +0100
Subject: [PATCH 3/3] add one explanation to maybe remove a part of code

---
 packages/mdg:camera/photo-browser.js | 27 ++++-----------------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/packages/mdg:camera/photo-browser.js b/packages/mdg:camera/photo-browser.js
index 7b130d1..fdfb94d 100644
--- a/packages/mdg:camera/photo-browser.js
+++ b/packages/mdg:camera/photo-browser.js
@@ -188,6 +188,8 @@ Template.camera.events({
       MeteorCamera.closeAndCallback(new Meteor.Error("cancel", "Photo taking was cancelled."));
     }
   },
+
+  // This part could be moved outside this package and each dev could add its own logic, because with MeteorCamera object he gets all he needs
   "change #videofallback": function(ev, tpl) {
     var files = ev.currentTarget.files; // FileList
     if(!files.length){
@@ -197,33 +199,12 @@ Template.camera.events({
 
     var reader  = new FileReader();
     reader.addEventListener("load", function () {
-      photo.set(reader.result);
+      MeteorCamera.getPhoto().set(reader.result);
     }, false);
 
     if (files[0]) {
       reader.readAsDataURL(files[0]);
     }
-/*
-    var vendorURL = window.URL || window.webkitURL;
-    var imageUrl = vendorURL.createObjectURL(files[0]);
-    var image = new Image();
-    image.src = imageUrl;
-
-    var canvas = tpl.find("canvas");
-
-    var fileCanvasWidth = canvas.width / image.width;
-    var fileCanvasHeight = canvas.height / image.height;
-    var ratio = Math.min(fileCanvasWidth, fileCanvasHeight);
-
-    canvas.width = canvasWidth;
-    canvas.height = canvasHeight;
-    canvas.getContext('2d').drawImage(image,
-      0, 0, image.width, image.height,
-      0, 0, image.width*ratio, image.height*ratio);
-    var data = canvas.toDataURL('image/jpeg', settings.quality);
-    photo.set(imageUrl /*data* /);
- */
-
   }
 });
 
@@ -291,4 +272,4 @@ MeteorCamera.getPicture = function (options, callback) {
     .setView(view)
     .setPhoto(photo)
     .setCallback(callback);
-};
\ No newline at end of file
+};