Webcam Caching Problems

[wallace]

I am having the same problem. I have a security camera send a Jpeg to my site every 30 seconds. In the placeholder head section I have the the following code: <meta http-equiv="refresh" content="30" > This no longer works it does not change the jpeg. Pressing Ctrl+F5 works and the jpeg changes. I would like to try Acorn suggestions.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

Do I add all three lines or try one at a time? and how would I add The refresh every 30 seconds to the code?

[Acorn]

wallace, I moved your query out of https://www.talkgraphics.com/showthr...ching-Problems as it was quite specific to a webcam.

Acorn

[Acorn]

wallace, there would be no harm in including all four statements at once.

You may additionally have to force a refresh.

This code is old-school but might still work:

<img id="webcam" src="http://cameraftpapi.drivehq.com/api/Camera/GetCameraThumbnail.ashx" name="publishedCamera" width=100% height=100%>


<script>
window.setInterval("refreshCamera();", 30000); // thirty second interval


var url = 'http://cameraftpapi.drivehq.com/api/Camera/GetCameraThumbnail.ashx?';
var forcerefresh = 0;


function refreshCamera() {
  forcerefresh = forcerefresh + 1;
  $('#webcam').attr('src',url + forcerefresh);
  console.log(url + forcerefresh);
}
</script>

You change the src & url to point to your webcam's output image.
Every 30 seconds the query is incremented (the url ? part).
This might fool your caching and supply an updated image.

Without seeing your actual design, i am only guessing.

Acorn

[gwpriester]

Acorn - Does this go in a placeholder or does it go in the HTML Head or Body part of the page?

[Acorn]

Acorn - Does this go in a placeholder or does it go in the HTML Head or Body part of the page?

It is body code for a Placeholder the size of the current image.
What I would do is select the image and just add Placeholder code to that.

It is as general as it is until the OP advised what he is currently using.

Acorn

[wallace]

Acorn thanks for the help. Here is what happening now

I have a placeholder and in the Edit widget body Tag I have:

<img id="rowcamera" src="https://palmlane.com/rowcamera.jpg"/> name="rowcamera" width=704 height=480>
This tag is working great it puts the image on my web page with no problems.

In the head tag I have the following tag:

<meta http-equiv="refresh" content="30" >
This tag refreshes the the whole page at 30 seconds and not just the image, it stays the same. But if I press CTRL + F5 The image changes
with the whole page.
You can see this on https://palmlane.com/row%20web%20cam.htm

What I need is a code that would refresh the image every 30 seconds

[Acorn]

The META referesh is duplicated, probably because of you having a Variant.
The variant image will never show as you are using an ID to identify the image address: <img id="rowcamera" src="https://palmlane.com/rowcamera.jpg">
Your code as in TG is not right: <img id="rowcamera" src="https://palmlane.com/rowcamera.jpg"/> name="rowcamera" width=704 height=480>
I would use <img id="rowcamera" src="https://palmlane.com/rowcamera.jpg" name="rowcamera" width=100% height=100%> and set the Placeholder to the required size.
I cannot access your image in my Xara design as I get a 403 error.
You camera is updating every 20 seconds; I used File > Import from Web Address to check this.

In you current Placeholder, I would add this script:


<script>
window.setInterval("refreshCamera();", 30000); // thirty second interval


var url = 'https://palmlane.com/rowcamera.jpg?';
var forcerefresh = 0;


function refreshCamera() {
forcerefresh = forcerefresh + 1;
$('#webcam').attr('src',url + forcerefresh);
console.log(url + forcerefresh);
}
</script>

Sorry I cannot test from here.
If you use this, and it works, you do not need the META statement.

Acorn

[wallace]

I followed your great instructions and my site main and Variant are working great except the image doesn't refresh (except with CTRL + F5). I have nothing in the head placeholder and the code in the body placeholder"

<img id="rowcamera" src="https://palmlane.com/rowcamera.jpg" name="rowcamera" width=100% height=100%>

<script>
window.setInterval("refreshCamera();", 30000); // thirty second interval


var url = 'https://palmlane.com/rowcamera.jpg?';
var forcerefresh = 0;


function refreshCamera() {
forcerefresh = forcerefresh + 1;
$('#webcam').attr('src',url + forcerefresh);
console.log(url + forcerefresh);
}
</script>

Thanks again
John

[Acorn]

John, I am sorry, I overlooked a typo.

Change $('#webcam').attr('src',url + forcerefresh); to $('#rowcamera').attr('src',url + forcerefresh);
While I cannot see the image directly, the Placeholder now refreshes and hopefully, the image too.

Another suggestion:
Do you have a .htaccess file on the server?
If so, you could also try adding:

<files "rowcamera.jpg">
Header set Cache-Control "no-cache"
</files>

Acorn

[wallace]

Thanks again, everything is working great. My website is really a hobby, I have been on this forum since 2010, I don't post much or ask for help because I have always used Search on this forum and almost always found the answer to my problem.
You have been one of the major contributors on this forum.
Thanks again for your help.

John