在 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 服务器：下载图像。

在没有网络服务器的情况下，一种非常笨拙且缓慢的方法是仅使用 imwrite() 将帧写入磁盘，然后使用 waitKey(milliseconds)在您的循环中等待，然后再重写相同的图像文件。这样您就可以使用上面的 JavaScript 代码重新加载此图像。