ROS Web Video Streaming Guide

AIBOMECH Blog ROS & Robotics 8 min read

ROS (Robot Operating System) web video streaming allows you to view your robot's camera feed directly in a web browser without special plugins. This powerful capability lets you monitor your robot's visual data remotely and create custom web interfaces for robotics applications. In this post, we'll explore how to set up web video streaming for ROS image topics using the web_video_server package.

🎥 What is ROS Web Video Streaming?

ROS Web Video Streaming is a system that converts ROS image topics into web-compatible video streams. The web_video_server package provides HTTP streaming of ROS image topics in multiple formats including MJPEG, VP8, VP9, H264, and PNG. This means you can access your robot's camera feed from any device with a web browser - no special software required!

🔧 Prerequisites You'll Need

Before diving into web video streaming, make sure you have these essentials ready:

  • ROS Installation: Either ROS Noetic (ROS 1) or ROS 2 Humble or newer
  • Basic ROS Knowledge: Understanding of topics, nodes, and launch processes
  • Modern Web Browser: Any browser that supports MJPEG (most modern browsers do)
  • Image Topics: A node publishing image data (camera driver or simulation)

📦 Installing web_video_server

The installation process varies depending on your ROS version:

For ROS 2 (Recommended):

  • Install via apt: sudo apt install ros-$ROS_DISTRO-web-video-server
  • Replace $ROS_DISTRO with your version (humble, jazzy, etc.)

For ROS 1 or Building from Source:

  1. Create workspace: mkdir -p ~/ros_ws/src && cd ~/ros_ws/src
  2. Clone repository: git clone https://github.com/RobotWebTools/web_video_server.git
  3. Switch to ROS 1 branch: git checkout ros1 (if using ROS 1)
  4. Build the package: cd ~/ros_ws && colcon build --packages-select web_video_server
  5. Source workspace: source install/setup.bash

🚀 Getting Started with Streaming

Once installed, follow these steps to start streaming:

Step 1: Launch the Web Video Server

  • ROS 1: rosrun web_video_server web_video_server
  • ROS 2: ros2 run web_video_server web_video_server
  • Custom Port: Add _port:=8081 (ROS 1) or --ros-args -p port:=8081 (ROS 2)

Step 2: Ensure Image Topics are Publishing

  • Common topics: /camera/image_raw, /usb_cam/image_raw
  • List available topics: rostopic list (ROS 1) or ros2 topic list (ROS 2)

Step 3: Access the Web Interface

  • Open browser and go to: http://localhost:8080
  • Click on any available image topic to view the stream
  • For remote access, replace localhost with your robot's IP address

🌐 Creating Custom Web Interfaces

While the default interface works well, you might want to create a custom streaming interface. Here's how to build one:

Basic HTML Structure:

  • Stream Controls: Dropdown for format selection (MJPEG, VP8, H264)
  • Topic Input: Text field to enter ROS topic names
  • Quality Settings: Width, height, and compression quality controls
  • Display Area: Image element to show the video stream

Stream URL Format:

The web_video_server uses URLs like: http://localhost:8080/stream?topic=/camera/image_raw&type=mjpeg&quality=80

Supported Formats:

  1. MJPEG: Best compatibility, real-time streaming
  2. VP8/VP9: Better compression, WebM format
  3. H264: Excellent compression, MP4 format
  4. PNG: Lossless, good for static images
  5. ROS Compressed: Uses ROS compression algorithms

🛠️ Troubleshooting Common Issues

Here are solutions to frequent problems:

No Image Topics Available:

  • Verify nodes are publishing: rostopic list or ros2 topic list
  • Check topic types: rostopic info /your/topic
  • Ensure camera drivers or simulators are running

Connection Errors:

  • Confirm web_video_server is running: rosnode list or ros2 node list
  • Check firewall settings for port 8080
  • For remote access, use: _address:=0.0.0.0 parameter

Poor Video Quality:

  • Adjust quality parameter (1-100)
  • Try different formats (MJPEG for speed, H264 for compression)
  • Reduce resolution if bandwidth is limited

🔗 Advanced Configuration

The web_video_server offers several advanced options:

  • Multi-topic Streaming: Stream multiple cameras simultaneously
  • Authentication: Add basic HTTP authentication for security
  • Custom Parameters: Adjust bitrate, framerate, and codec settings
  • CORS Support: Enable cross-origin requests for web applications

🌟 Why ROS Web Streaming Matters

Web-based video streaming transforms robotics development by enabling remote monitoring, web-based control interfaces, and easier demonstration of robot capabilities. It's essential for telepresence robots, security systems, and educational robotics platforms.

ROS Web Streaming Computer Vision Tutorial