Inicio > HTML, JavaScript > JQuery WebCam Capture and Upload

JQuery WebCam Capture and Upload

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!

  1. septiembre 2, 2010 a las 2:37 am

    Powerful post.

  2. Mar
    octubre 4, 2010 a las 6:22 pm

    No me va en IE, alguien sabe pq?
    Gracias

  3. Mar
    octubre 4, 2010 a las 6:22 pm

  4. Diego
    octubre 26, 2010 a las 11:47 am

    a alguien le funciona en IE???

  5. Gerard
    noviembre 9, 2010 a las 10:25 am

    existe la posibilidad de grabar el video y almacenarlo en el servidor? o aunque sea guardarlo en el pc del usario, ya que estaría muy interesado en poder implantarlo en mi portal.

    Gracias.
    pd: a mi tampoco me corre en IE.

  6. acronis
    diciembre 30, 2010 a las 2:33 pm

    no se porque no funciona con INTERNET EXPLORER JODER que mal bill gate aa

    no me funciona en IE ALGUIEN sabe porque??? gracias

  7. satit@wbac.ac.th
    enero 11, 2011 a las 2:34 am

    Please show the detail of
    “list.php”
    or How can i get this file?

    Thank you

  8. dark
    febrero 25, 2011 a las 10:19 pm

    Estupendo el codigo, tengo un formulario donde tengo corriendo el codigo, me funciona perfecto y guarda la imagen en el input, pero quiero traerme $filename que se encuentra en el test.php donde ocurre el evento de guardar la imagen en el servidor, a otra pagina.php pero no he podido usando POST, GET, COOKIE, aun estoy muy novato en este mundo a ver si me pueden ayudar.

  9. dhamaso
    febrero 27, 2011 a las 6:43 pm

    cuando lo hago en el localhost me funciona perfecto, pero cuando lo hago en un servidor remoto me manda este error:

    Failed to load resource: the server responded with a status of 500 (Internal Server Error)

    Ya puse permisos y todo, pero aun asi no me deja guarda la foto y no me manda ningun error de javascript o algo solo el mensaje anterior.

    tu sabes por que podria ocacionarse ese error?

  10. Luz Marina
    marzo 30, 2011 a las 10:36 pm

    No me funciona en localhost de windows, por favor me pueden indicar qué hacer??, gracias

  11. abril 8, 2011 a las 12:22 am

    a mi tampoco me funciona en IE 8, que puede estar pasando?

  12. Deivid Aguilar
    mayo 24, 2011 a las 4:46 pm

    Hola, estoy tratando de entender todo tu codigo, pero no logro entender como podria darle un nombre de archivo diferente a cada foto. digamos que el nombre del archivo se lo enviara desde un imput text; algo como $(‘#txt_cedula’).val(); para lograr finalmente algo como 123_numero_cedula_456.jpg

    Gracias por la atencion prestada y quedaria mucho mas agradecido si me pudieras despejar esta pequeña duda. Nuevamente Gracias.

  13. Antonio
    junio 3, 2011 a las 3:49 pm

    NO funciona en IE !!!!!!!!!!!!!
    Antes de cualquier cosa tiene que funcionar en todos los navegadores !!!

    Alguien lo pudo corregir ?????

    Gracias.

  14. ricardo avalos
    agosto 9, 2011 a las 1:20 am

    El link para la descarga de los archivos necesarios esta caído. Por favor arregla!!!! Gracias!!

  15. septiembre 5, 2011 a las 2:00 pm

    Gracias , descargando los archivos necesarios.!!! Muy bun post +1 .

  16. septiembre 22, 2011 a las 8:16 pm

    hola! oigan dnd puedo descargar los archivos???

  17. Deider
    noviembre 26, 2012 a las 3:40 pm

    A alguien le funciona? , por que a mi no en ninguno de los navegadores(IE, mozilla 0 google chrom) necesito ayuda con este tema.

  18. Master
    septiembre 13, 2013 a las 1:19 pm

    IE no tiene esta compatibilidad de HTML5 saldra en la version 11

    Saludos

  19. jorge
    febrero 11, 2014 a las 8:51 am

    los link estan muerto alguien tienes los los fuente pueden subirlos para descargar

  1. agosto 27, 2010 a las 7:59 pm

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: