11545 sujets

JavaScript, DOM et API Web HTML5

JQuery Webcam Plugin

Bonjour,

Je tente d'utiliser le plugin JQuery Webcam disponible à cette adresse :
http://www.xarg.org/project/jquery-webcam-plugin/

Pour l'instant le retour video fonctionne normalement c'est du flash. Par contre, les callbacks ne fonctionnent pas et non pas l'air d'être initialisé.

Voici le code html :


 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="utf-8" />
 
 
<title>&bull; jQuery webcam plugin &bull; Code is Poetry</title>
 
 
<style type="text/css">
 
#webcam, #canvas {
	width: 320px;
	height: 240px;
	border:20px solid #333;
	background:#eee;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
#webcam {
	position:relative;
	margin-top:50px;
	margin-bottom:50px;
}
 
#webcam > span {
	z-index:2;
	position:absolute;
	color:#eee;
	font-size:10px;
	bottom: -16px;
	left:152px;
}
 
#webcam > img {
	z-index:1;
	position:absolute;
	border:0px none;
	padding:0px;
	bottom:-40px;
	left:89px;
}
 
#webcam > div {
	border:5px solid #333;
	position:absolute;
	right:-90px;
	padding:5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	cursor:pointer;
}
 
#webcam a {
	background:#fff;
	font-weight:bold;
}
 
#webcam a > img {
	border:0px none;
}
 
#canvas {
	border:20px solid #ccc;
	background:#eee;
}
 
#flash {
	position:absolute;
	top:0px;
	left:0px;
	z-index:5000;
	width:100%;
	height:500px;
	background-color:#c00;
	display:none;
}
 
object {
	display:block; /* HTML5 fix */
	position:relative;
	z-index:1000;
}
 
</style>
 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.webcam.js"></script>
</head>
 
<body>
 
<div id="wrap">
	<div id="main" style="float:left">
 
	<h2>jQuery webcam example</h2>
 
	<p id="status" style="height:22px; color:#c00;font-weight:bold;"></p>
 
	<div id="webcam">
	</div>
 
	<p style="width:360px;text-align:center; "><a href="javascript:webcam.capture(3);changeFilter();void(0);">Take a picture after 3 seconds</a> | <a href="javascript:webcam.capture();void(0);">Take a picture instantly</a></p>
 
	<p><canvas id="canvas" height="240" width="320"></canvas></p>
 
	<h3>Available Cameras</h3>
 
	<ul id="cams"></ul>
 
<script type="text/javascript">
 
var pos = 0;
var ctx = null;
var cam = null;
var image = null;
 
var filter_on = false;
var filter_id = 0;
 
function changeFilter() {
	if (filter_on) {
		filter_id = (filter_id + 1) & 7;
	}
}
 
function toggleFilter(obj) {
	if (filter_on =!filter_on) {
		obj.parentNode.style.borderColor = "#c00";
	} else {
		obj.parentNode.style.borderColor = "#333";
	}
}
 
 
jQuery("#webcam").webcam({
 
	width: 320,
	height: 240,
	mode: "save",
	swffile: "jscam_canvas_only.swf",
 
	onTick: function(remain) {
 
		if (0 == remain) {
			jQuery("#status").text("Cheese!");
		} else {
			jQuery("#status").text(remain + " seconds remaining...");
		}
	},
 
	onSave: function(data) {
 
		alert(data);
		var col = data.split(";");
		var img = image;
 
		if (false == filter_on) {
 
			for(var i = 0; i < 320; i++) {
				var tmp = parseInt(col[i]);
				img.data[pos + 0] = (tmp >> 16) & 0xff;
				img.data[pos + 1] = (tmp >> 8) & 0xff;
				img.data[pos + 2] = tmp & 0xff;
				img.data[pos + 3] = 0xff;
				pos+= 4;
			}
 
		} else {
 
			var id = filter_id;
			var r,g,b;
			var r1 = Math.floor(Math.random() * 255);
			var r2 = Math.floor(Math.random() * 255);
			var r3 = Math.floor(Math.random() * 255);
 
			for(var i = 0; i < 320; i++) {
				var tmp = parseInt(col[i]);
 
				/* Copied some xcolor methods here to be faster than calling all methods inside of xcolor and to not serve complete library with every req */
 
				if (id == 0) {
					r = (tmp >> 16) & 0xff;
					g = 0xff;
					b = 0xff;
				} else if (id == 1) {
					r = 0xff;
					g = (tmp >> 8) & 0xff;
					b = 0xff;
				} else if (id == 2) {
					r = 0xff;
					g = 0xff;
					b = tmp & 0xff;
				} else if (id == 3) {
					r = 0xff ^ ((tmp >> 16) & 0xff);
					g = 0xff ^ ((tmp >> 8) & 0xff);
					b = 0xff ^ (tmp & 0xff);
				} else if (id == 4) {
 
					r = (tmp >> 16) & 0xff;
					g = (tmp >> 8) & 0xff;
					b = tmp & 0xff;
					var v = Math.min(Math.floor(.35 + 13 * (r + g + b) / 60), 255);
					r = v;
					g = v;
					b = v;
				} else if (id == 5) {
					r = (tmp >> 16) & 0xff;
					g = (tmp >> 8) & 0xff;
					b = tmp & 0xff;
					if ((r+= 32) < 0) r = 0;
					if ((g+= 32) < 0) g = 0;
					if ((b+= 32) < 0) b = 0;
				} else if (id == 6) {
					r = (tmp >> 16) & 0xff;
					g = (tmp >> 8) & 0xff;
					b = tmp & 0xff;
					if ((r-= 32) < 0) r = 0;
					if ((g-= 32) < 0) g = 0;
					if ((b-= 32) < 0) b = 0;
				} else if (id == 7) {
					r = (tmp >> 16) & 0xff;
					g = (tmp >> 8) & 0xff;
					b = tmp & 0xff;
					r = Math.floor(r / 255 * r1);
					g = Math.floor(g / 255 * r2);
					b = Math.floor(b / 255 * r3);
				}
 
				img.data[pos + 0] = r;
				img.data[pos + 1] = g;
				img.data[pos + 2] = b;
				img.data[pos + 3] = 0xff;
				pos+= 4;
			}
		}
 
		if (pos >= 0x4B000) {
			ctx.putImageData(img, 0, 0);
			pos = 0;
		}
	},
 
	onCapture: function () {
 
		alert("test");
		webcam.save();
 
		jQuery("#flash").css("display", "block");
		jQuery("#flash").fadeOut(100, function () {
			jQuery("#flash").css("opacity", 1);
		});
	},
 
	debug: function (type, string) {
		jQuery("#status").html(type + ": " + string);
	},
 
	onLoad: function () {
 
		var cams = webcam.getCameraList();
		for(var i in cams) {
			jQuery("#cams").append("<li>" + cams[i] + "</li>");
		}
	}
});
 
