如何将图像预取到数组中，并在无限循环中显示在浏览器中

How to prefetch images into array and display them in browser in infinite loop

本文关键字：无限循环 浏览器 显示 数组 图像 预取      更新时间：2023-09-26

谁能告诉我如何做到这一点?我将它们列在指针中。

  1. linux二进制文件从本地附加的网络摄像机捕获帧并将它们存储在一个文件夹中。这是一个连续的过程。的

  2. 我有一个web服务器，它给出了从网络摄像机接收到的最新图像的输出。这是一个PHP文件，它获取最近收到的最多的图像并打印出来。

  3. 我现在拥有的是一个javascript，它每秒刷新图像并显示在img标签中。

  4. 我正试图以一种应该的方式快速显示图像看起来像正在播放的mjpeg电影(并不是说它必须很好)我从论坛上了解到，http确实有它的开销)

<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'>

    以上代码工作完美。但是我不满意的想法是想快速显示从网络摄像头获得的帧，比如每秒显示至少3到4帧。
  1. 从我的搜索到目前为止，这是不太可行的刷新动作太快，因为HTTP进程确实需要时间。

  2. 我正试图找到一些关于使用方法完成这项工作的细节通过它，我可以将100帧预取到图像数组中(我将调用它缓冲)并开始以该速率一次显示一个图像

  3. 在显示图像时，应该删除旧图像

    4. 因此循环是无限的。
很抱歉我问了太多的问题，我找不到合适的方向开始。我可以很容易地在。net windows应用程序中做到上述，但在web浏览器中，我无法得到任何想法。我不确定如果jQuery图像数组或json或简单的javascript会做。

我需要一些指导。

如果您需要将相机输出捕获到磁盘，那么我建议将相机输出捕获为视频(以3 FPS)，然后使用WebSockets将该视频文件流式传输到浏览器。这里有一个这样做的例子。如果你愿意在你的服务器上运行nginx，那么live_thumb是一个完整的解决方案，可以通过WebSockets捕获和传输视频。

另一方面，如果你的目标只是查看相机的输出，你不需要存储视频，你可以考虑使用WebRTC并在两端运行浏览器，然后只是连接媒体流。换句话说，一个浏览器(可能是一个无头的变体)将与你的相机一起在系统上运行，并使用WebRTC将视频流式传输到你的其他浏览器。使用WebRTC，你可以获得更高的帧速率，而你的带宽可能仍然比以慢帧速率发送单个图像要低得多。

相关文章：