Stream Edge AI Vision to Any Browser via WebRTC

Overview

What if your edge camera's video stream could reach any browser — with zero plugins, ultra-low latency, and live AI inference overlays — all at once?

This project demonstrates how to "free" the video stream from the reCamera — converting it from a standalone vision device into a video source that any web system can integrate. On-device YOLO11n object detection runs on the reCamera, the encoded video is pushed out via RTSP, and the AI detection boxes travel alongside via MQTT. A lightweight PC-side WebRTC bridge (built with OpenCV + aiortc) fuses the inference results onto the video frames and serves them as a WebRTC stream that plays directly in the browser — no plugins, no extra apps.

Most edge cameras lock their video stream inside a proprietary app or a single desktop client. But in real-world deployments, you want to embed that stream into your own dashboard, aggregate multiple cameras on one page, or access the feed remotely across different networks. It takes the reCamera's RTSP output and bridge it to WebRTC — the same technology behind Google Meet and Discord — so the live, AI-annotated video plays in any modern browser with sub-second latency.

- 🎥 Intelligent Surveillance & Security Monitoring — Embed live, AI-annotated camera feeds into your existing security dashboard; WebRTC's NAT traversal enables cross-network access without a VPN.

- 🏭 Remote Inspection & Diagnostics — Technicians view the reCamera's live feed with detected objects from any browser, anywhere — ideal for factory floors and hard-to-reach deployments.

- 🖥️ Multi-Camera Video Aggregation Walls — Display multiple reCamera streams on a single web page to build a multi-channel monitoring wall.

- 📊 Custom Web Dashboards & IoT Platform Integration — Treat the reCamera as a standard video source and pipe its AI-annotated stream into your IoT platform or management system.

Build Instructions

Step 1 — Set Up the reCamera

• 1. Follow the official reCamera Getting Started guide to complete basic configuration.
• 2. Power the device and connect it to your network (same LAN as the PC).
• 3. Open a browser and go to http://192.168.42.1, then log in to the Node-RED workspace.

If you can see the Node-RED workflow editor, setup is complete.

Step 2 — Configure the RTSP Streaming Workflow

This demo is built from four Node-RED nodes on the reCamera: Camera, Stream, Model, and MQTT out.

2.1 Import & Configure the Camera Node

Drag the Camera node from the left palette into the workspace and double-click to configure it. Set resolution, frame rate, and other parameters as needed.

2.2 Import & Configure the Stream Node

Drag the Stream node into the workspace, select the RTSP protocol, and configure the stream address and port. The default reCamera RTSP stream address is:

2.3 Import the Model Node

Drag the Model node into the workspace, click Device, and select the YOLO11n Detection model.

2.4 Import the MQTT Out Node

Drag the MQTT out node into the workspace and set the MQTT broker address (your PC's IP) and the topic used to communicate with the server (yolo11n_result).

Step 3 — Deploy the WebRTC Bridge on the PC

The WebRTC bridge runs on the PC. It receives the RTSP stream and MQTT messages, fuses the inference results onto the video, and repackages everything as WebRTC for browser playback.

Clone or download the RTSP-to-WebRTC repository , then install and the Python dependencies:

```bash
cd rtsp_to_webrtc
pip install -r requirements.txt
python server.py --source rtsp://admin:admin@192.168.42.1:554/live --port 8080
```

Step 4 — Run the Demo

• 1. Ensure the reCamera's RTSP streaming workflow is deployed and running.
• 2. Ensure the PC-side server.py is started and running.
• 3. Open a browser on the PC and go to http://localhost:8080.
• 4. Select the protocol (RTSP) and enter the reCamera's RTSP stream address (pre-filled by default).
• 5. Click "Start Playback".

Notes

- The reCamera's RTSP stream supports 1–2 concurrent connections by default. If another program (e.g., VLC) is already connected, the WebRTC service may fail to receive the stream. Close other RTSP clients before running the demo.

- If aiortc installation fails, ensure the Microsoft C++ Build Tools (Windows) or gcc/make (Linux) are installed.

- If the server log shows a non-existing PPS error, this means a keyframe has not yet arrived — this is normal and will auto-recover once the next keyframe arrives (~1 second).

- To change the server port, use `python server.py --port <port>`.

- If video latency is high, check network bandwidth and ensure a stable connection between the PC and the reCamera.