lovasoa · December 18, 2015 01:29
diff --git a/wabcamquizz.html b/wabcamquizz.html
 <!DOCTYPE html>
 <head>
 	<meta charset="utf8" />
 	<title>Webcam Quizz</title>
 	<style>
 		#webcam, #pict {
 			height:100px;
 		}
 		#answers > span {
 			border : 1px solid black;
 		}
 		#answers > span.selected {
 			border : 2px solid blue;
 		}
 	</style>
 </head>

 <body>
 <video id="webcam" autoplay="true" >Votre navigateur est trop vieux ou trop nul. Téléchargez 
 la dernière version de Firefox.</video>
 <canvas id="pict" ></canvas>
 <br />

 <button disabled="true" onclick="initCanvas()" id="startBtn">Start</button>

 <div id="quizz">
 	<p id="question">Qui est le meilleur ? </p>
 	<div id="answers">
 		<span id="answerleft">Moi</span>
 		<span id="answerright">Un autre</span>
 	</div>
 </div>

 <script type="text/javascript">
 var video = document.getElementById("webcam");
 var canvas = document.getElementById("pict");
 var ctx = canvas.getContext("2d");

 var answersElems = document.querySelectorAll("#answers > span");

 window.requestAnimationFrame = (window.requestAnimationFrame ||
 								window.mozRequestAnimationFrame ||
 								window.webkitRequestAnimationFrame
 							);

 navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

 if (!navigator.getMedia) alert("Sorry, your browser seems to be too old. Download a new one!");
 
 navigator.getMedia (
 
   // constraints
   {
      video: true,
      audio: false
   },
 
   // successCallback
   function(localMediaStream) {
 		var video = document.getElementById("webcam");
 		video.src = window.URL.createObjectURL(localMediaStream);
 		document.getElementById("startBtn").disabled = false;
   },
 
   // errorCallback
   function(err) {
   	alert(err);
    console.log("The following error occured: " + err);
   }
 
 );

 var background = {
 	pixels : null,
 	save : function(){
 		ctx.drawImage(video, 0,0, canvas.width, canvas.height);
 		var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
 		this.pixels = imgData.data;
 	}
 }

 function dist(x1, y1, z1,
 				x2, y2, z2) {
 	function sq(x) {return x*x;}
 	return Math.sqrt(sq(x1-x2)+sq(y1-y2)+sq(z2-z1));				
 }

 function transformImage() {
 	var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
 	var pixels = imgData.data;

 	if (!background.pixels) background.save();
 	first = background.pixels;

 	var dx=0, dy=0;
 	
 	for (var i=0; i<pixels.length; i+=4) {
 		var n = (i/4)|0,
 			x = (n % canvas.width > canvas.width/2) ? 1 : -1,
 			y = (n - x > canvas.height/2) ? 1 : -1;
 		var r = pixels[i], g = pixels[i+1], b = pixels[i+2];
 		var r1 = first[i], g1 = first[i+1], b1 = first[i+2];

 		if (dist(r,g,b,r1,g1,b1)<50) {
 			r=255,g=255,b=255;
 		} else {
 			dx += x;
 			dy += y;
 		}

 		pixels[i] = r, pixels[i+1] = g, pixels[i+2] = b;
 	}
 	ctx.putImageData(imgData,0,0);
 	
 	dx /= pixels.length/2;
 	dy /= pixels.length/2;
 	return [dx,dy];
 }

 var infos = {
 	x : 0,
 	y : 0,
 	rightOrLeft : function() {
 		return (Math.abs(this.x)<0.05) ? 0 :
 			(this.x>0) ? -1 : 1;//Right andf left are inversed by the webcam
 	}
 }

 function initCanvas() {
 	canvas.height = 100;
 	canvas.width = canvas.height * video.videoWidth / video.videoHeight;
 	document.getElementById("startBtn").disabled = true;
 	analyseImage();
 }

 function analyseImage() {
 	ctx.drawImage(video, 0,0, canvas.width, canvas.height);
 	pos = transformImage();
 	
 	infos.x = pos[0];
 	infos.y = pos[1];

 	var rol = infos.rightOrLeft();
 	if (rol === 0 && this.selected) {
 		this.selected = false;
 		answersElems[0].classList.remove("selected");
 		answersElems[1].classList.remove("selected");
 	}else if( rol !== 0 ) {
 		this.selected = true;
 		answersElems[((rol==1)?0:1)].classList.remove("selected");
 		answersElems[((rol==1)?1:0)].classList.add("selected");
 	}

 	requestAnimationFrame(analyseImage);
 	//addToGallery(canvas.toDataURL());
 }

 </script>

 </body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf8" />
	<title>Webcam Quizz</title>
	<style>
	#webcam, #pict {
	height:100px;
	}
	#answers > span {
	border : 1px solid black;
	}
	#answers > span.selected {
	border : 2px solid blue;
	}
	</style>
	</head>

	<body>
	<video id="webcam" autoplay="true" >Votre navigateur est trop vieux ou trop nul. Téléchargez
	la dernière version de Firefox.</video>
	<canvas id="pict" ></canvas>
	<br />

	<button disabled="true" onclick="initCanvas()" id="startBtn">Start</button>

	<div id="quizz">
	<p id="question">Qui est le meilleur ? </p>
	<div id="answers">
	<span id="answerleft">Moi</span>
	<span id="answerright">Un autre</span>
	</div>
	</div>

	<script type="text/javascript">
	var video = document.getElementById("webcam");
	var canvas = document.getElementById("pict");
	var ctx = canvas.getContext("2d");

	var answersElems = document.querySelectorAll("#answers > span");

	window.requestAnimationFrame = (window.requestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.webkitRequestAnimationFrame
	);

	navigator.getMedia = ( navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia \|\|
	navigator.msGetUserMedia);

	if (!navigator.getMedia) alert("Sorry, your browser seems to be too old. Download a new one!");

	navigator.getMedia (

	// constraints
	{
	video: true,
	audio: false
	},

	// successCallback
	function(localMediaStream) {
	var video = document.getElementById("webcam");
	video.src = window.URL.createObjectURL(localMediaStream);
	document.getElementById("startBtn").disabled = false;
	},

	// errorCallback
	function(err) {
	alert(err);
	console.log("The following error occured: " + err);
	}

	);

	var background = {
	pixels : null,
	save : function(){
	ctx.drawImage(video, 0,0, canvas.width, canvas.height);
	var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
	this.pixels = imgData.data;
	}
	}

	function dist(x1, y1, z1,
	x2, y2, z2) {
	function sq(x) {return x*x;}
	return Math.sqrt(sq(x1-x2)+sq(y1-y2)+sq(z2-z1));
	}

	function transformImage() {
	var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
	var pixels = imgData.data;

	if (!background.pixels) background.save();
	first = background.pixels;

	var dx=0, dy=0;

	for (var i=0; i<pixels.length; i+=4) {
	var n = (i/4)\|0,
	x = (n % canvas.width > canvas.width/2) ? 1 : -1,
	y = (n - x > canvas.height/2) ? 1 : -1;
	var r = pixels[i], g = pixels[i+1], b = pixels[i+2];
	var r1 = first[i], g1 = first[i+1], b1 = first[i+2];

	if (dist(r,g,b,r1,g1,b1)<50) {
	r=255,g=255,b=255;
	} else {
	dx += x;
	dy += y;
	}

	pixels[i] = r, pixels[i+1] = g, pixels[i+2] = b;
	}
	ctx.putImageData(imgData,0,0);

	dx /= pixels.length/2;
	dy /= pixels.length/2;
	return [dx,dy];
	}

	var infos = {
	x : 0,
	y : 0,
	rightOrLeft : function() {
	return (Math.abs(this.x)<0.05) ? 0 :
	(this.x>0) ? -1 : 1;//Right andf left are inversed by the webcam
	}
	}

	function initCanvas() {
	canvas.height = 100;
	canvas.width = canvas.height * video.videoWidth / video.videoHeight;
	document.getElementById("startBtn").disabled = true;
	analyseImage();
	}

	function analyseImage() {
	ctx.drawImage(video, 0,0, canvas.width, canvas.height);
	pos = transformImage();

	infos.x = pos[0];
	infos.y = pos[1];

	var rol = infos.rightOrLeft();
	if (rol === 0 && this.selected) {
	this.selected = false;
	answersElems[0].classList.remove("selected");
	answersElems[1].classList.remove("selected");
	}else if( rol !== 0 ) {
	this.selected = true;
	answersElems[((rol==1)?0:1)].classList.remove("selected");
	answersElems[((rol==1)?1:0)].classList.add("selected");
	}

	requestAnimationFrame(analyseImage);
	//addToGallery(canvas.toDataURL());
	}

	</script>

	</body>