python - 在HTML中显示视频队列缓冲区

Question

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

我有一个writer函数，可将网络摄像头帧写入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服务器的情况下，这样做的真正棘手且缓慢的​​方法是仅使用 imwrite()将帧写入磁盘，然后在循环中使用 waitKey(milliseconds)等待重写相同的图像文件。这样，您可以使用上方的JavaScript代码重新加载该图像。