好的,以下是使用 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 属性值,以显示摄像头画面。




