以HTML格式显示视频队列缓冲区

Question

我希望能够在HTML文件中查看opencv帧的队列（来自我的网络摄像头）。

我有一个编写器函数，它将网络摄像头帧写入python队列：

def writer():
    cap = cv2.VideoCapture(0)
    while(True):
        # Capture frame-by-frame
        ret, frame = cap.read()
        # If a frame is read, add new frame to queue
        if ret == True:
            q.put(frame)
        else:
            break

我的代码的主要部分如下：

q = queue.Queue()
threading.Thread(target=writer).start()

我现在有一个名为q的队列，我想在HTML文件中查看。这样做的最佳方法是什么？

Answer 1

我假设您了解Python和Web开发（HTML，CSS，JavaScript），因为您需要在两端创建一些东西。

在您的HTML中，使用JavaScript连续执行帧请求并显示它们;一个简单的方法是使用jQuery中的ajax $ .get（）函数来获取新图像并显示它，并使用JavaScript setInterval（）方法调用每x毫秒加载新图像的函数检查This post on reloading an image是否简单实现，许多没有AJAX，例如：

setInterval(function () {
var d = new Date();
    $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
}, 2000);

我使用AJAX来吸引你的原因是你可能想用Python创建一个Web服务器，这样你的JavaScript就可以通过使用一个服务于图像帧的简单REST API来请求新的框架。在Python中，很容易从头开始创建您的Web服务器，或者如果您需要将其扩展为更复杂的事物，则可以使用像Flask这样的库。根据您的描述，您只需要使用一项服务创建Web服务器：下载图像。

在没有Web服务器的情况下执行此操作的一种非常hacky和缓慢的方法是使用imwrite（）将帧写入磁盘，并在循环中使用waitKey（毫秒）等待重写相同的映像文件。这样您就可以使用上面的JavaScript代码重新加载此图像。