Utilisation de la camera dans un navigateur

Soyez le premier à donner votre avis sur cette source.

Vue 6 646 fois - Téléchargée 1 126 fois

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

@karamel
Messages postés
1707
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 août 2019
41 -
bonjour pouvez vous me dire pourquoi lorsque je mes le lien ma webcam ne fonctionne pas ?
@karamel
Messages postés
1707
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 août 2019
41 -
je ne saurait le dire peut etre la version du navigateur il faut au minimum utiliser firefox17 chrome 23 et opera 11

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.