Utilisation de la camera dans un navigateur

Télécharger le projet
Commenter

Description

suite a des testes sur l'utilisation d'une webcam dans un navigateur je me suis amusé a créé cette source qui est un mélange de javascript css3d canvas et bien entendu de l'api getUserMedia() pour la gestion de la webcam

compatible avec les toutes dernières versions de firefox chrome pour ce dernier le teste est a faire en ligne, fonctionne aussi avec opera mais sans le cube car opera ne supporte pas encore le css3d

je rajoute un lien pour tester le tout (il faudra retirer les espace dans le lien)

http://scriptevol.toile-libre.org/scriptsite/cubecam.html

Source / Exemple : 


var kcubecam={

vaval:0,
vavam:0,
inter:null,
a:0,
tbm:new Array,

azerty:function(sens){

		var elem=document.getElementById("cube");

		if(sens=='droite'){
			this.vaval+=45
			elem.style.WebkitTransform='rotateX('+this.vavam+'deg) rotateY('+this.vaval+'deg)';
			elem.style.MozTransform='rotateX('+this.vavam+'deg) rotateY('+this.vaval+'deg)';
		}

		if(sens=='gauche'){
			this.vaval-=45;
			elem.style.WebkitTransform='rotateX('+this.vavam+'deg) rotateY('+this.vaval+'deg)';
			elem.style.MozTransform='rotateX('+this.vavam+'deg) rotateY('+this.vaval+'deg)';
		}

		if(sens=='haut'){
			this.vavam+=45;
			elem.style.WebkitTransform='rotateX('+this.vavam+'deg) rotateY('+this.vaval+'deg)';
			elem.style.MozTransform='rotateX('+this.vavam+'deg) rotateY('+this.vaval+'deg)';
		}

		if(sens=='bas'){
			this.vavam-=45;
			elem.style.WebkitTransform='rotateX('+this.vavam+'deg) rotateY('+this.vaval+'deg)';
			elem.style.MozTransform='rotateX('+this.vavam+'deg) rotateY('+this.vaval+'deg)';
		}

	},

	clone0:function(){

	var vivi = document.getElementById('sourcevid');

	var moncanvas2=document.createElement('canvas');
	moncanvas2.width=50;
	moncanvas2.height=50;
	var moncanvas2d=moncanvas2.getContext('2d');
	moncanvas2d.drawImage(vivi,0,0,50,50);
	
	if(kcubecam.tbm.length==0){
		for(var i=0;i<100;i++){
			kcubecam.tbm.push(moncanvas2d.getImageData( 0, 0, 50, 50));
		}
	}
	
	kcubecam.tbm.unshift(moncanvas2d.getImageData( 0, 0, 50, 50));
	kcubecam.tbm.pop();
	
	var can = document.getElementById('fond');
	var canvas1 = document.getElementById('fond').getContext('2d');
	
	for(var i=0;i<10;i++){
		
		for(var j=0;j<10;j++){
			
			canvas1.putImageData(kcubecam.tbm[(i*10)+j],j*50,i*50);
			
		}
	}
	kcubecam.copie(can)
},

clone1:function(){

	var vivi = document.getElementById('sourcevid');
	var can = document.getElementById('fond');
	var canvas1 = can.getContext('2d');
	
	kcubecam.a >= Math.PI*2 ? kcubecam.a=0 : null;
	
	for(var i=50;i<=500;i+=50){
		
		for(var j=50;j<=500;j+=50){
			
			canvas1.save();
			canvas1.translate(j-25,i-25);
			canvas1.rotate(kcubecam.a);
			canvas1.drawImage(vivi,-25,-25,50,50);
			canvas1.restore();
		}
	}
	kcubecam.copie(can);
	canvas1.drawImage(vivi,150,150,200,200);
	kcubecam.a+=Math.PI/32;
	
},

clone2:function(){

	var vivi = document.getElementById('sourcevid');
	var can = document.getElementById('fond');
	var canvas1 = can.getContext('2d');
	
	var z=0;
	
	for(var i=50;i<=500;i+=50){
		
		if (kcubecam.a==3){
			kcubecam.a=1;
			var b=7
		}
		else{
			kcubecam.a=3;
			var b=5;
		}

		for(var j=50;j<=500;j+=50){
			
			if (z==kcubecam.a){
				z=b;
			}
			else{
				z=kcubecam.a;
			}
			canvas1.save();
			canvas1.translate(j-25,i-25);
			canvas1.rotate((Math.PI/8)*z*2);
			canvas1.drawImage(vivi,-25,-25,50,50);
			canvas1.restore();
		}
	}
	kcubecam.copie(can);
	
},

clone3:function(){

	var vivi = document.getElementById('sourcevid');
	var can = document.getElementById('fond');
	var canvas1 = can.getContext('2d');
	
	for(var i=50;i<=500;i+=50){
		
		kcubecam.a=0;
		for(var j=50;j<=500;j+=50){
			
			if (kcubecam.a==2) {
				kcubecam.a=0;
			}
			canvas1.save();
			canvas1.translate(j-25,i-25);
			canvas1.rotate(Math.PI*kcubecam.a);
			canvas1.drawImage(vivi,-25,-25,50,50);
			kcubecam.a+=1/2;
			canvas1.restore();
		}
	}
	kcubecam.copie(can);
	kcubecam.a=0;
},

clone4:function(){

	var vivi = document.getElementById('sourcevid');
	var can = document.getElementById('fond');
	var canvas1 = can.getContext('2d');
	
	for(var i=50;i<=500;i+=50){
		
		for(var j=50;j<=500;j+=50){
		
		if (kcubecam.a==2) {
		kcubecam.a=0;
		}
			canvas1.save()
			canvas1.translate(j-25,i-25);
			
			if(kcubecam.a==1 || kcubecam.a==0){
			canvas1.scale(-1,-1);
			}
			canvas1.drawImage(vivi,-25,-25,50,50);
			kcubecam.a+=1/2;
			canvas1.restore();
		}
	}
	kcubecam.copie(can);
	kcubecam.a=0;
},

clone5:function(){

	var vivi = document.getElementById('sourcevid');
	var can = document.getElementById('fond');
	var canvas1 = can.getContext('2d');
	
	for(var i=50;i<=500;i+=50){
		
		for(var j=50;j<=500;j+=50){
		
		if (kcubecam.a==2) {
		kcubecam.a=0;
		}
		
			canvas1.save();
			canvas1.translate(j-25,i-25)
			
			if(kcubecam.a==1 || kcubecam.a==0){
			canvas1.scale(-1,1);
			}
			canvas1.drawImage(vivi,-25,-25,50,50);
			kcubecam.a+=1/2;
			canvas1.restore();
		}
	}
	kcubecam.copie(can);
	kcubecam.a=0;
},

clone6:function(){
	var vivi = document.getElementById('sourcevid');
	var can = document.getElementById('fond');
	var canvas1 = can.getContext('2d');
	
	for(var i=50;i<=500;i+=50){
		
		for(var j=50;j<=500;j+=50){
		
		if (kcubecam.a==2) {
		kcubecam.a=0;
		}
		
			canvas1.save();
			canvas1.translate(j-25,i-25)
			
			if(kcubecam.a==1 || kcubecam.a==0){
			canvas1.scale(1,-1);
			}
			canvas1.drawImage(vivi,-25,-25,50,50);
			kcubecam.a+=1/2;
			canvas1.restore();
		}
	}
	kcubecam.copie(can);
	kcubecam.a=0;
},

clone7:function(){
	var vivi = document.getElementById('sourcevid');
	var can = document.getElementById('fond');
	var canvas1 = can.getContext('2d');
	
	for(var i=50;i<=500;i+=50){
		
		for(var j=50;j<=500;j+=50){
		
		if (kcubecam.a==2) {
		kcubecam.a=0;
		}
			canvas1.save();
			canvas1.translate(j-25,i-25)
			
			if(kcubecam.a==0 || kcubecam.a==1.5){
			canvas1.scale(-1,1);
			}
			canvas1.drawImage(vivi,-25,-25,50,50);
			kcubecam.a+=1/2;
			canvas1.restore();
		}
	}
	kcubecam.copie(can)
	kcubecam.a=0
},

clone8:function(){
	var vivi = document.getElementById('sourcevid');
	var can = document.getElementById('fond');
	var canvas1 = can.getContext('2d');
	
	for(var i=50;i<=500;i+=50){
	
		for(var j=50;j<=500;j+=50){
		
		if (kcubecam.a==2) {
		kcubecam.a=0;
		}
		
			canvas1.save();
			canvas1.translate(j-25,i-25);
			
			if(kcubecam.a==1 || kcubecam.a==1.5){
			canvas1.scale(1,-1);
			}
			canvas1.drawImage(vivi,-25,-25,50,50);
			kcubecam.a+=1/2;
			canvas1.restore();
		}
	}
	kcubecam.copie(can);
	kcubecam.a=0;
},

copie:function(can){

	document.getElementById('droite').getContext('2d').drawImage(can,0,0);
	document.getElementById('gauche').getContext('2d').drawImage(can,0,0);
	document.getElementById('face').getContext('2d').drawImage(can,0,0);
	document.getElementById('dessus').getContext('2d').drawImage(can,0,0);
	document.getElementById('dessous').getContext('2d').drawImage(can,0,0);
},
}

