EdgeFirst WebUI

Browser-based real-time visualization platform for the EdgeFirst Maivin and Raivin embedded AI platforms.

The EdgeFirst WebUI provides web-based access to:

• Live Camera Streams - H.264 video with hardware-accelerated decoding, including tiled 4K
• AI Model Outputs - Object detection bounding boxes and segmentation masks
• Sensor Visualization - Radar and lidar point clouds in 2D grid and 3D views
• GPS/IMU Display - Real-time position tracking and orientation visualization
• System Configuration - Service management, model settings, and device configuration
• MCAP Recording - Record, playback, and upload sessions to EdgeFirst Studio

The WebUI is a static HTML/JavaScript application that requires the WebSRV backend server. Together they form the EdgeFirst web visualization stack:

flowchart LR
    Browser["Web Browser<br/>(WebUI)"] <-->|HTTPS| WebSRV["WebSRV<br/>(Rust Server)"] <-->|Zenoh| Services["EdgeFirst<br/>Services"]

• WebUI - Frontend visualization (this project)
• WebSRV - HTTPS server, Zenoh-to-WebSocket bridge, REST API

Both projects are typically deployed together on Maivin/Raivin devices.

The WebUI comes pre-installed on EdgeFirst devices at /usr/share/webui. Access via browser:

https://<device-hostname>.local

For local development or customization:

# Clone the repository
git clone https://github.com/EdgeFirstAI/webui.git

# No build step required - static files only
# Copy to device or serve with WebSRV locally

To deploy customized WebUI files on a device:

1. Copy files to a writable location:

   scp -r src/* [email protected]:/home/torizon/webui/

2. Update WebSRV configuration:

   # Edit /etc/default/webui
   DOCROOT=/home/torizon/webui

3. Restart the service:

   sudo systemctl restart webui

webui/
├── src/
│   ├── index.html          # Home page
│   ├── camera.html         # Camera visualization
│   ├── combined.html       # Multi-modal view
│   ├── combined_lidar.html # 3D lidar view
│   ├── grid.html           # Occupancy grid
│   ├── segmentation.html   # Segmentation only
│   ├── gps.html            # GPS map
│   ├── imu.html            # IMU orientation
│   ├── config/             # Configuration pages
│   ├── js/                 # JavaScript modules
│   ├── css/                # Stylesheets
│   └── assets/             # Images and models
├── ARCHITECTURE.md         # System architecture
├── TESTING.md              # Testing guide
├── CHANGELOG.md            # Version history
└── README.md               # This file

• Chrome 94+ or Edge 94+ (recommended)
• Firefox 97+ (WebCodecs flag may be required)
• Safari 16.4+ (limited WebCodecs support)

Required browser features:

• WebCodecs API (hardware H.264 decoding)
• WebGL 2.0 (3D rendering)
• WebSockets (real-time streaming)
• ES6 Modules

• ARCHITECTURE.md - System design and data flow
• TESTING.md - Testing procedures and automation
• CHANGELOG.md - Version history
• EdgeFirst Documentation - Platform documentation

• WebSRV - Backend server (required)
• EdgeFirst Studio - Cloud platform for datasets and training

Copyright 2025-2026 Au-Zone Technologies Inc.

Licensed under the Apache License, Version 2.0. See LICENSE for details.

Commercial support is available through EdgeFirst Support.