'How to use roslibjs with topics of type sensor_msgs/Image to display image

I am using roslibjs to display information from ROS in the browser. One of the topics I am subscribing to has the type sensor_msgs/Image, and I would like to display the image in the browser. For example, I receive this message for an image that is 1 red pixel:

{
"encoding":"bgr8",
"height":1,
"header":{
    "stamp":{
        "secs":1394210281,
        "nsecs":406450571
        },
    "frame_id":"image",
    "seq":1
    },
"step":3,
"data":"AAD+",
"width":1,
"is_bigendian":0
}

I want to turn this data into a base64 encoded image, so I can display the image as so:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY/jPwAAAAwEBAGMkVdMAAAAASUVORK5CYII=">

Does anyone know how (with javascript) I can use the ROS message to ultimately create a base64 encoded png?

Solution 1:^[1]

Look into the mjpeg_server package from the Robot Web Tools group.

That might be a simpler solution!

http://wiki.ros.org/mjpeg_server

Solution 2:^[2]

Instead of streaming sensor_msgs/Image type try to convert the image to base64, publish it and decode it into image inside your html page.

Python3 code:

import cv2
import rospy
import base64

from std_msgs.msg import String

publisher = rospy.Publisher(
    '/viz_flow/rgb', String, queue_size=10
)

image = cv2.imread('some_image.jpg')
_, buffer = cv2.imencode('.jpg', image)
image_as_str = base64.b64encode(buffer).decode('utf-8')
publisher.publish(image_as_str)

JS code:

...
  var stream_rgb_listener = new ROSLIB.Topic({
    ros : ros,
    name : '/viz_flow/rgb',
    messageType : 'std_msgs/String'
  });
  listener.subscribe(function(msg) {
    var canvas = document.getElementById('rgb-canvas');
    ctx = canvas.getContext('2d');
    var image = new Image();
    image.onload = function() {
      ctx.drawImage(image, 0, 0);
    };
    image.src = `data:image/png;base64,${msg.data}`;
  });
...

Solution 3:^[3]

Using web video server (http://wiki.ros.org/web_video_server) it's as easy as using an image with the src being the link of the stream

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Vladislav Dusyak
Solution 3	sadkiviek

'How to use roslibjs with topics of type sensor_msgs/Image to display image

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]