Web Camera Viewer (camera_web_viewer.py)¶

camera_web_viewer.py is a web-based camera image viewing tool that lets you view the image feeds from all of the robot's cameras in real time in a browser, with support for displaying multiple cameras simultaneously.

Features¶

Web interface, no client installation required
Supports simultaneous display of multiple cameras (up to 9 cameras)
Automatically detects available cameras
Real-time image refresh (10fps)
Smart caching mechanism to reduce redundant processing
Supports multiple image formats (JPEG, PNG, uncompressed RGB/BGR/grayscale, depth maps)
Depth camera pseudo-color display
Displays camera information (size, frame rate)

Installation Requirements¶

Required Dependencies¶

Python 3.10+
GDK Python package (agibot_gdk)
Flask (for the web server)

Optional Dependencies¶

OpenCV (recommended, for image processing and optimization)
NumPy (recommended, for image data processing)

Installing Dependencies¶

# Install Flask
pip install flask

# Install OpenCV (recommended)
pip install opencv-python

# Install NumPy (usually installed together with OpenCV)
pip install numpy

Usage¶

1. Run the Tool¶

cd ~/.cache/agibot/app/gdk/examples/python
source ~/.cache/agibot/app/env.sh
python3 camera_web_viewer.py

2. Access the Web Interface¶

After the tool starts, the access address will be displayed in the terminal:

Access address: http://0.0.0.0:5000

Open this address in a browser to view the camera feed.

3. Supported Camera Types¶

The tool supports the following 9 camera types:

Head rear-view fisheye camera (kHeadBackFisheye)
Head left fisheye camera (kHeadLeftFisheye)
Head right fisheye camera (kHeadRightFisheye)
Head stereo left camera (kHeadStereoLeft)
Head stereo right camera (kHeadStereoRight)
Left hand color camera (kHandLeftColor)
Right hand color camera (kHandRightColor)
Head depth camera (kHeadDepth)
Head color camera (kHeadColor)

4. Feature Description¶

Automatic Detection of Available Cameras¶

The tool automatically detects which cameras are available and only displays the feeds from available cameras. If a camera is unavailable, it will not be shown in the interface.

Real-Time Image Refresh¶

The images from all available cameras are automatically refreshed every 100ms (10fps)
Uses a smart caching mechanism to avoid redundant processing of the same frame
Displays processing statistics (new frame count, cache count, error count)

Camera Information Display¶

Each camera card displays: - Camera name - Image size (width x height) - Real-time frame rate (FPS)

Special Processing for Depth Cameras¶

Depth cameras automatically undergo the following processing: - Depth values are normalized to the 0-255 range - Apply pseudo-color mapping (JET color scheme) - Display depth range information (min/max depth values)

Configuration Options¶

Modify the Server Address and Port¶

Modify the initialization parameters of WebCameraViewer in the code:

viewer = WebCameraViewer(host='0.0.0.0', port=5000)

host: Server listening address (default: 0.0.0.0, allows external access)
port: Server port (default: 5000)

Modify Image Quality¶

Modify the quality parameter in the image_to_base64() method:

image_b64 = self.image_to_base64(decoded_image, quality=75)

Range: 1-100
Default: 75
The higher the value, the better the image quality, but the larger the file size

Modify the Refresh Rate¶

Modify the setInterval time interval in the HTML template:

// Update every 100ms (10fps)
setInterval(updateAllImages, 100);

Usage Examples¶

Example 1: Local Access¶

# Run the tool
python3 camera_web_viewer.py

# Open in a browser
# http://localhost:5000

Example 2: Remote Access¶

# Run the tool (listening on all network interfaces)
python3 camera_web_viewer.py

# Access from another device
# http://<robot IP>:5000

Example 3: Custom Port¶

Modify the port number in the code:

viewer = WebCameraViewer(host='0.0.0.0', port=8080)

Then access: http://localhost:8080