Question

任何人都可以指导我如何实现这一目标......我将它们列在指针中......

Linux二进制文件从本地连接的webcamera中捕获帧并将它们存储在一个文件夹中。这是一个持续的过程。该图像以数字形式存储。
我有一个网络服务器，可以输出从webcamera收到的最新图像。这是一个PHP文件，可以获取最近收到的大部分图像并打印出来。
我现在拥有的是一个javascript，它每秒刷新一次图像并显示在img标签中。
虽然它有效但输出很慢并且每次缓慢更新一帧。
我正试图以一种应该的方式快速显示图像看起来像正在播放的mjpeg电影（并不是说它必须如此优秀正如我从论坛中了解到http确实有它的开销一样）

＆＃13;

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

＆＃13;

<img src='/latimage.php?camid=$selectedcamid' id='pic1'>

＆＃13;

以上代码非常完美。但我不满意的想法是想快速显示从网络摄像头获得的帧。比如每秒至少显示3到4帧。
据我所知，到目前为止我的搜索并不太可行由于HTTP进程确实需要时间，因此刷新过快。
我试图找到一些使用方法完成此操作的细节通过它我可以预取100帧到一个图像数组（我会打电话它缓冲）并开始以该速率一次显示一个图像每张3张图片。
显示图像的Whiles应删除较旧的图像最后应该插入数组和最新的数据。
因此循环是无限的。

我很抱歉问了太多问题。我无法找到任何正确的方向开始。我可以很容易地在.net windows应用程序中执行上述操作但在Web浏览器中我无法获得任何想法。我不确定jQuery图像数组或json或简单的javascript是否可以。

我需要一些指导..

Answer 1

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

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

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

1 个答案: