Intégration de 2 webcams sur la même page

Résolu/Fermé

taylor34 Messages postés 13 Date d'inscription samedi 3 mars 2012 Statut Membre Dernière intervention 31 janvier 2019 - 3 mars 2012 à 18:22
taylor34 Messages postés 13 Date d'inscription samedi 3 mars 2012 Statut Membre Dernière intervention 31 janvier 2019 - 4 mars 2012 à 10:00

Bonjour,
je souhaite intégrer deux webcams sur la même page html.
Cependant je me retrouve confronté à un problème car il n'y a qu'une webcam
qui apparait.
Je suppose que ce problème est lié au javascript qui est identique pour les deux webcams.
Ci-dessous ma page html. Merci d'avance pour votre aide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
</head>

<body>
<p><img src="images/chargement.jpg" alt="Chargement" name="Webcam" width="640" height="480" border="0" id="Webcam" />
<script language="JavaScript">
var n=Math.floor(Math.random()*1000000);
var startn=n;
var pic_url="http://91.121.33.165/~cam/angles-cam4.jpg";
var noframepath="images/indispo.jpg"; //Image non-disponible
var buffer= new Image();

function DoComplete()
{
document.Webcam.src = buffer.src;
LoadNext();
}

function LoadError()
{
document.Webcam.src=noframepath;
setTimeout("LoadNext();",5000);
}

function LoadNext()
{
//alert("LoadNext("+pic_url+");");
buffer.onload=DoComplete;
buffer.onerror=LoadError;
buffer.src=pic_url+"?sync=1&rand="+String(n++);
}

LoadNext();
</script> </p>
<p><img src="images/chargement.jpg" alt="Chargement" name="Webcam" width="640" height="480" border="0" id="Webcam" />
<script language="JavaScript">
var n=Math.floor(Math.random()*1000000);
var startn=n;
var pic_url="http://91.121.33.165/~cam/angles-cam5.jpg?sync=1&rand=333167";
var noframepath="images/indispo.jpg"; //Image non-disponible
var buffer= new Image();

function DoComplete()
{
document.Webcam.src = buffer.src;
LoadNext();
}

function LoadError()
{
document.Webcam.src=noframepath;
setTimeout("LoadNext();",5000);
}

function LoadNext()
{
//alert("LoadNext("+pic_url+");");
buffer.onload=DoComplete;
buffer.onerror=LoadError;
buffer.src=pic_url+"?sync=1&rand="+String(n++);
}

LoadNext();
</script>
</p>
</body>
</html>

A voir également:

Intégration de 2 webcams sur la même page
Supprimer une page word - Guide
Word numéro de page 1/2 - Guide
Page d'accueil iphone - Guide
Traduire une page web - Guide
2 comptes whatsapp - Guide

2 réponses

Réponse 1 / 2

nEm3sis Messages postés 710 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 113
4 mars 2012 à 04:48

Bonsoir,

2 problèmes ici
- tu utilise document.Webcam.src or document.Webcam est un tableau contenant tes 2 webcam
- tu utilises les même noms de fonction et de variables, donc la 2è fois ça écrase la première

voici une correction :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Document sans nom</title>
	<script type="text/javascript">
		function cam(url, id) {
			var n = Math.floor(Math.random()*1000000);
			var startn = n;
			var pic_url = url;
			var noframepath = "images/indispo.jpg"; //Image non-disponible
			var buffer = new Image();
			var webcam = document.getElementById(id);
			
			function DoComplete() {
				webcam.src = buffer.src;
				LoadNext();
			}

			function LoadError() {
				webcam.src=noframepath;
				setTimeout("LoadNext();",5000);
			}

			function LoadNext() {
				buffer.onload=DoComplete;
				buffer.onerror=LoadError;
				buffer.src=pic_url+"?sync=1&rand="+String(n++);
			}
			LoadNext();
		}
	</script>
</head>
<body>
	<p><img src="http://91.121.33.165/faded_logo.png" alt="Chargement" name="Webcam" width="640" height="480" border="0" id="Webcam1" /></p>
	<p><img src="http://91.121.33.165/faded_logo.png" alt="Chargement" name="Webcam" width="640" height="480" border="0" id="Webcam2" /></p>
	<script type="text/javascript">
		cam('http://91.121.33.165/~cam/angles-cam4.jpg', 'Webcam1');
		cam('http://91.121.33.165/~cam/angles-cam5.jpg', 'Webcam2');
	</script>
</body>
</html>

Réponse 2 / 2

taylor34 Messages postés 13 Date d'inscription samedi 3 mars 2012 Statut Membre Dernière intervention 31 janvier 2019
4 mars 2012 à 10:00

Super merci beaucoup,
rapide, clair et efficace.

Merci encore

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page

[référencement] Ne pas être référencé

Chemin Logo du site de la Cité de l'espace

programme qui n'affiche pas le mot secret

Discussions similaires

Newsletters