Rosanswers logo

Hi all,
I am using ros hydro and publishing compressed image on a topic /cameraColor. Also, I am using rosjslib(webpage) to interact with rosbridge_server. Now I want to display image on webpage subscribing to topic mentioned.
Action done by me: I have used python opencv to save image from that topic in a jpeg file (open cv has method to save image in any format)and then trying to open file and encode it into base64 string . Now I am publishing this base64 string in a seperate topic /base64Image. After subscribing this /base64Image I am able to display image on webpage. But this is a workaround and I am not satisfied with solution. Please suggest me some way to display image on webpage by subscribing to some topic without saving image in jpeg format. Some way to convert ros image in a base64 format directly will be better. I am posting my code for both python code at server side and javascript code in webpage.
Also, please suggest some way to display video from ros on webpage using rosjslib.
Any help will be appreciated.

Thank you.
My code: Python code to convert ros image into base64 and publishig
def init(self):
self.image_pub = rospy.Publisher("image_topic_2",Image)
self.imagePub = rospy.Publisher("imageJpeg",String)
print "1"
#cv.NamedWindow("Image window", 1)
self.bridge = CvBridge()
self.image_sub = rospy.Subscriber("/usb_cam/image_raw",Image,self.callback)#/camera/rgb/image_color
self.counter = 0
def callback(self,data):
#print "2"
   cv_image = self.bridge.imgmsg_to_cv(data, "bgr8")
 fileName = "foo_"+str(strftime("%H:%M:%S", gmtime()))
 cv.SaveImage("images/"+fileName+".jpg", cv_image)#"+str(strftime("%H:%M:%S", gmtime()))+"
 image_64 = base64.encodestring(open("images/"+fileName+".jpg","rb").read())
except CvBridgeError, e:
 print e

Javascript code on webpage using rosjslib
//Subscribing Images on Capture image click
imageRos.subscribe(function(message) {
 if(imageFlag === true){
// console.log(message.data);
// var encoded = btoa (unescape(encodeURIComponent(message.data)));
  var ImageData1="data:image/jpeg;base64,"+message.data;

// ImageData1 = "data:image/jpeg;base64,"+ ImageData1;
  displayImage = document.getElementById("topImage1img1");
  displayImage.setAttribute('src', ImageData1);
 imageFlag = false;
// console.log("imageclicked:"+ImageData1);



Originally posted by Brijendra Singh on ROS Answers with karma: 68 on 2014-04-28

Post score: 1

Original comments

Comment by Swoncen on 2017-01-22:
I had the same problem. My solution was:

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

subscribe the compressed image. The normal image is pixeldata, so uncompressed.


1 Answer 1


Rosanswers logo

Why don't you use mjpeg_sever (http://wiki.ros.org/mjpeg_server) ?

You can not only use it as full-page requesting e. g.


as mentioned in the tutorial you can also embed the image in your page's img tags llike:

<img src="http://localhost:8080/stream?topic=/IMAGE_TOPIC" />

Originally posted by Wolf with karma: 7555 on 2014-04-28

This answer was ACCEPTED on the original site

Post score: 5

Original comments

Comment by Brijendra Singh on 2014-04-29:
Thanks a lot man. I was not aware of this package. After installing the package it is working awesome.

Comment by robobee on 2015-06-19:
How to stream those video from another computer which is connected to the same private network


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.