Click here to Skip to main content
15,881,938 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi,

If have a Raspberry Pi surveillance cam and it takes every 3 seconds a snapshot.
This works 100%, and I display the image with help of the following HTML code:
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
  <HEAD>
    <META HTTP-EQUIV="refresh" CONTENT="5;">  
 <style type="text/css">
 img
   {
   width:316px;
   height:207px;
   position:fixed;
   top:0px;
   left:0px;
   }
 </style>
  </HEAD>
  <BODY>
     <img src="http://192.168.1.121/snapshot.jpg"  alt="Frontdoor"> 
  </BODY>
</HTML>    


But the problem is that the HTML page sometimes read the image while the file is written on the server. At that moment the file-size is 0 bytes, the HTML page shows a white rectangular containing nothing.

I'm not a star in HTML or Javascript so my question is how do I make an If-Then-Else for this case?
Like:
VB
If filesize("http://192.168.1.121/snapshot.jpg") > 0
 Then
  Show Image
 Else
  Do not refresh the image 
Endif


For me it does not make any difference in which language this problem is solved...
Thanks in advance!

Alex
Posted
Updated 22-Dec-14 20:46pm
v2
Comments
Kornfeld Eliyahu Peter 23-Dec-14 2:51am    
According to your HTML page it is a standalone page do its refresh all alone - not code-behind...do you want to change that?
(JavaScript can't check it for you alone...)
alexhouben 27-Dec-14 18:48pm    
<META HTTP-EQUIV="refresh" CONTENT="5;">

1 solution

You could look at refreshing the image using Javascript

This first method wont combat the issue with loading a broken image, however it will update quickly (i've got it set at 500ms - 0.5s), I use a security cam at home and although it does occasionally show a broken image it is only for a very small time:

JavaScript
function refreshImage()
{
    var src = "http://192.168.1.121/snapshot.jpg?" + new Date().getTime();
    var myImage = new Image();

    myImage.src = src;
    myImage.onload = function(){
        document.getElementsByTagName('img')[0].src = src;
    };
}

setInterval( refreshImage, 500 );


Alternatively, you could load the image in with XHR - but you'll probably have to set up a local domain for it to work instead of IP address based. - This will fix the broken image issue - I've added in the Content-Length check but you could probably remove this and it still work fine

JavaScript
function refreshImage()
{
    var src = "http://192.168.1.121/snapshot.jpg?" + new Date().getTime();

    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', src, true);
    xhr.onreadystatechange = function(){
      if ( xhr.readyState == 4 && xhr.status == 200 ) {
         if( xhr.getResponseHeader('Content-Length') > 0 )
         {
            document.getElementsByTagName('img')[0].src = src;
         }
      }
    };
    xhr.send(null);
}


setTimeout( refreshImage, 5000 );
 
Share this answer
 
v2
Comments
Chubby Ninja 5-Jan-15 4:52am    
Why do people not elaborate on their downvotes? I thought this was a suitable solution, any indication why it is not is welcome

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900