function getPageSize() {
 
	var xScroll, yScroll;
 
	if (window.innerHeight && window.scrollMaxY) {
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
 
	var windowWidth, windowHeight;
 
	if (self.innerHeight) { // all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth;
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}
 
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else {
		pageHeight = yScroll;
	}
 
	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){
		pageWidth = xScroll;
	} else {
		pageWidth = windowWidth;
	}
 
	return [pageWidth, pageHeight];
}
 
window.addEventListener("load", function() {
 
	jQuery("body").append("<div id=\"flash\"></div>");
 
	var canvas = document.getElementById("canvas");
 
	if (canvas.getContext) {
		ctx = document.getElementById("canvas").getContext("2d");
		ctx.clearRect(0, 0, 320, 240);
 
		var img = new Image();
		img.src = "/static/logo.gif";
		img.onload = function() {
			ctx.drawImage(img, 129, 89);
		}
		image = ctx.getImageData(0, 0, 320, 240);
	}
 
	var pageSize = getPageSize();
	jQuery("#flash").css({ height: pageSize[1] + "px" });
 
}, false);
 
window.addEventListener("resize", function() {
 
	var pageSize = getPageSize();
	jQuery("#flash").css({ height: pageSize[1] + "px" });
 
}, false);
 
</script>
 
</div>
</div>
 
</body>
 
</html>


et le code du plugin :


 
/**
* jQuery webcam
* Copyright (c) 2010, Robert Eisele (robert@xarg.org)
* Dual licensed under the MIT or GPL Version 2 licenses.
* Date: 09/12/2010
*
* @author Robert Eisele
* @version 1.0
*
* @see  http://www.xarg.org/project/jquery-webcam-plugin/
 
**/
 
(function ($) 
{
	var webcam = 
	{
		extern: null, // external select token to support jQuery dialogs
		append: true, // append object instead of overwriting
 
		width: 320,
		height: 240,
 
		mode: "callback", // callback | save | stream
 
		swffile: "jscam.swf",
		quality: 85,
 
		debug: function () {},
		onCapture: function () {},
		onTick: function () {},
		onSave: function () {},
		onLoad: function () {}
	};
 
	window.webcam = webcam;
 
	$.fn.webcam = function(options) 
	{
		if (typeof options === "object")
		{
			for (var ndx in webcam) 
			{
				if (options[ndx] !== undefined) 
				{
					webcam[ndx] = options[ndx];
				}
			}
		}
 
		var source = '<object id="webcam-object" type="application/x-shockwave-flash" data="'+webcam.swffile+'" width="'+webcam.width+'" height="'+webcam.height+'"><param name="movie" value="'+webcam.swffile+'" /><param name="FlashVars" value="mode='+webcam.mode+'&amp;quality='+webcam.quality+'" /><param name="allowScriptAccess" value="always" /></object>';
 
		if (null !== webcam.extern) {
		$(webcam.extern)[webcam.append ? "append" : "html"](source);
		} else {
		this[webcam.append ? "append" : "html"](source);
		}
 
		(_register = function(run) 
		{
			var cam = document.getElementById('webcam-object');
 
			if (cam.capture !== undefined) 
			{
				alert("test");
				/* Simple callback methods are not allowed  [ohwell]*/
				webcam.capture = function(x) 
				{
					try {
					return cam.capture(x);
					} catch(e) {}
				}
 
				webcam.save = function(x) {
					try {
					return cam.save(x);
					} catch(e) {}
				}
 
				webcam.setCamera = function(x) {
					try {
					return cam.setCamera(x);
					} catch(e) {}
				}
 
				webcam.getCameraList = function() {
					try {
					return cam.getCameraList();
					} catch(e) {}
				}
 
				webcam.onLoad(); 
			} 
			else if (0 == run) 
			{
				webcam.debug("error", "Flash movie not yet registered!");
			} 
			else 
			{
				/* Flash interface not ready yet */
				window.setTimeout(_register, 1000 * (4 - run), run - 1);
			}
		})(3);
	}
 
})(jQuery);


J'ai la variable cam.capture qui est toujours non défini. Le code fonctionne sur le site du plugin mais je n'arrive pas à le faire fonctionner en local.

Quelqu'un aurait-il une piste ?

Merci pour votre aide. [/i][/i][/i]
Salut,

Essaie de modifier cette ligne 
swffile: "jscam_canvas_only.swf"
par 
swffile: "jscam.swf"
puisque apparemment tu veux récupérer l'image (étant donné que tu es en mode "save").
Sujet clos
Aller à