// WebcamJS v1.0 // 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 Joseph Huckaby // Licensed under the MIT License /* Usage:
Take Snapshot */ var Webcam = { version: '1.0.0', // globals protocol: location.protocol.match(/https/i) ? 'https' : 'http', swfURL: '', // URI to webcam.swf movie (defaults to cwd) 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) force_flash: false // force flash mode }, hooks: { load: null, live: null, uploadcomplete: null, uploadprogress: null, error: function(msg) { alert("Webcam.js Error: " + msg); } }, // callback hook functions init: function() { // initialize, check for getUserMedia support navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; this.userMedia = this.userMedia && !!navigator.getUserMedia && !!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; } }, 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', "Could not locate DOM element to attach to."); } this.container = elem; if (!this.params.width) this.params.width = elem.offsetWidth; if (!this.params.height) this.params.height = elem.offsetHeight; // 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; // if force_flash is set, disable userMedia if (this.params.force_flash) this.userMedia = null; 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'; // 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 ((scaleX != 1.0) || (scaleY != 1.0)) { elem.style.overflow = 'visible'; 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; // create offscreen canvas element to hold pixels later on var canvas = document.createElement('canvas'); canvas.width = this.params.dest_width; canvas.height = this.params.dest_height; var context = canvas.getContext('2d'); this.context = context; this.canvas = canvas; // ask user for access to their camera var self = this; navigator.getUserMedia({ "audio": false, "video": true }, 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'); }, function(err) { return self.dispatch('error', "Could not access webcam."); }); } else { // flash fallback elem.innerHTML = this.getSWFHTML(); } }, reset: function() { // shutdown camera, reset to potentially attach again if (this.userMedia) { try { this.stream.stop(); } catch (e) {;} delete this.stream; delete this.canvas; delete this.context; delete this.video; } 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 // supported hooks: onLoad, onError, onLive name = name.replace(/^on/i, '').toLowerCase(); if (typeof(this.hooks[name]) == 'undefined') throw "Event type not supported: " + name; this.hooks[name] = callback; }, 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]) { if (typeof(this.hooks[name]) == 'function') { // callback is function reference, call directly this.hooks[name].apply(this, args); } else if (typeof(this.hooks[name]) == 'array') { // callback is PHP-style object instance method this.hooks[name][0][this.hooks[name][1]].apply(this.hooks[name][0], args); } else if (window[this.hooks[name]]) { // callback is global function name window[ this.hooks[name] ].apply(window, args); } return true; } return false; // no hook defined }, setSWFLocation: function(url) { // set location of SWF movie (defaults to webcam.swf in cwd) this.swfURL = url; }, getSWFHTML: function() { // Return HTML for embedding flash based webcam capture movie var html = ''; // make sure we aren't running locally (flash doesn't work) if (location.protocol.match(/file/)) { return '