ROS Resources: Documentation | Support | Discussion Forum | Index | Service Status | ros @ Robotics Stack Exchange
Ask Your Question

sending image to html

asked 2020-09-22 09:21:47 -0600

Jt3d gravatar image


I am getting the following error in Rosbridge WebSocket server when I try to send an image to a html web page using roslibjs with cvbridge

"Tried to register topic /camera/image/compressed with type sensor_msgs/CompressedImage but it is already established with type sensor_msgs/Image"

Any ideas on what I am doing wrong? i can see the image being published to rviz and I have the option there to choose raw or compressed so I'm assuming it's something I am doing wrong on the html side

This is what I have on the html side

      var image_listener = new ROSLIB.Topic({
       ros : ros,
       name : '/camera/image/compressed',
       messageType : 'sensor_msgs/CompressedImage'

    image_listener.subscribe(function(message) {
      //document.getElementById("liveimage").innerHTML =;
      console.log("image listenerr event fired");
      var imagedata = "data:image/png;base64," +;
      document.getElementById("liveimage").src = imagedata;      
      //document.getElementById("liveimage").src =;      

this is what I have on the C++ side

    ros::init(argc, argv, "test image");
    ros::NodeHandle n;

    cv::Mat image2 = cv::imread("test.png" ,0);

    image_transport::ImageTransport it_(n);        
    image_transport::Publisher image_pub_ = it_.advertise("/camera/image/compressed", 1);

    cv_bridge::CvImagePtr cv_ptr(new cv_bridge::CvImage);

    ros::Rate loop_rate(10); //10 hz

        #if 1
            ros::Time time = ros::Time::now();
            //cv_ptr->encoding = "bgr8";
            cv_ptr->encoding = "mono8";
            cv_ptr->header.stamp = time;
            cv_ptr->header.frame_id = "/camera/image/compressed";


            //cv_ptr->image = image;
            cv_ptr->image = image2;

            ROS_INFO("ImageMsg Sent.");
            ROS_INFO("Subscribers: %d", image_pub_.getNumSubscribers());


    return 0;
edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

answered 2020-09-22 21:47:02 -0600

mwenger gravatar image

When you advertise the image topic you need to only supply the base topic name, which in your case should be like this:

image_transport::Publisher image_pub_ = it_.advertise("/camera/image", 1);

Once advertised transports will automatically be appended depending on what your have installed on your system.

Since you supplied '/camera/image/compressed' as the base topic name, your node will advertise a topic by this name of type sensor_msgs/Image. To see what image_transports you have installed on your system, run

rosrun image_transport list_transports

Make sure you see image_transport/compressed in the output.

If you don't see it, then it's probably not installed. You can install it using

sudo apt install ros-$ROS_DISTRO-compressed-image-transport

With your current node running, list the topics using 'rostopic list -v'. You should see '/camera/image/compressed' advertised as a sensor_msgs/Image topic. But, if you have image_transport/compressed installed you should also see '/camera/image/compressed/compressed' being advertised. This is the topic of type sensor_msgs/CompressedImage.

If you plan to use this node for capturing images directly from your camera and publishing them, then take a look at image_transport::ImageTransport::CameraPublisher.

Hope this helps!

edit flag offensive delete link more


Removing compressed off the topic name worked - many thanks

As a matter of interest what are the benefits of using the camera publisher vs the normal image publisher? any good tutorials / examples you would recommend?

Also for anyone else who might be struggling with setting this up you need this on the html side of things i.e you need the topic with compressed at the end

var image_listener = new ROSLIB.Topic({
      ros : ros,
      name : '/camera/image/compressed',
      messageType : 'sensor_msgs/CompressedImage'
Jt3d gravatar image Jt3d  ( 2020-09-23 03:05:06 -0600 )edit

CameraPublisher is just a convenience class that simplifies interacting with the camera. I don't know of any good tutorials that use it. However, you could look at the usb_cam source code and see how it's used there.

mwenger gravatar image mwenger  ( 2020-09-23 09:19:25 -0600 )edit

OK - many thanks for the help again

Jt3d gravatar image Jt3d  ( 2020-09-23 09:24:50 -0600 )edit

Question Tools

1 follower


Asked: 2020-09-22 09:21:47 -0600

Seen: 752 times

Last updated: Sep 22 '20