function dispatche(effet){

	clearInterval(kcubecam.inter);
	kcubecam.a=0;
	
	if (effet=='retard') {
		kcubecam.a=3;
		kcubecam.inter=setInterval(kcubecam.clone0,40);
	}

	if (effet=='rond') {
		kcubecam.a=3;
		kcubecam.inter=setInterval(kcubecam.clone1,40,kcubecam.a);
	}
	
	if (effet=='carre') {
		kcubecam.inter=setInterval(kcubecam.clone2,40,kcubecam.a);
	}
	
	if (effet=='dr') {
		kcubecam.inter=setInterval(kcubecam.clone3,40,kcubecam.a);
	}
	
		if (effet=='dz') {
		kcubecam.inter=setInterval(kcubecam.clone4,40,kcubecam.a);
	}
	
		if (effet=='db') {
		kcubecam.inter=setInterval(kcubecam.clone5,40,kcubecam.a);
	}
	
	if (effet=='dc') {
		kcubecam.inter=setInterval(kcubecam.clone6,40,kcubecam.a);
	}
	
	if (effet=='dd') {
		kcubecam.inter=setInterval(kcubecam.clone7,40,kcubecam.a);
	}
	
	if (effet=='de') {
		kcubecam.inter=setInterval(kcubecam.clone8,40,kcubecam.a);
	}
}

function init() {

	video = document.getElementById('sourcevid');
	
	if (navigator.getUserMedia) {
		
		navigator.getUserMedia('video', successCallback, errorCallback);
		
		function successCallback(stream) {
			video.src = stream;
			video.play();
		}
		function errorCallback(error) {
			alert('code erreur' + error.code + ']');
			return;
		}	
		
		
	}
	
	else if (navigator.mozGetUserMedia) {
		
		window.navigator.mozGetUserMedia({video:true},
		
		function (stream) {
			video.mozSrcObject = stream;
			video.play();
		},

		function (error) {
			alert('code erreur' + error.code + ']');
			return;
		})
		
	}

	else if (navigator.webkitGetUserMedia) {

		window.navigator.webkitGetUserMedia({video: true},
		
		function (stream) {
			
			video.src = window.webkitURL.createObjectURL(stream);
			video.play();
		},
		function (error) {
			alert('code erreur' + error.code + ']');
			return;
		})
	}
}

window.onload = init;

Conclusion :


tout a fait
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)