Member-only story
In order for images to be shown on a browser the encoding of the ROS images has to be in sync with the format allowed in <img> tags. This can be achieved using the Image Transporter package in ROS.
First get the ROS topic of type sensor_msgs/Image. Say for example we have a topic called /camera of type sensor_msgs/Image. The HTML script should subscribe to this topic as follows:
<!DOCTYPE html><html><head><meta charset="utf-8" /><script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script><script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script><script type="text/javascript" type="text/javascript">// Connecting to ROS// -----------------var ros = new ROSLIB.Ros({url : 'ws://localhost:9090'});ros.on('connection', function() {console.log('Connected to websocket server.');});ros.on('error', function(error) {console.log('Error connecting to websocket server: ', error);});ros.on('close', function() {console.log('Connection to websocket server closed.');});// ----------------------var listener = new ROSLIB.Topic({ros : ros,name : '/camera/compressed/compressed',messageType : 'sensor_msgs/CompressedImage'});listener.subscribe(function(message) {console.log('Received message on ' + listener.name);document.getElementById('image_sub').src = "data:image/jpeg;base64," + message.data;});</script></head><body><h1>Robot's perspective</h1>
