将 openCV C++ 视频流式传输到浏览器

Question

我正在尝试使用 C++ 中的 openCV 捕获内置网络摄像头，并进行一些处理。到目前为止，这是有效的。

现在我想将网络摄像头流式传输到浏览器。我怎样才能实现这一目标？

• 我应该创建一个 WebSocket 吗？或者使用 UPD 套接字？
  • Poco::Net::WebSocket
• 如何在浏览器中显示该内容？HTML5 和 JS 可以实现吗？

谢谢。

Answer 1

所以我自己找到了解决方案。这个概念是这样的：

我的版本server是WebSocket-Server使用POCO Library构建的。

Server：
在主线程中初始化相机（相机必须在主线程中初始化）。建立连接后WebSocket，服务器从 捕获帧cv::VideoCapture，将帧转换为JPEG，并将图像编码为Base64字符串，最后将该字符串发送回客户端。

浏览器：
在浏览器中，接收到的Base64字符串可以被标签解释为图像img。

<img id="image" src="" width="1280" height="720"/>  

ws.onmessage = function(evt)
{
  $("#image").attr('src',  'data:image/jpg;base64,'+ evt.data);
};

因此，如果服务器现在在一秒内发送 30 帧，则livestream浏览器会很流畅。