// WebcamJS v1.0.16 // Webcam library for capturing JPEG/PNG images in JavaScript // Attempts getUserMedia, falls back to Flash // Author: Joseph Huckaby: http://github.com/jhuckaby // Based on JPEGCam: http://code.google.com/p/jpegcam/ // Copyright (c) 2012 - 2016 Joseph Huckaby // Licensed under the MIT License (function(window) { var _userMedia; // declare error types // inheritance pattern here: // https://stackoverflow.com/questions/783818/how-do-i-create-a-custom-error-in-javascript function FlashError() { var temp = Error.apply(this, arguments); temp.name = this.name = "FlashError"; this.stack = temp.stack; this.message = temp.message; } function WebcamError() { var temp = Error.apply(this, arguments); temp.name = this.name = "WebcamError"; this.stack = temp.stack; this.message = temp.message; } IntermediateInheritor = function() {}; IntermediateInheritor.prototype = Error.prototype; FlashError.prototype = new IntermediateInheritor(); WebcamError.prototype = new IntermediateInheritor(); var Webcam = { version: '1.0.16', // globals protocol: location.protocol.match(/https/i) ? 'https' : 'http', loaded: false, // true when webcam movie finishes loading live: false, // true when webcam is initialized and ready to snap userMedia: true, // true when getUserMedia is supported natively 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) enable_flash: true, // enable flash fallback, 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, swfURL: '', // URI to webcam.swf movie (defaults to the js location) flashNotDetectedText: 'ERROR: No Adobe Flash Player detected. Webcam.js relies on Flash for browsers that do not support getUserMedia (like yours).', noInterfaceFoundText: 'No supported webcam interface found.', unfreeze_snap: true // Whether to unfreeze the camera after snap (defaults to true) }, errors: { FlashError: FlashError, WebcamError: WebcamError }, hooks: {}, // callback hook functions init: function() { // initialize, check for getUserMedia support var self = this; // Setup getUserMedia, with polyfill for older browsers // Adapted from: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia this.mediaDevices = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ? 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); window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; this.userMedia = this.userMedia && !!this.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+)/)) { if (parseInt(RegExp.$1, 10) < 21) this.userMedia = null; } // Make sure media stream is closed when navigating away from page if (this.userMedia) { window.addEventListener( 'beforeunload', function(event) { self.reset(); } ); } }, attach: function(elem) { // create webcam preview and attach to DOM element // pass in actual DOM reference, ID, or CSS selector if (typeof(elem) == 'string') { elem = document.getElementById(elem) || document.querySelector(elem); } if (!elem) { return this.dispatch('error', new WebcamError("Could not locate DOM element to attach to.")); } this.container = elem; elem.innerHTML = ''; // start with empty element // insert "peg" so we can insert our preview canvas adjacent to it later on var peg = document.createElement('div'); elem.appendChild( peg ); this.peg = peg; // set width/height if not already set if (!this.params.width) this.params.width = elem.offsetWidth; if (!this.params.height) this.params.height = elem.offsetHeight; // make sure we have a nonzero width and height at this point if (!this.params.width || !this.params.height) { return this.dispatch('error', new WebcamError("No width and/or height for webcam. Please call set() first, or attach to a visible element.")); } // set defaults for dest_width / dest_height if not set if (!this.params.dest_width) this.params.dest_width = this.params.width; if (!this.params.dest_height) this.params.dest_height = this.params.height; this.userMedia = _userMedia === undefined ? this.userMedia : _userMedia; // if force_flash is set, disable userMedia if (this.params.force_flash) { _userMedia = this.userMedia; this.userMedia = null; } // check for default fps if (typeof this.params.fps !== "number") this.params.fps = 30; // adjust scale if dest_width or dest_height is different var scaleX = this.params.width / this.params.dest_width; var scaleY = this.params.height / this.params.dest_height; if (this.userMedia) { // setup webcam video container var video = document.createElement('video'); video.setAttribute('autoplay', 'autoplay'); video.style.width = '' + this.params.dest_width + 'px'; video.style.height = '' + this.params.dest_height + 'px'; if ((scaleX != 1.0) || (scaleY != 1.0)) { elem.style.overflow = 'hidden'; video.style.webkitTransformOrigin = '0px 0px'; video.style.mozTransformOrigin = '0px 0px'; video.style.msTransformOrigin = '0px 0px'; video.style.oTransformOrigin = '0px 0px'; video.style.transformOrigin = '0px 0px'; video.style.webkitTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; video.style.mozTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; video.style.msTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; video.style.oTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; video.style.transform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; } // add video element to dom elem.appendChild( video ); this.video = video; // ask user for access to their camera var self = this; this.mediaDevices.getUserMedia({ "audio": false, "video": this.params.constraints || { mandatory: { minWidth: this.params.dest_width, minHeight: this.params.dest_height } } }) .then( function(stream) { // got access, attach stream to video video.onloadedmetadata = function(e) { self.stream = stream; self.loaded = true; self.live = true; self.dispatch('load'); self.dispatch('live'); self.flip(); }; video.src = window.URL.createObjectURL( stream ) || stream; }) .catch( function(err) { // JH 2016-07-31 Instead of dispatching error, now falling back to Flash if userMedia fails (thx @john2014) // JH 2016-08-07 But only if flash is actually installed -- if not, dispatch error here and now. if (self.params.enable_flash && self.detectFlash()) { setTimeout( function() { self.params.force_flash = 1; self.attach(elem); }, 1 ); } else { self.dispatch('error', err); } }); } else if (this.params.enable_flash && this.detectFlash()) { // flash fallback window.Webcam = Webcam; // needed for flash-to-js interface var div = document.createElement('div'); div.innerHTML = this.getSWFHTML(); elem.appendChild( div ); } else { this.dispatch('error', new WebcamError( this.params.noInterfaceFoundText )); } // setup final crop for live preview if (this.params.crop_width && this.params.crop_height) { var scaled_crop_width = Math.floor( this.params.crop_width * scaleX ); var scaled_crop_height = Math.floor( this.params.crop_height * scaleY ); elem.style.width = '' + scaled_crop_width + 'px'; elem.style.height = '' + scaled_crop_height + 'px'; elem.style.overflow = 'hidden'; elem.scrollLeft = Math.floor( (this.params.width / 2) - (scaled_crop_width / 2) ); elem.scrollTop = Math.floor( (this.params.height / 2) - (scaled_crop_height / 2) ); } else { // no crop, set size to desired elem.style.width = '' + this.params.width + 'px'; elem.style.height = '' + this.params.height + 'px'; } }, reset: function() { // shutdown camera, reset to potentially attach again if (this.preview_active) this.unfreeze(); // attempt to fix issue #64 this.unflip(); if (this.userMedia) { if (this.stream) { if (this.stream.getVideoTracks) { // get video track to call stop on it var tracks = this.stream.getVideoTracks(); if (tracks && tracks[0] && tracks[0].stop) tracks[0].stop(); } else if (this.stream.stop) { // deprecated, may be removed in future this.stream.stop(); } } delete this.stream; delete this.video; } if (this.userMedia !== true) { // call for turn off camera in flash var movie = this.getMovie(); if (movie && movie._releaseCamera) movie._releaseCamera(); } if (this.container) { this.container.innerHTML = ''; delete this.container; } this.loaded = false; this.live = false; }, set: function() { // set one or more params // variable argument list: 1 param = hash, 2 params = key, value if (arguments.length == 1) { for (var key in arguments[0]) { this.params[key] = arguments[0][key]; } } else { this.params[ arguments[0] ] = arguments[1]; } }, on: function(name, callback) { // set callback hook name = name.replace(/^on/i, '').toLowerCase(); if (!this.hooks[name]) this.hooks[name] = []; this.hooks[name].push( callback ); }, off: function(name, callback) { // remove callback hook name = name.replace(/^on/i, '').toLowerCase(); if (this.hooks[name]) { if (callback) { // remove one selected callback from list var idx = this.hooks[name].indexOf(callback); if (idx > -1) this.hooks[name].splice(idx, 1); } else { // no callback specified, so clear all this.hooks[name] = []; } } }, dispatch: function() { // fire hook callback, passing optional value to it var name = arguments[0].replace(/^on/i, '').toLowerCase(); var args = Array.prototype.slice.call(arguments, 1); if (this.hooks[name] && this.hooks[name].length) { for (var idx = 0, len = this.hooks[name].length; idx < len; idx++) { var hook = this.hooks[name][idx]; if (typeof(hook) == 'function') { // callback is function reference, call directly hook.apply(this, args); } else if ((typeof(hook) == 'object') && (hook.length == 2)) { // callback is PHP-style object instance method hook[0][hook[1]].apply(hook[0], args); } else if (window[hook]) { // callback is global function name window[ hook ].apply(window, args); } } // loop return true; } else if (name == 'error') { if ((args[0] instanceof FlashError) || (args[0] instanceof WebcamError)) { message = args[0].message; } else { message = "Could not access webcam: " + args[0].name + ": " + args[0].message + " " + args[0].toString(); } // default error handler if no custom one specified alert("Webcam.js Error: " + message); } return false; // no hook defined }, setSWFLocation: function(value) { // for backward compatibility. this.set('swfURL', value); }, detectFlash: function() { // return true if browser supports flash, false otherwise // Code snippet borrowed from: https://github.com/swfobject/swfobject var SHOCKWAVE_FLASH = "Shockwave Flash", SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash", FLASH_MIME_TYPE = "application/x-shockwave-flash", win = window, nav = navigator, hasFlash = false; if (typeof nav.plugins !== "undefined" && typeof nav.plugins[SHOCKWAVE_FLASH] === "object") { var desc = nav.plugins[SHOCKWAVE_FLASH].description; if (desc && (typeof nav.mimeTypes !== "undefined" && nav.mimeTypes[FLASH_MIME_TYPE] && nav.mimeTypes[FLASH_MIME_TYPE].enabledPlugin)) { hasFlash = true; } } else if (typeof win.ActiveXObject !== "undefined") { try { var ax = new ActiveXObject(SHOCKWAVE_FLASH_AX); if (ax) { var ver = ax.GetVariable("$version"); if (ver) hasFlash = true; } } catch (e) {;} } return hasFlash; }, getSWFHTML: function() { // Return HTML for embedding flash based webcam capture movie var html = '', swfURL = this.params.swfURL; // make sure we aren't running locally (flash doesn't work) if (location.protocol.match(/file/)) { this.dispatch('error', new FlashError("Flash does not work from local disk. Please run from a web server.")); return '