Jump to content

Display image stream


psmaaswinkel

Recommended Posts

I am trying to display an image stream from my pond cam... The stream generated by my ip video server is a jpeg stream without boundaries. Causeur of this the normal mime replace isn't working. I need php to read a picture from the stream, and display the picture in the browser while reading the next picture in the background.

 

I've got to the point that I am able to connect to the stream, read the first image, and display it in the browser as can be seen in the link below

(cam is only on from 09:00 until 16:00)

 

http://cam.xsiteit.nl/readstream_test.php

 

From this point I need to read the second image and replace the image in the browser with the new one.  This process has to continu until the browser is closed.

 

Any help would be great!

 

Regards, Peter

 

 

Link to comment
Share on other sites

I would recommend something along the lines of an AJAX call to the request_stream page, that will create a new image.

If the new image is created we then just load it into a DIV or whatever.

 

Should be something quite simple to accomplish, I may be able to come up with something for you, if you cannot do it yourself.

 

Regards, PaulRyan.

 

 

Link to comment
Share on other sites

The following works as I have tested it, not sure if it is what you're looking for though.

Just change the orginal page "readstream_test.php" so it creates the image, it does not need to output it to the browser (I think).

 

Filename: pond_stream.php

<html>
<head>
<title> My Pond </title>
<script type="text/javascript" src="functions.js"></script>
</head>

<body>

  <div id="currentImage">
    <img src="http://cam.xsiteit.nl/img-0.jpg?<?=time();?>"></div>
  </div>

  <div id="nextImage" style="display:none;">
  </div>

  <div id="streamStatus" style="font-family:Verdana; font-size:12px; margin-top:5px; background:#CECECE; padding:5px; width:164px; border:1px solid #999;">
    Showing latest image
  </div>

</body>
</html>

 

Filename: functions.js

  function loadStream() {
    document.getElementById('streamStatus').innerHTML='Generating new image';
    var xmlhttp;
    var thisTime = new Date();

    if(window.XMLHttpRequest) {
      xmlhttp=new XMLHttpRequest();
    } else {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
      if(xmlhttp.readyState==4) {
        document.getElementById('nextImage').innerHTML='<img src="http://cam.xsiteit.nl/img-0.jpg?'+thisTime.getTime()+'">';
        document.getElementById('streamStatus').innerHTML='Loading new image';
        setTimeout("document.getElementById('currentImage').innerHTML=document.getElementById('nextImage').innerHTML;         document.getElementById('streamStatus').innerHTML='Showing latest image';",1000);
        setTimeout("loadStream()",2000);
      }
    }

    xmlhttp.open('GET','http://cam.xsiteit.nl/readstream_test.php',true);
    xmlhttp.send();
  }

  window.onload=loadStream;

 

Tell me how it goes for you :)

 

Regards, PaulRyan.

Link to comment
Share on other sites

Thanks for the help Paul!

 

Your script auto updates the image correct. The only problem with this option is the refresh rate.

Because the original script still has to connect with the video server for each image, the refresh rate is limited by this.

 

The stream delivered by the ipsever is a continues stream of jpeg's as can be seen below (this is the raw data i need to process)

 

http://93.125.236.139:81/snapshot.htm

 

To be able to get a higher refresh rate, the original readstream_test.php script has to read a image, and continue to read the next image while proccessing the first image...

 

If you need the readstream_test.php script please let me know...

 

Regards, Peter

 

Link to comment
Share on other sites

Know how the "readstream_test.php" works would help, so the source code of that would be nice.

 

I'm not 100% sure on how to do this other than call the url "http://93.125.236.139:81/snapshot.htm" every so often and generate the latest image.

 

I could have a go at it, but I am not promising anything  ::)  :D

 

Regards, PaulRyan.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.