ZBLOG

用c++ 代码写个服务端,获取摄像头画面发送到网页,还要写个html网页

好的,以下是使用 C++ 编写的服务器代码:

#include <iostream>
#include <string>
#include <cstdlib>
#include <cstring>
#include <thread>
#include <chrono>

// 使用 OpenCV 库获取摄像头画面
#include "opencv2/opencv.hpp"

// 使用 Boost 库处理 WebSocket 通信
#include "boost/beast/core.hpp"
#include "boost/beast/websocket.hpp"
#include "boost/asio/ip/tcp.hpp"

namespace beast = boost::beast;    // from <boost/beast.hpp>
namespace http = beast::http;      // from <boost/beast/http.hpp>
namespace websocket = beast::websocket;  // from <boost/beast/websocket.hpp>
namespace net = boost::asio;       // from <boost/asio.hpp>
using tcp = boost::asio::ip::tcp;  // from <boost/asio/ip/tcp.hpp>

void read_camera_and_send(websocket::stream<tcp::socket>& ws) {
    cv::VideoCapture cap(0);
    if (!cap.isOpened()) {
        std::cerr << "Failed to open camera\n";
        return;
    }

    cv::Mat frame;
    while (true) {
        cap.read(frame);   // 获取一帧画面

        if (frame.empty()) {   // 如果没有获取到,则退出循环
            break;
        }

        std::vector<uchar> buf;
        cv::imencode(".jpg", frame, buf);  // 将图像编码为 JPG 格式

        try {
            ws.write(net::buffer(buf));   // 发送编码后的图像数据到浏览器
            std::this_thread::sleep_for(std::chrono::milliseconds(100));   // 等待一段时间再继续发送下一帧
        }
        catch (const beast::system_error& e) {
            std::cerr << "Error sending message: " << e.what() << "\n";
            break;
        }
    }
}

int main(int argc, char* argv[]) {
    // 检查命令行参数,确保提供了正确的端口号
    if (argc != 2) {
        std::cerr << "Usage: server <port>\n";
        return EXIT_FAILURE;
    }

    auto const address = net::ip::make_address("0.0.0.0");
    auto const port = static_cast<unsigned short>(std::atoi(argv[1]));

    net::io_context ioc{ 1 };

    tcp::acceptor acceptor{ ioc, {address, port} };
    while (true) {
        try {
            // 等待 WebSocket 客户端连接
            tcp::socket socket{ ioc };
            acceptor.accept(socket);
            websocket::stream<tcp::socket> ws{ std::move(socket) };
            ws.accept();

            // 创建一个新线程来从摄像头获取画面并发送到浏览器
            std::thread t(read_camera_and_send, std::ref(ws));
            t.detach();
        }
        catch (const beast::system_error& e) {
            std::cerr << "Error accepting connection: " << e.what() << "\n";
        }
    }

    return EXIT_SUCCESS;
}

这个例子会启动一个 WebSocket 服务器,它将使用 OpenCV 库获取摄像头画面,并将其编码为 JPG 格式后发送给浏览器。

以下是 HTML 网页代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>摄像头画面</title>
</head>
<body>
    <img id="video" src="" width="640" height="480">

    <script type="text/javascript">
        // 创建 WebSocket 连接
        const ws = new WebSocket("ws://localhost:8080");

        // 当收到消息时,更新图像
        ws.onmessage = function(event) {
            document.getElementById("video").src = "data:image/jpeg;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array(event.data)));
        };
    </script>
</body>
</html>

这个例子会创建一个 <img> 元素,并在 WebSocket 连接上接收来自服务器的 JPG 格式数据。每次收到一帧图像后,它将使用 base64 编码并设置为 <img>src 属性值,以显示摄像头画面。

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=3113

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?