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

1. 说明2. 流程3. 代码

3.1 C++端代码

3.1.1 主要逻辑

cv::Mat格式数据转换为jpg格式数据 3.1.2 websocket服务端代码 3.2 Web端代码

index.htmlvideo.js 4. 演示效果5. 代码

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

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

// 创建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 buf;
	cvMatToJPG(frame, buf);

	QByteArray jpgData = QByteArray::fromRawData(reinterpret_cast(buf.data()), buf.size());
	
	// 发送图片数据到Web端
	emit m_websocketServer->sendBinaryMessage(jpgData);		
}

void cvMatToJPG(const cv::Mat &input, std::vector& buf)
{
    // jpeg编码
    std::vector params;
    params.resize(3, 0);
    params[0] = cv::IMWRITE_JPEG_QUALITY;
    params[1] = 90;     // 压缩率

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

websocket服务端代码详见： gitee
里面的 websocketserver.h 和 websocketserver.cpp
这里就不展示了

    
    
    
    

    
    

    

        开始
    

    

    

         
    
    

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);
    }
}

所有代码详见： OpenCV_send_image_to_web