当前位置：首页 > news >正文

网页显示摄像头数据的方法---基于web video server

news 2026/2/10 1:02:15

1. 背景：

在ros系统中有发布摄像头的相关驱动rgb数据，需求端需要将rgb数据可以直接在网页上去显示。

问题解决：

web_video_server功能包，相关链接：

web_video_server - ROS Wiki

2. 下载，安装和编译：

由于我们项目使用的是ros2系统，所以下载web video server在ros2的分支，可以根据自己的实际需求来下载：

git clone https://github.com/RobotWebTools/web_video_server.git

下载之后可以查看分支，并且编译代码：

cindy@ubuntu:~/web_video_server$ git branchdevelop
* ros2
cindy@ubuntu:~/web_video_server$ colcon build --packages-select web_video_server
Starting >>> web_video_server
--- stderr: web_video_server                         
CMake Error at CMakeLists.txt:6 (find_package):By not providing "Findasync_web_server_cpp.cmake" in CMAKE_MODULE_PATH thisproject has asked CMake to find a package configuration file provided by"async_web_server_cpp", but CMake did not find one.Could not find a package configuration file provided by"async_web_server_cpp" with any of the following names:async_web_server_cppConfig.cmakeasync_web_server_cpp-config.cmakeAdd the installation prefix of "async_web_server_cpp" to CMAKE_PREFIX_PATHor set "async_web_server_cpp_DIR" to a directory containing one of theabove files.  If "async_web_server_cpp" provides a separate developmentpackage or SDK, be sure it has been installed.---
Failed   <<< web_video_server [1.22s, exited with code 1]Summary: 0 packages finished [1.49s]1 package failed: web_video_server1 package had stderr output: web_video_server
cindy@ubuntu:~/web_video_server$

可以看到编译的过程中无法找到async_web_server_cpp的数据包：

Could not find a package configuration file provided by
"async_web_server_cpp"

3. async_web_server_cpp的下载，安装

后面要安装async_web_server_cpp的相关服务包：

代码下载：

git clone https://github.com/fkie/async_web_server_cpp.git

cindy@ubuntu:~/ros2_ws$ git clone https://github.com/fkie/async_web_server_cpp.git
Cloning into 'async_web_server_cpp'...
remote: Enumerating objects: 594, done.
remote: Counting objects: 100% (110/110), done.
remote: Compressing objects: 100% (64/64), done.
remote: Total 594 (delta 52), reused 76 (delta 35), pack-reused 484
Receiving objects: 100% (594/594), 113.65 KiB | 440.00 KiB/s, done.
Resolving deltas: 100% (358/358), done.

(1)首先，确保您已经安装了git和cmake。如果没有，请使用以下命令安装：

sudo apt-get install git cmake

(2)进入async_web_server_cpp目录并创建一个名为build的新目录：

cd async_web_server_cpp
mkdir build
cd build

(3)使用cmake命令生成Makefile：

cmake ..

(4)编译async_web_server_cpp：

make

(5)安装async_web_server_cpp：

sudo make install

完成后，您应该能够成功安装async_web_server_cpp，并且可以在video web server中使用它。

4. 再次编译web video server

