On 2007-01-06, Randy Webb <Hi************@aol.comwrote:
JD said the following on 1/5/2007 5:05 AM:
>Hello,
I have webcams, and I want to display the images (jpg) from the cameras
on a webpage, refreshed continuously.
For a smooth transition I found a script that utilises double buffering.
This works nice, but it is rather complex. I need to change it because
it is made to display one camera, but I want more cameras on one page.
With every change I make the refresh stops.
Then you are changing something that shouldn't be changed.
>Does someone have an example (or a pointer) how to make such a
script/page (simple)?
Post your page so far, it may be something simple that can be modified
rather than guessing at your setup.
Here is my working code so far. It is a stripped-down version of the
page provided by the manufacturer. Some parts are rewritten, but a full
rewrite can only be done if I understand the reload/buffering mechnism.
The code can only display 1 camera, I would like to display several
(e.g. 4) cameras. Does someone how the code must be changed to make this
possible?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Camera viewer -->
<!-- Javascript to reload automatically -->
<!-- based on code by Mobotix -->
<!-- rewritten by Fulko van Westrenen -->
<!-- 4 April 2005 -->
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<title>Live Camera</title>
<style type="text/css">
<!--
table.code{background:#ccffcc; border: 0;}
div.width{width:640}
div.date{font - style:italic;text - align:right;font - size:80 %;}
div.footer{font - size:80 %}
-->
</style>
<meta http="" equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" language="JavaScript1.2">
var pic_url = "http://address/picture.jpg";
var noframepath = "http://address/error.jpg";
var n = Math.floor (Math.random () * 1000000);
var session_id = Math.floor (Math.random () * 1000000);
var startn = n;
var GetItOn = 1;
var recordmult = 1;
var framestep = recordmult * 12;
var buffer = new Image ();
var aktiv = null;
var db_enabled = 0;
var passiv = null;
var current_refresh_method_nr=0;
function debugmsg(k) {};
function DoComplete ()
{
if (db_enabled != 0)
{
if (db_enabled < 0)
{
document.CamPic.style.display = "";
buffer.style.display = "none";
}
else
{
buffer.style.display = "";
document.CamPic.style.display = "none";
}
db_enabled *= -1;
}
else
{
document.CamPic.src = buffer.src;
}
GetItOn = 1;
}
function LoadError ()
{
debugmsg ("LoadError:#" + (n - 1) + " db:" + db_enabled);
if (db_enabled != 0)
{
db_enabled *= -1;
}
else
{
document.CamPic.src = noframepath;
}
GetItOn = 1;
}
function setframerate()
{
recordmult=1;
framestep = Math.round (recordmult * 12);
debugmsg ("setframerate: aktiv=" + aktiv + " rm=" + current_refresh_method_nr + " mult:" + recordmult + " fs=" + framestep);
if (aktiv)
{
window.clearInterval (aktiv);
aktiv = null;
}
document.CamPic.onerror = null;
buffer.onerror = null;
if (recordmult < 0)
{
return;
}
aktiv = window.setInterval ("Animation()", 1000 * recordmult);
GetItOn = 1;
Animation ();
}
function Animation()
{
var my_rm_nr = current_refresh_method_nr;
var my_fr_step = framestep;
var my_session = session_id;
if (GetItOn == 1 || (my_rm_nr == 1 && my_fr_step 0))
{
GetItOn = 0;
if (db_enabled < 0)
{
buffer.onerror = buffer.onload = null;
document.CamPic.onerror = LoadError;
document.CamPic.onload = DoComplete;
if (my_rm_nr == 0)
document.CamPic.src = pic_url + "?rand=" + String (n++);
else
document.CamPic.src =
pic_url + "?sync=" + my_fr_step + "&session=" + my_session +
"&rand=" + String (n++);
}
else
{
document.CamPic.onerror = document.CamPic.onload = null
buffer.onerror = LoadError;
buffer.onload = DoComplete;
if (my_rm_nr == 0)
buffer.src = pic_url + "?rand=" + String (n++);
else
buffer.src =
pic_url + "?sync=" + my_fr_step + "&session=" + my_session +
"&rand=" + String (n++);
}
}
}
function animation_init()
{
if (document.all && (navigator.platform.substr (0, 3) != "Mac"))
{
document.CamPic.insertAdjacentHTML ("AfterEnd",
"<img border=0 style=\"display:none;\" name=dbbuffer><\/b>");
buffer = document.dbbuffer;
db_enabled = 1;
}
setframerate ();
}
</script>
</head>
<body onload="animation_init()">
<h3>webcam </h3>
<p><img src="http://address/picture.jpg" name=
"CamPic" id="animImage"></p>
</body>
</html>
