Intégration de 2 webcams sur la même page
Résolu
taylor34
Messages postés
14
Statut
Membre
-
taylor34 Messages postés 14 Statut Membre -
taylor34 Messages postés 14 Statut Membre -
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>
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>
2 réponses
-
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> -
Super merci beaucoup,
rapide, clair et efficace.
Merci encore