cindy@ubuntu:~/web_video_server$ colcon build --packages-select web_video_server
Starting >>> web_video_server
--- stderr: web_video_server                                
/home/cindy/web_video_server/src/libav_streamer.cpp: In constructor ‘web_video_server::LibavStreamer::LibavStreamer(const async_web_server_cpp::HttpRequest&, async_web_server_cpp::HttpConnectionPtr, rclcpp::Node::SharedPtr, const string&, const string&, const string&)’:
/home/cindy/web_video_server/src/libav_streamer.cpp:65:55: warning: ‘int av_lockmgr_register(int (*)(void**, AVLockOp))’ is deprecated [-Wdeprecated-declarations]65 |   av_lockmgr_register(&ffmpeg_boost_mutex_lock_manager);|                                                       ^
In file included from /home/cindy/web_video_server/include/web_video_server/libav_streamer.h:11,from /home/cindy/web_video_server/src/libav_streamer.cpp:1:
/usr/include/aarch64-linux-gnu/libavcodec/avcodec.h:6163:5: note: declared here6163 | int av_lockmgr_register(int (*cb)(void **mutex, enum AVLockOp op));|     ^~~~~~~~~~~~~~~~~~~
/home/cindy/web_video_server/src/libav_streamer.cpp:65:55: warning: ‘int av_lockmgr_register(int (*)(void**, AVLockOp))’ is deprecated [-Wdeprecated-declarations]65 |   av_lockmgr_register(&ffmpeg_boost_mutex_lock_manager);|                                                       ^
In file included from /home/cindy/web_video_server/include/web_video_server/libav_streamer.h:11,from /home/cindy/web_video_server/src/libav_streamer.cpp:1:
/usr/include/aarch64-linux-gnu/libavcodec/avcodec.h:6163:5: note: declared here6163 | int av_lockmgr_register(int (*cb)(void **mutex, enum AVLockOp op));|     ^~~~~~~~~~~~~~~~~~~
/home/cindy/web_video_server/src/libav_streamer.cpp:66:19: warning: ‘void av_register_all()’ is deprecated [-Wdeprecated-declarations]66 |   av_register_all();|                   ^
In file included from /home/cindy/web_video_server/include/web_video_server/libav_streamer.h:12,from /home/cindy/web_video_server/src/libav_streamer.cpp:1:
/usr/include/aarch64-linux-gnu/libavformat/avformat.h:2050:6: note: declared here2050 | void av_register_all(void);|      ^~~~~~~~~~~~~~~
/home/cindy/web_video_server/src/libav_streamer.cpp:66:19: warning: ‘void av_register_all()’ is deprecated [-Wdeprecated-declarations]66 |   av_register_all();|                   ^
In file included from /home/cindy/web_video_server/include/web_video_server/libav_streamer.h:12,from /home/cindy/web_video_server/src/libav_streamer.cpp:1:
/usr/include/aarch64-linux-gnu/libavformat/avformat.h:2050:6: note: declared here2050 | void av_register_all(void);|      ^~~~~~~~~~~~~~~
/home/cindy/web_video_server/src/libav_streamer.cpp: In member function ‘virtual void web_video_server::LibavStreamer::initialize(const cv::Mat&)’:
/home/cindy/web_video_server/src/libav_streamer.cpp:160:35: warning: ‘AVStream::codec’ is deprecated [-Wdeprecated-declarations]160 |   codec_context_ = video_stream_->codec;|                                   ^~~~~
In file included from /home/cindy/web_video_server/include/web_video_server/libav_streamer.h:12,from /home/cindy/web_video_server/src/libav_streamer.cpp:1:
/usr/include/aarch64-linux-gnu/libavformat/avformat.h:885:21: note: declared here885 |     AVCodecContext *codec;|                     ^~~~~
/home/cindy/web_video_server/src/libav_streamer.cpp:160:35: warning: ‘AVStream::codec’ is deprecated [-Wdeprecated-declarations]160 |   codec_context_ = video_stream_->codec;|                                   ^~~~~
In file included from /home/cindy/web_video_server/include/web_video_server/libav_streamer.h:12,from /home/cindy/web_video_server/src/libav_streamer.cpp:1:
/usr/include/aarch64-linux-gnu/libavformat/avformat.h:885:21: note: declared here885 |     AVCodecContext *codec;|                     ^~~~~
/home/cindy/web_video_server/src/libav_streamer.cpp:160:35: warning: ‘AVStream::codec’ is deprecated [-Wdeprecated-declarations]160 |   codec_context_ = video_stream_->codec;|                                   ^~~~~
In file included from /home/cindy/web_video_server/include/web_video_server/libav_streamer.h:12,from /home/cindy/web_video_server/src/libav_streamer.cpp:1:
/usr/include/aarch64-linux-gnu/libavformat/avformat.h:885:21: note: declared here885 |     AVCodecContext *codec;|                     ^~~~~
/usr/bin/ld: warning: libopencv_imgcodecs.so.4.2, needed by /opt/ros/foxy/lib/libcv_bridge.so, may conflict with libopencv_imgcodecs.so.4.5
/usr/bin/ld: warning: libopencv_imgproc.so.4.2, needed by /opt/ros/foxy/lib/libcv_bridge.so, may conflict with libopencv_imgproc.so.4.5
/usr/bin/ld: warning: libopencv_core.so.4.2, needed by /opt/ros/foxy/lib/libcv_bridge.so, may conflict with libopencv_core.so.4.5
---
Finished <<< web_video_server [20.5s]Summary: 1 package finished [20.8s]1 package had stderr output: web_video_server

