Display ros image on webpage using roslibjs

edit

Hi all,
Problem:
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"
try:
   cv_image = self.bridge.imgmsg_to_cv(data, "bgr8")
 #self.imagePub.publish(cv_image)
 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())
 self.imagePub.publish(str(image_64))
 #cv.WaitKey(2)
 #time.sleep(2)
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);
 console.log("hello");
// 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);

}

});