fromCamera working; experimenting with zoom

src/input/PixelCapture.js

@@ -2,6 +2,7 @@ import {
     computeGray
 } from '../common/cv_utils';
 import {sleep} from '../common/utils';
+import {getViewport} from '../common/utils';
 
 function adjustCanvasSize(input, canvas) {
     if (input instanceof HTMLVideoElement) {
@@ -25,18 +26,8 @@ function adjustCanvasSize(input, canvas) {
     }
 }
 
-function getViewPort(target) {
-    if (target && target.nodeName && target.nodeType === 1) {
-        return target;
-    } else {
-        // Use '#interactive.viewport' as a fallback selector (backwards compatibility)
-        var selector = typeof target === 'string' ? target : '#interactive.viewport';
-        return document.querySelector(selector);
-    }
-}
-
 function getOrCreateCanvas(source, target) {
-    const $viewport = getViewPort(target);
+    const $viewport = getViewport(target);
     let $canvas = $viewport.querySelector("canvas.imgBuffer");
     if (!$canvas) {
         $canvas = document.createElement("canvas");

src/input/Source.js

@@ -1,21 +1,40 @@
+import {clone} from 'lodash';
 import {determineOrientation, PORTRAIT} from '../common/device';
 import CameraAccess from './camera_access';
+import {getViewport} from '../common/utils';
+
+function getOrCreateVideo(source, target) {
+    const $viewport = getViewport(target);
+    if ($viewport) {
+        let $video = $viewport.querySelector("video");
+        if (!$video) {
+            $video = document.createElement("video");
+            $viewport.appendChild($video);
+        }
+        return $video;
+    }
+    return document.createElement("video");
+}
 
 export function fromCamera(constraints) {
-    if (!constraints) {
-        constraints = {width: {ideal: 540}, height: {ideal: 540}, aspectRatio: {ideal: 1}, facingMode: 'environment'};
-    }
     var orientation = determineOrientation();
-    var videoConstraints = constraints;
+    var videoConstraints = clone(constraints);
     if (orientation === PORTRAIT) {
-        constraints = Object.assign({}, constraints, {
-            width: constraints.height,
-            height: constraints.width,
+        videoConstraints = Object.assign({}, videoConstraints, {
+            width: videoConstraints.height,
+            height: videoConstraints.width,
         });
     }
 
-    const video = document.querySelector('video');
-    CameraAccess.request(videoConstraints, video)
+    if (videoConstraints.zoom && videoConstraints.zoom.exact > 1) {
+        videoConstraints.width.ideal = Math.floor(videoConstraints.width.ideal * videoConstraints.zoom.exact);
+        videoConstraints.height.ideal = Math.floor(videoConstraints.height.ideal * videoConstraints.zoom.exact);
+        delete videoConstraints.zoom;
+    }
+    console.log(videoConstraints);
+
+    const video = getOrCreateVideo();
+    return CameraAccess.request(video, videoConstraints)
     .then(function(mediastream) {
         const track = mediastream.getVideoTracks()[0];
         return {
@@ -39,8 +58,8 @@ export function fromCamera(constraints) {
                 return {
                     viewport,
                     canvas: {
-                        width: constraints.width,     // AR
-                        height: constraints.height,   // AR
+                        width: viewport.width,     // AR
+                        height: viewport.height,   // AR
                     },
                 };
             },
@@ -65,7 +84,7 @@ export function fromCamera(constraints) {
                     constraints.height.ideal = Math.floor(constraints.height.ideal * constraints.zoom.exact);
                     delete constraints.zoom;
                 }
-                return CameraAccess.request(videoConstraints, video);
+                return CameraAccess.request(video, videoConstraints);
             },
             getLabel: function() {
                 return track.label;

src/input/camera_access.js

@@ -10,7 +10,7 @@ var streamRef;
 
 function waitForVideo(video, stream) {
     return new Promise((resolve, reject) => {
-        let attempts = 10;
+        let attempts = 20;
 
         function checkVideo() {
             if (attempts > 0) {
@@ -20,7 +20,7 @@ function waitForVideo(video, stream) {
                     }
                     resolve(stream);
                 } else {
-                    window.setTimeout(checkVideo, 500);
+                    window.setTimeout(checkVideo, 200);
                 }
             } else {
                 reject('Unable to play video stream. Is webcam working?');