How to pre-clear images in an array and display them in a browser in an infinite loop

Can anyone direct me on how to achieve this. I list them in pointers.

  • Linux binar captures frames from a locally attached webcam and saves them in a folder. This is an ongoing process. Images are stored numerically.

  • I have a web server that gives the output of the latest images received from a webcam. This is a PHP file that receives the last majority of the images received and prints.

  • Now I have javascript that updates the image every second and displays in the img tag.

  • Although it works, the output is slow and slowly updated one frame at a time.

  • I am trying to quickly display images and in this way look like a mjpeg game being played (not that it was as good as I learned from the forums that HTTP has its overhead)

<script type="text/javascript">
function refresh(){
document.images["pic1"].src="/latimage.php?camid=$selectedcamid&ref=" + new Date();
setTimeout('refresh()', 1000);}
if(document.images)window.onload=refresh;
</script>
<img src='/latimage.php?camid=$selectedcamid' id='pic1'>
Run code
  • It works fine on code. But my unsatisfied mind wants to quickly display frames received from a webcam ... for example, displaying at least 3 to 4 frames per second.
  • As I understood from my searches so far, it’s not really possible to make the update run too fast, as the HTTP process takes a lot of time.
  • I'm trying to find some details on how to do this, using a method with which I can pre-select 100 frames in an array of images (I would call it buffering) and start displaying one image at a time at a speed of 3 images per second.

  • ,    .

  • , .

, . . .net windows , - - . , jQuery json javascript.

, .

+4
1

, ( 3 FPS), WebSockets. - . nginx , live_thumb - , WebSockets.

, - , , WebRTC , . , (, ) WebRTC. WebRTC , , , , .

0

All Articles