如何通过WebRTC将Stream Edge AI视觉功能集成到任意浏览器

如果您的边缘摄像头视频流能够同时连接任意浏览器——无需插件、超低延迟，并实时叠加AI推理图层，会怎样?

本项目展示了如何将视频流从reCamera“解绑”——即将独立的视觉设备转变为任何网络系统均可集成的视频源。设备端的YOLO11n目标检测在reCamera上运行，编码后的视频通过RTSP传输，AI检测框则通过MQTT同步发送。一个轻量级的PC端WebRTC桥接器(基于OpenCV和aiortc构建)将推理结果与视频帧融合，并将其作为WebRTC流提供，直接在浏览器中播放，无需插件，也无需额外应用程序。

大多数边缘摄像头会将视频流锁定在专有应用程序或单一桌面客户端中。但在实际部署场景中，您希望将该视频流嵌入自己的仪表盘，将多个摄像头整合到同一页面，或通过不同网络远程访问视频画面。reCamera 将 RTSP 输出桥接到 WebRTC 技术(即 Google Meet 和 Discord 所采用的技术)，使带有 AI 注释的实时视频可在任何现代浏览器中播放，延迟低至亚秒级。

智能监控与安全值守——将实时、AI标注的摄像头画面嵌入您的现有安防控制台;WebRTC的NAT穿透技术可实现跨网络访问，无需使用VPN。

远程检查与诊断——技术人员可通过任意浏览器随时随地查看reCamera的实时画面及检测到的对象，非常适合工厂车间和难以到达的部署场景。

多摄像头视频聚合墙——在单个网页上显示多个重放摄像头的流，构建一个多通道监控墙。

- 定制化网络仪表盘与物联网平台集成 — 将reCamera作为标准视频源，将其AI标注的视频流传输至您的物联网平台或管理系统。

构建说明

步骤1 — 设置 reCamera

1. 请按照官方reCamera入门指南完成基本配置。

2. 为设备供电，并将其连接到您的网络(与电脑处于同一局域网)。

3. 打开浏览器，登录 Node-RED 工作区。

如果能看到 Node-RED 工作流编辑器，说明设置已完成。

步骤2 — 配置RTSP流媒体工作流程

此演示由 reCamera 上的四个 Node-RED 节点构成：摄像头、流、模型和 MQTT 输出。

2.1 导入并配置相机节点

将相机节点从左侧面板拖入工作区，然后双击进行配置。根据需要设置分辨率、帧率及其他参数。

2.2 导入并配置流节点

将 Stream 节点拖入工作区，选择 RTSP 协议，并配置流地址和端口。reCamera RTSP 流的默认地址为：

2.3 导入模型节点

将模型节点拖入工作区，点击设备，然后选择YOLO11n检测模型。

2.4 导入MQTT输出节点

将MQTT输出节点拖入工作区，并设置MQTT代理地址(您电脑的IP)以及与服务器通信所使用的主题(yolo11n_result)。

步骤3 — 在电脑上部署WebRTC桥接器

WebRTC 桥接器运行在电脑上，接收 RTSP 流和 MQTT 消息，将推理结果与视频融合，并将所有内容重新封装为 WebRTC 格式，以便浏览器播放。

克隆或下载 RTSP-to-WebRTC 仓库，然后安装 Python 依赖项：

步骤4 — 运行演示

1. 确保 reCamera 的 RTSP 流媒体工作流程已部署并运行。

2. 确保 PC 端的 server.py 已启动并运行。

3. 在电脑上打开浏览器。

4. 选择协议(RTSP)，并输入reCamera的RTSP流地址(默认已预填)。

5. 点击“开始播放”。

备注

reCamera 的 RTSP 流默认支持 1–2 个并发连接。如果已有其他程序(例如 VLC)正在连接，WebRTC 服务可能无法接收该流。在运行演示前，请先关闭其他 RTSP 客户端。

如果 aiortc 安装失败，请确保已安装 Microsoft C++ 构建工具(Windows)或 gcc/make(Linux)。

如果服务器日志显示不存在的PPS错误，说明尚未收到关键帧——这是正常现象，待下一个关键帧到达后(约1秒)会自动恢复。

要更改服务器端口，请使用 `python server.py --port`。

如果视频延迟较高，请检查网络带宽，并确保电脑与reCamera之间的连接稳定。

本文编译自hackster.io