可以发现已经可以正常编译了

5.图像显示：

编译好之后可以直接使用可执行文件：

cindy@ubuntu:~/web_video_server$ ./build/web_video_server/web_video_server
[INFO] [1692002533.657719757] [web_video_server]: Waiting For connections on 10.141.5.154:8080

打开ros2驱动摄像头，就可以直接在网页上看到相关的图像了

相关用法和详细配置：
web_video_server打开一个本地端口并等待传入的HTTP请求。一旦通过HTTP请求ROS图像主题的视频流，它就会订阅相应的主题并创建视频编码器的实例。编码的原始视频分组被提供给客户端。可以通过将其他参数添加到查询字符串中来指定参数。要使用浏览器连接到节点，请使用以下URL：

Available URLs

Overview of available ROS topics: http://localhost:8080/
Webpage showing a video stream: http://localhost:8080/stream_viewer?topic={ROS_TOPIC}
Video stream URL: http://localhost:8080/stream?topic={ROS_TOPIC}
Snapshot of next image: http://localhost:8080/snapshot?topic={ROS_TOPIC}

Several parameters can be configure via the video stream URL - Example: http://localhost:8888/stream?topic=depthcloud_encoded&bitrate=250000&type=vp8

Image Parameters

These are the parameters that can be used to configure a stream or snapshot:

width (integer, default: original width)

The image stream will be resized to a new width and height. This parameter has to be used in conjunction with the height parameter.

height (integer, default: original height)

The image stream will be resized to a new width and height. This parameter has to be used in conjunction with the height parameter.

quality (integer, default: 90)

The jpeg image quality (1...100). This parameter can be used to reduce the size of the resulting stream.

invert (none, default: )

Rotates the image by 180 degrees before streaming.

default_transport (string, default: "raw")

The image transport to use (raw, compressed, theora).

Snapshot Parameters

These are the parameters that can be used to configure a snapshot:

quality (integer, default: 95)

The jpeg image quality (1...100). This parameter can be used to reduce the size of the resulting stream.

Stream Parameters

These are the parameters that can be used to configure a stream:

type (string, default: mjpeg)

The encoding method for the stream (mjpeg, vp8, ros_compressed, png, h264).

Additional parameters can be specified for each encoding type as described below.

Mjpeg Stream Parameters

These are the parameters that can be used to configure a mjpeg stream:

quality (integer, default: 95)

The jpeg image quality (1...100). This parameter can be used to reduce the size of the resulting stream.

VP8 Stream Parameters

These are the parameters that can be used to configure a vp8 stream:

bitrate (integer, default: 100000)

Maximum bitrate setting. Note that a small bitrate could significantly increase the latency due to a delayed transmission of larger intra frames.

qmin (integer, default: 10)

Minimum quantizer.

qmax (integer, default: 42)

Maximum quantizer.

gop (integer, default: 250)

Keyframe interval, this determines the maximum distance between I-frames.

quality (string, default: realtime)

The encoding quality.

More information on the quality and profile parameter of the VP8 codec can be found here: http://www.webmproject.org/docs/encoder-parameters

Unsupported customizations

Control image subscription rate

Rate at which web_video_server subscribes a image topic depends on the publisher's publish rate. With a fast publish rate, a client host may unintentionally get busy.

As of version 0.2.1, web_video_server does not come with a feature to control the rate at which the frontend subscribes to an image topic. You can work this around on your client.

One way is to republish the image topic with a lower rate. You can use throttle from topic_tools package.

ROS-Compressed Stream Example

rostopic list output:

$ rostopic list
/usb_cam/camera_info
/usb_cam/image_raw/compressed

View compressed stream at: http://localhost:8080/stream?topic=/usb_cam/image_raw&type=ros_compressed