OpenCV C++ 通过Websocket发送摄像头图片到Web端

文章目录

  • 1. 说明
  • 2. 流程
  • 3. 代码
    • 3.1 C++端代码
      • 3.1.1 主要逻辑
        • cv::Mat格式数据转换为jpg格式数据
      • 3.1.2 websocket服务端代码
    • 3.2 Web端代码
      • index.html
      • video.js
  • 4. 演示效果
  • 5. 代码

1. 说明

现有业务,正在做一个Windows桌面程序,使用C++ 和 Qt 编写硬件调用的硬件接口,用Web端写程序的UI界面。程序中需要做人脸识别,Web端要预览摄像头画面,C++来实现人脸检测与人脸识别。为了使Web端实时预览到摄像头的画面,目前想到了一个方案:C++端打开摄像头抓图,然后发送图片给Web端来显示,Web端展示效果如同视频流一样实时流畅。


2. 流程

C++端: 创建Websocket服务端,使用OpenCV打开摄像头,抓取图片,发送给Web端
Web端:连接Websocket服务端,接收C++端发送过来的图片,显示


3. 代码

3.1 C++端代码

3.1.1 主要逻辑

// 创建websocket服务端
m_websocketServer = new WebSocketServer();

VideoCapture cap;
cap.open(0, CAP_DSHOW);  // 打开摄像头,采用 CAP_DSHOW 比 CAP_ANY 打开摄像头要快很多

Mat frame;
while (cv::waitKey(1))
{
	// 抓取图片
	if (!cap.read(frame))
	{
		qDebug() << "No frames grabbed!\n";
		break;
	}
	
	// cv::flip(frame, frame, 1);   // 左右镜像

	// cv::Mat 格式数据转换为jpg格式数据
	std::vector<uchar> buf;
	cvMatToJPG(frame, buf);

	QByteArray jpgData = QByteArray::fromRawData(reinterpret_cast<const char*>(buf.data()), buf.size());
	
	// 发送图片数据到Web端
	emit m_websocketServer->sendBinaryMessage(jpgData);		
}
cv::Mat格式数据转换为jpg格式数据
void cvMatToJPG(const cv::Mat &input, std::vector<uchar>& buf)
{
    // jpeg编码
    std::vector<int> params;
    params.resize(3, 0);
    params[0] = cv::IMWRITE_JPEG_QUALITY;
    params[1] = 90;     // 压缩率

    cv::imencode(".jpg", input, buf, params);
}

3.1.2 websocket服务端代码

websocket服务端代码详见: gitee
里面的 websocketserver.hwebsocketserver.cpp
这里就不展示了。

本文使用了QT的websocket的功能,用来发送图片数据。如果不用QT的话,找一个C++写的websocket库替换上就可以了,可以使用这个websocket库:http://www.zaphoyd.com/websocketpp/


3.2 Web端代码

index.html

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频流测试title>

    
    <script src="./video.js">script>

    <div>
        <button onclick="start()">开始button>
    div>

    <br>
    <div>
        <img src="" id="Camera" alt="摄像头" style="text-align:left; width: 640px; height: 480px;"> 
    div>
    
head>
<body>
body>
html>

video.js

function start() {
    connecteClient();
}

function connecteClient() {
	// 打开一个 web socket
    var ws = new WebSocket("ws://127.0.0.1:45566");

    // 连接建立后的回调函数
    ws.onopen = function () {
        console.log("WebSocket 连接成功");
    };

    // 接收到服务器消息后的回调函数
    ws.onmessage = function (evt) {
        var received_msg = evt.data;
        //console.log("输出的内容" + received_msg);

        // blob格式再转换为base64格式
        blobToDataURI(received_msg, function (result) {
            document.getElementById("Camera").src = result;
        })
    };

    // 连接关闭后的回调函数
    ws.onclose = function () {
        // 关闭 websocket
        alert("连接已关闭...");
    };
}

// blob格式转换为base64格式
function blobToDataURI(blob, callback) {
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function (e) {
        callback(e.target.result);
    }
}

4. 演示效果

OpenCV C++ 通过Websocket发送摄像头图片到Web端_第1张图片

5. 代码

所有代码详见: send_image_to_web

你可能感兴趣的:(OpenCV,C++,websocket,opencv,c++)