Version 1.0.5: Now supporting the new navigator.mediaDevices API, wit…

…h backwards compatibility for the now-deprecated navigator.getUserMedia. Added 'demos/reset.html' for showing how the camera can be reset and released without leaving the page.
jhuckaby · Nov 15, 2015 · 1bc9ac5 · 1bc9ac5
1 parent 1934f01
commit 1bc9ac5
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 29 deletions.
diff --git a/build.sh b/build.sh
@@ -3,4 +3,4 @@
 # Build Script for WebcamJS
 # Install uglifyjs first: sudo npm install uglify-js -g
 
-uglifyjs webcam.js -o webcam.min.js --mangle --reserved "Webcam" --preamble "// WebcamJS v1.0.4 - http://github.com/jhuckaby/webcamjs - MIT Licensed"
+uglifyjs webcam.js -o webcam.min.js --mangle --reserved "Webcam" --preamble "// WebcamJS v1.0.5 - http://github.com/jhuckaby/webcamjs - MIT Licensed"
diff --git a/demos/reset.html b/demos/reset.html
@@ -0,0 +1,57 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>WebcamJS Test Page</title>
+	<style type="text/css">
+		body { font-family: Helvetica, sans-serif; }
+		h2, h3 { margin-top:0; }
+		form { margin-top: 15px; }
+		form > input { margin-right: 15px; }
+		#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
+	</style>
+</head>
+<body>
+	<div id="results">Your captured image will appear here...</div>
+
+	<h1>WebcamJS Test Page</h1>
+	<h3>Demonstrates simple 320x240 capture &amp; display</h3>
+
+	<div id="my_camera"></div>
+
+	<!-- First, include the Webcam.js JavaScript Library -->
+	<script type="text/javascript" src="../webcam.js"></script>
+
+	<!-- Configure a few settings and attach camera -->
+	<script language="JavaScript">
+		Webcam.set({
+			width: 320,
+			height: 240,
+			image_format: 'jpeg',
+			jpeg_quality: 90
+		});
+		Webcam.attach( '#my_camera' );
+	</script>
+
+	<!-- A button for taking snaps -->
+	<form>
+		<input type=button value="Reset" onClick="Webcam.reset()">
+		<input type=button value="Take Snapshot" onClick="take_snapshot()">
+	</form>
+
+	<!-- Code to handle taking the snapshot and displaying it locally -->
+	<script language="JavaScript">
+		function take_snapshot() {
+			// take snapshot and get image data
+			Webcam.snap( function(data_uri) {
+				// display results in page
+				document.getElementById('results').innerHTML = 
+					'<h2>Here is your image:</h2>' + 
+					'<img src="'+data_uri+'"/>';
+			} );
+		}
+	</script>
+
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "webcamjs",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"description": "HTML5 Webcam Image Capture Library with Flash Fallback",
 	"author": "Joseph Huckaby <[email protected]>",
 	"homepage": "https://github.com/jhuckaby/webcamjs",

diff --git a/webcam.js b/webcam.js
@@ -1,4 +1,4 @@
-// WebcamJS v1.0.4
+// WebcamJS v1.0.5
 // Webcam library for capturing JPEG/PNG images in JavaScript
 // Attempts getUserMedia, falls back to Flash
 // Author: Joseph Huckaby: http://github.com/jhuckaby
@@ -9,7 +9,7 @@
 (function(window) {
 
 var Webcam = {
-	version: '1.0.4',
+	version: '1.0.5',
 
 	// globals
 	protocol: location.protocol.match(/https/i) ? 'https' : 'http',
@@ -21,15 +21,15 @@ var Webcam = {
 	params: {
 		width: 0,
 		height: 0,
-		dest_width: 0,        // size of captured image
-		dest_height: 0,       // these default to width/height
-		image_format: 'jpeg', // image format (may be jpeg or png)
-		jpeg_quality: 90,     // jpeg image quality from 0 (worst) to 100 (best)
-		force_flash: false,   // force flash mode,
-		flip_horiz: false,    // flip image horiz (mirror mode)
-		fps: 30,              // camera frames per second
+		dest_width: 0,         // size of captured image
+		dest_height: 0,        // these default to width/height
+		image_format: 'jpeg',  // image format (may be jpeg or png)
+		jpeg_quality: 90,      // jpeg image quality from 0 (worst) to 100 (best)
+		force_flash: false,    // force flash mode,
+		flip_horiz: false,     // flip image horiz (mirror mode)
+		fps: 30,               // camera frames per second
 		upload_name: 'webcam', // name of file in upload post data
-		constraints: null     // custom user media constraints
+		constraints: null      // custom user media constraints
 	},
 
 	hooks: {}, // callback hook functions
@@ -38,10 +38,19 @@ var Webcam = {
 		// initialize, check for getUserMedia support
 		var self = this;
 
-		navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
-		window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+		// Setup getUserMedia, with polyfill for older browsers
+		// From: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+		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);
 
-		this.userMedia = this.userMedia && !!navigator.getUserMedia && !!window.URL;
+		window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+		this.userMedia = this.userMedia && !!navigator.mediaDevices && !!window.URL;
 
 		// Older versions of firefox (< 21) apparently claim support but user media does not actually work
 		if (navigator.userAgent.match(/Firefox\D+(\d+)/)) {
@@ -118,27 +127,27 @@ var Webcam = {
 
 			// ask user for access to their camera
 			var self = this;
-			navigator.getUserMedia({
+			navigator.mediaDevices.getUserMedia({
 				"audio": false,
 				"video": this.params.constraints || {
 					mandatory: {
 						minWidth: this.params.dest_width,
 						minHeight: this.params.dest_height
 					}
 				}
-			}, 
-			function(stream) {
+			})
+			.then( function(stream) {
 				// got access, attach stream to video
 				video.src = window.URL.createObjectURL( stream ) || stream;
-				Webcam.stream = stream;
-				Webcam.loaded = true;
-				Webcam.live = true;
-				Webcam.dispatch('load');
-				Webcam.dispatch('live');
-				Webcam.flip();
-			},
-			function(err) {
-				return self.dispatch('error', "Could not access webcam.", err);
+				self.stream = stream;
+				self.loaded = true;
+				self.live = true;
+				self.dispatch('load');
+				self.dispatch('live');
+				self.flip();
+			})
+			.catch( function(err) {
+				return self.dispatch('error', "Could not access webcam: " + err.name + ": " + err.message, err);
 			});
 		}
 		else {

diff --git a/webcam.min.js b/webcam.min.js