It would be good if the picture wouldn't blink at refreshing when using still images instead of stream. Without java applet. I've seen this made using double buffering technique on html pages for showing web cams. Perhaps someone could rewrite php script so it would use this tehnique.
Or is there some other option which eliminates blinking (excluding streaming or java applet) and I've missed it ?
Double buffered realtime still image request
Re: Double buffered realtime still image request
post some pages where this sistem is use
i have see it too but i dont remeber where.
... some one can doit.. i can doit...
let philip work on the C code.
i have see it too but i dont remeber where.
... some one can doit.. i can doit...
let philip work on the C code.
Re: Double buffered realtime still image request
I've attached bellow the script which I'm using for refreshes of 3 seconds and more, it's taken from our test page so it might have some unneeded code in it. Perhaps it can help.
Good .js script I also found on:
http://www.cowboyscripts.org/?page=webcam
Regards D.
EXAMPLE HTML CODE:*************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>IP CAMERAS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style type="text/css">
<!--
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
<SCRIPT language=JavaScript>
<!-- hide
// browser sniffer:
browserVer = parseInt(navigator.appVersion);
if (navigator.appName == "Microsoft Internet Explorer" && browserVer < 4)
{
alert("Internet Explorer 3 users need to hit 'Refesh' to update the image");
}
// The variables you need to change are: the filename of the picture,
// the refresh rate, and further down the FORM ACTION (look for the ***).
var picname = "http://193.77.25.56/images/DOMOFON.jpg"; // set this to the filename of your campicture
var speed = 3; // "var speed" is the refresh rate adjustment in seconds
var y = 2; // expected time to download the picture file
var x = speed; // current countdown
var cachepic = new Image();
<!-- Change "JSCamRemote.html" to whatever you want to call the page that
// opens in the remote window. -->
function startClock() {
if (x != "00") {
x = x - 1;
//document.form0.clock.value = x;
if (x == y) {
recache()
}
if (x <= 0)
{
reload()
}
timerID = setTimeout("startClock()", 1000);
}
}
function recache() {
onError=null
var now = new Date();
var camImg = picname //+ "?" + now.getTime();
cachepic.src = camImg;
}
function reload() {
document.images.campicture.src = cachepic.src;
x = speed;
//document.form0.clock.value = x;
}
//end hide -->
</SCRIPT>
</head>
<body bgcolor="#3399FF" onload="startClock()">
<table width="180" border="1" align="center" cellspacing="0" bgcolor="#666666">
<tr bgcolor="#333399">
<td height="20" bgcolor="#333399"><div align="center"><strong><font color="#FFFFFF" size="1">CAMERA</font></strong></div></td>
</tr>
<tr>
<td height="148" valign="middle"><div align="center"><img src="http://193.77.25.56/images/DOMOFON.jpg" name="campicture" width=320 height=240 border=0 id="campicture">
</div> </td>
</tr>
</table>
<div align="center"> </div>
</body>
</html>
Good .js script I also found on:
http://www.cowboyscripts.org/?page=webcam
Regards D.
EXAMPLE HTML CODE:*************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>IP CAMERAS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style type="text/css">
<!--
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
<SCRIPT language=JavaScript>
<!-- hide
// browser sniffer:
browserVer = parseInt(navigator.appVersion);
if (navigator.appName == "Microsoft Internet Explorer" && browserVer < 4)
{
alert("Internet Explorer 3 users need to hit 'Refesh' to update the image");
}
// The variables you need to change are: the filename of the picture,
// the refresh rate, and further down the FORM ACTION (look for the ***).
var picname = "http://193.77.25.56/images/DOMOFON.jpg"; // set this to the filename of your campicture
var speed = 3; // "var speed" is the refresh rate adjustment in seconds
var y = 2; // expected time to download the picture file
var x = speed; // current countdown
var cachepic = new Image();
<!-- Change "JSCamRemote.html" to whatever you want to call the page that
// opens in the remote window. -->
function startClock() {
if (x != "00") {
x = x - 1;
//document.form0.clock.value = x;
if (x == y) {
recache()
}
if (x <= 0)
{
reload()
}
timerID = setTimeout("startClock()", 1000);
}
}
function recache() {
onError=null
var now = new Date();
var camImg = picname //+ "?" + now.getTime();
cachepic.src = camImg;
}
function reload() {
document.images.campicture.src = cachepic.src;
x = speed;
//document.form0.clock.value = x;
}
//end hide -->
</SCRIPT>
</head>
<body bgcolor="#3399FF" onload="startClock()">
<table width="180" border="1" align="center" cellspacing="0" bgcolor="#666666">
<tr bgcolor="#333399">
<td height="20" bgcolor="#333399"><div align="center"><strong><font color="#FFFFFF" size="1">CAMERA</font></strong></div></td>
</tr>
<tr>
<td height="148" valign="middle"><div align="center"><img src="http://193.77.25.56/images/DOMOFON.jpg" name="campicture" width=320 height=240 border=0 id="campicture">
</div> </td>
</tr>
</table>
<div align="center"> </div>
</body>
</html>
-
zoneminder
- Site Admin
- Posts: 5215
- Joined: Wed Jul 09, 2003 2:07 pm
- Location: Bristol, UK
- Contact:
Re: Double buffered realtime still image request
I've been trying to avoid too much complex JavaScript if I can but I think this is an area that can be improved. Unfortunately the approach above wouldn't work in ZM. The reason is that no images are generated by the capture daemon unless asked for explicitly. This is to remove the overhead of writing files which maybe hardly ever get used. So the first thing the php does in ZM is prompt an image to be generated, which I think is where some of the delay comes in.
Using a pure JS approach that has no interaction with the server would not be able to prompt this image to be generated. However I think there may be a solution by using an invisible frame as the refresh agent and getting that to update the visible frame.
I'm looking at it anyway...
Phil,
Using a pure JS approach that has no interaction with the server would not be able to prompt this image to be generated. However I think there may be a solution by using an invisible frame as the refresh agent and getting that to update the visible frame.
I'm looking at it anyway...
Phil,