Archivo

Archive for agosto 2010

JQuery WebCam Capture and Upload

agosto 21, 2010 20 comentarios

Este es un plugin para JQuery donde puedes capturar imagenes de tu webcam y subirlas a tu servidor, estilo facebook.
Para ésto necesitas 2 archivos, primero el archivo PHP que guarda las imágenes

test.php

<?php
class WebCamUpload {
	var $input 			= null;
	var $serverRequest 	= null;
	function __construct($serv,$in){ 
		$this->input = $in;
		$this->serverRequest = $serv;
	}
	function saveImage($dir='') {
		$filename = md5(date('YmdHisu')) . '.jpg';
		$result = file_put_contents($dir.$filename, $this->input );
		if (!$result) {
			throw new Exception("No se pudo guardar la imagen, revisa permisos");
			exit();
		}
		return 'http://' . $this->serverRequest['HTTP_HOST'] . dirname($this->serverRequest['REQUEST_URI']) . '/' .$dir. $filename;
	}
}

try {
	$cam = new WebCamUpload($_SERVER,file_get_contents('php://input'));
	echo $cam->saveImage('uploads/');
}catch(Exception $e) {
	echo $e->getMessage();
}

?>

Luego el archivo Javascript que contiene el plugin JQuery
jquery.webcam.js

/*
	jQuery WebCam Capture Plugin
*/
(function() {
	var webCamObject = null;
	$.fn.extend({
		createWebCam : function(opt) {
			this.options = {
				height: 250,
				width: 	250,
				swfUrl: 'webcam.swf',
				id: 	'webcamMovie',
				shutterSound: true,
				shutterUrl: 'shutter.mp3',
				url: 'test.php',
				quality: 100
			};
			window.webcam = { flash_notify: function(type, url) { $.WebCam.notify(type,url); } }
			$.extend({
				WebCam : {
					notify : function(type,msg) {
						$(document).trigger('webcamNotify',{ type: type, msg: msg  });
						$(document).unbind('webcamNotify');
					}
				}
			});
			this.objSwf = null;
			this.htmlElement = $(this);
			$.extend(this.options, opt);
			var flashVars = 'shutter_enabled=' + (this.options.shutterSound ? 1 : 0) + '&shutter_url=' + escape(this.options.shutterUrl) +'&width=' + this.options.width + '&height=' +this.options.height +'&server_width=' + this.options.width +'&server_height=' + this.options.height;
			if($.browser.msie){ 
				this.objSwf = $('<object>').attr('id',this.options.id).attr('width',this.options.width).attr('height',this.options.height
				).append(
					$('<param>').attr('name','allowScriptAccess').attr('value','always')
				).append(
					$('<param>').attr('name','allowFullScreen').attr('value','false')
				).append(
					$('<param>').attr('name','movie').attr('value',this.options.swfUrl)
				).append(
					$('<param>').attr('name','loop').attr('value','false')
				).append(
					$('<param>').attr('name','menu').attr('value','false')
				).append(
					$('<param>').attr('name','quality').attr('value','best')
				).append(
					$('<param>').attr('name','flashvars').attr('value',flashVars)
				);
			} else {
				this.objSwf = $('<embed>').attr('id',this.options.id).attr('src',this.options.swfUrl).attr('width',this.options.width).attr('height',this.options.height).attr('loop','false').attr('menu','false').attr('quality','best').attr('bgcolor','#ffffff').attr('name',this.options.id).attr('allowScriptAccess','always').attr('allowFullScreen','false').attr('type','application/x-shockwave-flash').attr('flashvars',flashVars);
			}
			$(this).append(
				this.objSwf
			);
			this.getMovie = function() {
				return document.getElementById(this.options.id);
			}
			this.capture = function(callback) {
				this.getMovie()._snap(this.options.url, this.options.quality, this.options.shutterSound, 0 );
				$(document).bind('webcamNotify',function(e,json) { callback(json); }  );
				return $(this);
			}
			this.reset = function(callback) {
				this.getMovie()._reset();
				return $(this);
			}
			this.configure = function(panel) {
				if (!panel) panel = "camera";
				this.getMovie()._configure(panel);
				return $(this);
			}
			webCamObject = this;
			return $(this);
		},
		getWebCam : function() {
			if(webCamObject != null) return webCamObject;
		}
	});
})();

por último el archivo de prueba
test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.webcam.js"></script>
	<script type="text/javascript" language="JavaScript">
		$(function() {
			$('#webcam').createWebCam();
			$('#capture').click(function() {
				 $('#webcam').getWebCam().capture(function(json){
					if(json.type=="success") {
						console.log('URL: '+json.msg);
					} else if(json.type == "error") {
						console.log('ERROR: '+json.msg);
					}
				});
			});
			$('#reset').click(function() {
				 $('#webcam').getWebCam().reset();
			});
			$('#configure').click(function() {
				 $('#webcam').getWebCam().configure();
			});
		});
	</script>
	
</head>
<body>
	<div id="webcam"></div>
	<a id="capture">Snapshot</a>
	<a id="reset">Reset</a>
	<a id="configure">Configure</a>
</body>
</html>

Aqui dejo un DEMO
http://estebanfuentealba.net/ejemplos/JQueryWebCamCapture/test.html

Codigo Fuente y archivos necesarios : http://estebanfuentealba.net/ejemplos/JQueryWebCamCapture/jwebcam.rar

Saludos!

Categorías: HTML, JavaScript Etiquetas: , , , ,