open image from webcam

santhosh77h · Jul 28, 2018 · dd3b488 · dd3b488
1 parent 7e240e1
commit dd3b488
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 0 deletions.
diff --git a/src/js/config-menu.js b/src/js/config-menu.js
@@ -10,6 +10,7 @@ var menu_template = `
 					<ul>
 					<li><a class="trn dots" data-target="file/open.open_file" data-key="Drag&Drop" href="#">Open File</a></li>
 					<li><a class="trn dots" data-target="file/open.open_dir" href="#">Open Directory</a></li>
+					<li><a class="trn dots" data-target="file/open.open_webcam" href="#">Open from Webcam</a></li>
 					<li><a class="trn dots" data-target="file/open.open_url" href="#">Open URL</a></li>
 					<li><a class="trn dots" data-target="file/open.open_data_url" href="#">Open Data URL</a></li>
 					<li><a class="trn dots" data-target="file/open.open_template_test" href="#">Open test template</a></li>

diff --git a/src/js/libs/popup.js b/src/js/libs/popup.js
@@ -124,6 +124,11 @@ class Dialog_class {
 	 * hides dialog
 	 */
 	hide() {
+		var params = this.get_params();
+
+		if (this.oncancel) {
+			this.oncancel(params);
+		}
 		document.getElementById("popup").style.display = 'none';
 		this.parameters = [];
 		this.active = false;

diff --git a/src/js/modules/file/open.js b/src/js/modules/file/open.js
@@ -79,6 +79,74 @@ class File_open_class {
 		//force click
 		document.querySelector('#file_open').click();
 	}
+
+	open_webcam(){
+		var _this = this;
+		var video = document.createElement('video');
+		video.autoplay = true;
+		video.style.maxWidth = '100%';
+		var track = null;
+
+		function handleSuccess(stream) {	
+			track = stream.getTracks()[0];
+			video.srcObject = stream;	
+		}
+
+		function handleError(error) {
+			alertify.error('Sorry, cold not load getUserMedia() data: ' + error);
+		}
+
+		var settings = {
+			title: 'Webcam',
+			params: [
+				{title: "Stream:", html: '<div id="webcam_container"></div>'},
+			],
+			on_load: function(params){
+				document.getElementById('webcam_container').appendChild(video);
+			},
+			on_finish: function(params){
+				//capture data
+				var width = video.videoWidth;
+				var height = video.videoHeight;
+
+				var tmpCanvas = document.createElement('canvas');
+				var tmpCanvasCtx = tmpCanvas.getContext("2d");
+				tmpCanvas.width = width;
+				tmpCanvas.height = height;
+				tmpCanvasCtx.drawImage(video, 0, 0);
+
+				//create requested layer
+				var new_layer = {
+					name: "Webcam #" + _this.Base_layers.auto_increment,
+					type: 'image',
+					data: tmpCanvas.toDataURL("image/png"),
+					width: width,
+					height: height,
+					width_original: width,
+					height_original: height,
+				};
+				this.Base_layers.insert(new_layer);
+				_this.Base_layers.autoresize(width, height);
+
+				//destroy
+				track.stop();
+				video.pause();
+				video.src = "";
+				video.load();
+			},
+			on_cancel: function(params){
+				track.stop();
+				video.pause();
+				video.src = "";
+				video.load();
+			},
+		};
+		this.POP.show(settings);
+
+		navigator.mediaDevices.getUserMedia({audio: false, video: true})
+			.then(handleSuccess)
+			.catch(handleError);
+	}
 
 	open_dir() {
 		var _this = this;