【ROS视频推流】使用web_video_server完成视频推流

🚀 本文简要介绍一下使用web_video_server功能包完成实时视频推流的方法。

假设有A,B两个设备，它们之间可以ping通。我们需要将A设备上的实时摄像头图像推流并在B设备的浏览器上显示。

---

🌔01
准备工作

# A设备
# 下载视频推流功能包
#（截至2025年2月, 仅支持humble/jazzy/rolling/noetic/dashing/iron）
sudo apt-get install ros-$ROS_DISTRO-web-video-server
# 下载摄像头驱动功能包(演示用)
sudo apt-get install ros-$ROS_DISTRO-usb-cam

---

🌔02
快速开始

# A设备
roscore
rosrun usb_cam usb_cam_node # 相机驱动节点(假设话题名为[camera_topic])
rosrun web_video_server web_video_server

# B设备 浏览器访问：
http://[IP_A]:8080/stream
?topic=[camera_topic]

---

🌔03
进阶篇目

原始的web_video_server自v0.2.1后便不再支持调整帧率，这时我们通过throttle转发话题的方式可以达到类似的效果。

# A设备
sudo apt-get install ros-$ROS_DISTRO-topic-tools

# A设备
roscore
rosrun usb_cam usb_cam_node # 相机驱动节点(假设话题名为[camera_topic])
rosrun topic_tools throttle messages [camera_topic] [fps] # 转接发布一个[camera_topic_throttle]话题
rosrun web_video_server web_video_server

# B设备 浏览器访问：
http://[IP_A]:8080/stream
?topic=[camera_topic_throttle]
&quality=95
# quality控制图像质量，值为0-100，默认是95
# 原生的web_video_server暂不支持改变帧率，但此时已通过throttle转接，间接实现了帧率控制。

另外，更多关于web_video_server 的参数配置和浏览器访问选项，请参考官方文档：
web_video_server的GitHub
web_video_server官方文档
此外，可以在html中使用<img>标签将该链接的视频流嵌入到自定义的网页中。

 <div class="video-stream">
   <img 
     src="http://[IP_A]:8080/stream?topic=[camera_topic_throttle]&quality=95"
   />
 </div>