Web UI: Live Video Player & Real-Time Controls
The Live Video Player component in RUSEON Core delivers seamless, low-latency video streaming directly inside the web browser using modern WebRTC WHEP with automatic HLS fallback.
1. WebRTC & Auto-Fallback Architecture
- Primary Engine (WebRTC WHEP): Connects via native browser
RTCPeerConnection. Delivers sub-500ms real-time video with synchronized audio and low-jitter playout. - Failover Engine (Hls.js): If a client firewall blocks UDP media ports
50000-50100and no TURN server is reachable, the player automatically switches to the HTTP Live Streaming (HLS) playlist seamlessly within 2 seconds.
2. AI Bounding Box Canvas Overlay
When computer vision detections are published for a camera:
- Coordinates arrive over the WebRTC SCTP DataChannel (
label: "metadata"). - The player renders bounding boxes, class labels (e.g.
person 0.94,car 0.88), and tracking IDs directly on an overlaying HTML5 Canvas synced to video timestamps. - Operators can toggle the AI overlay on or off via the player toolbar.
3. Interactive Player Toolbar Controls
- PTZ Controls: Pan, tilt, and optical zoom directional controls with speed sliders for ONVIF-enabled cameras.
- Instant Snapshot Capture: Captures the current uncompressed video frame and downloads a high-resolution PNG/JPEG snapshot with one click.
- Volume & Audio Mute: Audio monitoring control (unmuted streams auto-play upon user interaction).
- Fullscreen & Picture-in-Picture (PiP): Pop out the stream into a floating desktop window or toggle true full-screen.