Merge pull request #549 from aashna27/Take-Photo-functionality

TakePhoto functionality added
publiclab · Dec 19, 2018 · 3e5cec3 · 3e5cec3
2 parents 980966e + 8a96bd8
commit 3e5cec3
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 4 deletions.
diff --git a/dist/image-sequencer.js b/dist/image-sequencer.js
@@ -61461,9 +61461,11 @@ function setInputStepInit() {
 
     var dropzone = $(options.dropZoneSelector);
     var fileInput = $(options.fileInputSelector);
+    var takePhoto = $(options.takePhotoSelector);
 
     var onLoad = options.onLoad;
-
+    var onTakePhoto = options.onTakePhoto;
+
     var reader = new FileReader();
 
     function handleFile(e) {
@@ -61481,8 +61483,53 @@ function setInputStepInit() {
 
       reader.readAsDataURL(file);
     }
+
+    function runVideo(){
+      /* event handler for Take-Photo */
+      document.getElementById('video').style.display='inline';
+      document.getElementById('capture').style.display='inline';
+      document.getElementById('close').style.display='inline';
+
+      var video = document.getElementById('video');
+      canvas = document.getElementById('canvas'),
+      context = canvas.getContext('2d'),
+      vendorUrl = window.URL || window.webkitURL;
+
+  navigator.getMedia = navigator.getUserMedia || navigator.wekitGetUserMedia ||
+                        navigator.mozGetUserMedia || navigator.msGetUserMedia;
+
+  navigator.getMedia({
+    video: true,
+    audio: false
+  }, function(stream){ // success callback
+    video.srcObject = stream;
+    video.onloadedmetadata = function(e) {
+       video.play();
+     };
+    document.getElementById('close').addEventListener('click', function () {
+      stopStream(stream);
+     });
+  }, function(error){ // error
+    console.log("error");
+  });
+
+  document.getElementById('capture').addEventListener('click', function(stream){
+    context.drawImage(video, 0, 0, 400, 300);
+    options.onTakePhoto(canvas.toDataURL());
+  });
+
+  function stopStream(stream) {
+    stream.getVideoTracks().forEach(function (track) {
+        track.stop();
+    });
+    document.getElementById('video').style.display='none';
+    document.getElementById('capture').style.display='none';
+    document.getElementById('close').style.display='none';
+  }
+}
 
     fileInput.on('change', handleFile);
+    takePhoto.on('click', runVideo);
 
     dropzone[0].addEventListener('drop', handleFile, false);
 

diff --git a/dist/image-sequencer.min.js b/dist/image-sequencer.min.js
diff --git a/examples/demo.js b/examples/demo.js
@@ -171,13 +171,20 @@ window.onload = function() {
   sequencer.setInputStep({
     dropZoneSelector: "#dropzone",
     fileInputSelector: "#fileInput",
+    takePhotoSelector: "#take-photo",
     onLoad: function onFileReaderLoad(progress) {
       var reader = progress.target;
       var step = sequencer.images.image1.steps[0];
       step.output.src = reader.result;
       sequencer.run({ index: 0 });
       step.options.step.imgElement.src = reader.result;
       updatePreviews(reader.result);
+    },
+    onTakePhoto: function (url) {
+      var step = sequencer.images.image1.steps[0];
+      step.output.src = url;
+      sequencer.run({ index: 0 });
+      step.options.step.imgElement.src = url;
     }
   });
 

diff --git a/examples/index.html b/examples/index.html
@@ -66,7 +66,12 @@ <h1>Image Sequencer</h1>
         <i>Select or drag in an image to start!</i>
       </p>
       <center>
-        <input type="file" id="fileInput" value="" accept="image/*">
+        <input type="file" id="fileInput" value="" accept="image/*"><br />
+        <button type="button" id="take-photo">Take a Photo</button>
+        <video  id="video" width="400" height="300" style="display:none"></video>
+        <a href="#" id="capture" style="display:none" class="btn btn-primary btn-md">Click Picture</a>
+        <a href="#" id="close" style="display:none" class="btn btn-default btn-md">Close</a>
+        <canvas id="canvas" width="400" height="300" style="display:none"></canvas>
       </center>
     </div>
 

diff --git a/src/ui/SetInputStep.js b/src/ui/SetInputStep.js
@@ -5,9 +5,11 @@ function setInputStepInit() {
 
     var dropzone = $(options.dropZoneSelector);
     var fileInput = $(options.fileInputSelector);
+    var takePhoto = $(options.takePhotoSelector);
 
     var onLoad = options.onLoad;
-
+    var onTakePhoto = options.onTakePhoto;
+
     var reader = new FileReader();
 
     function handleFile(e) {
@@ -25,8 +27,53 @@ function setInputStepInit() {
 
       reader.readAsDataURL(file);
     }
+
+    function runVideo(){
+      /* event handler for Take-Photo */
+      document.getElementById('video').style.display='inline';
+      document.getElementById('capture').style.display='inline';
+      document.getElementById('close').style.display='inline';
+
+      var video = document.getElementById('video');
+      canvas = document.getElementById('canvas'),
+      context = canvas.getContext('2d'),
+      vendorUrl = window.URL || window.webkitURL;
+
+  navigator.getMedia = navigator.getUserMedia || navigator.wekitGetUserMedia ||
+                        navigator.mozGetUserMedia || navigator.msGetUserMedia;
+
+  navigator.getMedia({
+    video: true,
+    audio: false
+  }, function(stream){ // success callback
+    video.srcObject = stream;
+    video.onloadedmetadata = function(e) {
+       video.play();
+     };
+    document.getElementById('close').addEventListener('click', function () {
+      stopStream(stream);
+     });
+  }, function(error){ // error
+    console.log("error");
+  });
+
+  document.getElementById('capture').addEventListener('click', function(stream){
+    context.drawImage(video, 0, 0, 400, 300);
+    options.onTakePhoto(canvas.toDataURL());
+  });
+
+  function stopStream(stream) {
+    stream.getVideoTracks().forEach(function (track) {
+        track.stop();
+    });
+    document.getElementById('video').style.display='none';
+    document.getElementById('capture').style.display='none';
+    document.getElementById('close').style.display='none';
+  }
+}
 
     fileInput.on('change', handleFile);
+    takePhoto.on('click', runVideo);
 
     dropzone[0].addEventListener('drop', handleFile, false);