如何在Qt界面上显示ROS发布的视频消息!

1、问题思路简述

        在ROS中将视频以图片消息的形式发布到/camera/image节点，可以采用cv::imshow函数将视频以一个单独的窗口显示出来，那如果采用Qt做上位机界面，能否将其显示在QT的界面中呢？答案是肯定的，由于接触qt和ROS不久，之前我真的是花了好长时间也没有解决，后来没事就找找相关知识，隔三差五拿出来试试，尝试了N中方法，终于今天在rqt工具中找到了灵感，其实这就是个qt多线程通信问题，于是一鼓作气，顺利将历史遗留问题解决，抓紧写个博客和各位博友分享喜悦！

2、简单介绍rqt

rqt是ROS下的一款可视化工具（rqt is a Qt-based framework for GUI development for ROS），里面可以加载各种各样的插件，基于Qt实现，载入image_view 插件即可显示视频，你想啊，它是qt实现的，那么我肯定也可以啊，于是github找到源码：ros-visualization/rqt_image_view，仔细拜读了一番，找到关键所在 :  #include<QMutex>。

3. 修改程序

(1)  创建QT界面ROS项目文件

首先利用catkin_create_qt_pkg   创建一个包 在Qt Creator 中打开(已安rqt_ros_plugin插件，不懂，看前期文章)，向界面中添加标签label_camera（rqt_image_view 是继承的QFrame类显示在QWidget部件上的），放哪你随意。

(2) 在main_window.hpp中修改

//add前为添加代码(...代表中间省略了,只贴出改动部分代码，下同！)

#include <QtGui/QMainWindow>
#include "ui_main_window.h"
#include "qnode.hpp"
#include <QImage>//added
#include <QMutex>//added
namespace mul_t {
class MainWindow : public QMainWindow {
Q_OBJECT
...
public Q_SLOTS:
...
    void updateLogcamera();//added
    void displayCamera(const QImage& image);//added
private:
  Ui::MainWindowDesign ui;
  QNode qnode;
  QImage qimage_;//added
  mutable QMutex qimage_mutex_;//added
};
}  // namespace mul_t
#endif // mul_t_MAIN_WINDOW_H

（3）修改qnode.hpp文件

//添加头文件
#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>
#include <opencv2/imgproc/imgproc.hpp>
#include <image_transport/image_transport.h>
#include <cv_bridge/cv_bridge.h>
#include <QImage>
...
public：
  void myCallback_img(const sensor_msgs::ImageConstPtr& msg);//camera callback function
  QImage image;

 Q_SIGNALS:
    ...
   void loggingCamera();//发出设置相机图片信号
    ...
private:
  int init_argc;
  char** init_argv;
  ros::Publisher chatter_publisher;
  QStringListModel logging_model;
  image_transport::Subscriber image_sub;
 cv::Mat img;

 

（4）修改main_window.cpp 文件

在构造函数中添加信号与槽的连接

/*********************
** Logging
**********************/
 QObject::connect(&qnode,SIGNAL(loggingCamera()),this,SLOT(updateLogcamera()));

函数实现

void MainWindow::displayCamera(const QImage &image)
{
    qimage_mutex_.lock();
    qimage_ = image.copy();
    ui.label_camera->setPixmap(QPixmap::fromImage(qimage_));
    ui.label_camera->resize(ui.label_camera->pixmap()->size());
    qimage_mutex_.unlock();
}
void MainWindow::updateLogcamera()
{
  displayCamera(qnode.image);
} 

（5）在qnode.cpp订阅camera/image消息

#include "sensor_msgs/image_encodings.h"//added head file 
  
void QNode::myCallback_img(const sensor_msgs::ImageConstPtr &msg)
{
  try
  {
    cv_bridge::CvImageConstPtr cv_ptr = cv_bridge::toCvShare(msg, sensor_msgs::image_encodings::RGB8);
    img = cv_ptr->image;
    image = QImage(img.data,img.cols,img.rows,img.step[0],QImage::Format_RGB888);//change  to QImage format
    ROS_INFO("I'm setting picture in mul_t callback function!");
    Q_EMIT loggingCamera();
  }
catch (cv_bridge::Exception& e)
  {
    ROS_ERROR("Could not convert from '%s' to 'bgr8'.", msg->encoding.c_str());
  }
} 

在两个重载的初始化函数中添加

bool QNode::init(){  
...
 // Add your ros communications here.
 image_transport::ImageTransport it(n); 
image_sub = it.subscribe("camera/image",100,&QNode::myCallback_img,this); ...}
bool QNode::init(const std::string &master_url, const std::string &host_url) {
 ...
 // Add your ros communications here. 
 image_transport::ImageTransport it(n);    
image_sub = it.subscribe("camera/image",100,&QNode::myCallback_img,this);    ...}    

//run()函数改为以下就可以了
void QNode::run() {

  log(Info,"I'm running!");
  while (!ros::ok() ) {
    std::cout << "Ros shutdown, proceeding to close the gui." << std::endl;
  Q_EMIT rosShutdown(); 
   }
}

 

4、配置CMakeLists文件和package.xml依赖

 

find_package(catkin REQUIRED COMPONENTS
    qt_build
    roscpp
    std_msgs
    sensor_msgs
    cv_bridge
    image_transport
    )
find_package(OpenCV REQUIRED)
include_directories(
    include
    ${catkin_INCLUDE_DIRS}
    ${OpenCV_INCLUDE_DIRS})
...
target_link_libraries(mul_t ${QT_LIBRARIES} ${catkin_LIBRARIES} ${OpenCV_LIBRARIES})
...
...
target_link_libraries(mul_t ${QT_LIBRARIES} ${catkin_LIBRARIES} ${OpenCV_LIBRARIES})
...

...
<build_depend>opencv2</build_depend>
<run_depend>opencv2</run_depend>

<build_depend>message_generation</build_depend>
   <run_depend>message_runtime</run_depend>

<build_depend>std_msgs sensor_msgs cv_bridge image_transport</build_depend>

 <run_depend>std_msgs sensor_msgs cv_bridge image_transport</run_depend>
...

5.总结

启动相机，运行程序！wonderful！

官方文档，开源代码就是最好的学习资料！

2019.04.16补充：

Note1: 因为评论有难以实现的，我就找了一下以前的调试的程序，有点乱，但运行过了，没问题，已上传github，包括rqt image_view显示的部分源码.

Note2: 经过测试，发现普遍的ROS摄像头驱动发布的usb_cam/image_raw消息的格式和我使用的不一样（具体格式问题我也不太了解），我是opencv打开的发布到camera/image话题，我的程序已经上传到github包括相机的程序，供大家参考。感谢评论中暴走的柿子和mainn提出问题，有问题欢迎留言交流。

https://github.com/sunyuzhe2017/CSDN

//发布消息程序
msg = cv_bridge::CvImage(std_msgs::Header(), "bgr8", frame).toImageMsg();
//接收解码程序
cv_bridge::CvImageConstPtr cv_ptr = cv_bridge::toCvShare(msg, sensor_msgs::image_encodings::RGB8);