Question

I am using rosbridgeserver to view the ros compressed image in web. here when i log the sensormsgs/compressedImage in browser i see the msg like this;

Received message on /cam1/image_raw/compressed:
/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0o
MCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAHgAoADA
SIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKB
kaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp
6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgEC
BAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWV
pjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oA
DAMBAAIRAxEAPwCRhxkk880xeEOC`MDpSnB65oBH3QBjFewl3PmG9R23oTg5GRz0pCRgYApQTjpjtijquB1FHmhWvuxBgSAnqe9Ct+85xkUKAep5FIOpyOnp2
q1ruTYewUHdjOeD9Kao5BBxSZINKpOe2D0qeo9LC4YgjI/DtSsQMA5I7Ug4PPQdKaTluafKugX6EgHzc5yO1K3IAAwf0NMQgOccg+9SlsjHTHeoaady4yVrEciE8Yq
KaCOeLypFBQjkevvUwkxxg4NKvzdDgUa7F8/ZmBLay6e+QS8HY9SB6H/GjC3MJZeoOOvIrenUFCpGcjFYM9q9ozPEN0Z5K9x9K4q1F/FHc7qGI+zI5rVbN7dv3h3Z
6EDg1PpOsSwRiKRS8QOMHgj6VuK0N9EY2AYdx3B/xrMlhGl3iTSRiSEkAZGRj39DWFOb+GR17aots4ZlmRWwR3GAK07C4yMeh/OnC5g`vLYtGBtI4Ixn6Vmea1
s+SMITgk8VeqdzWL50XtQs5biUeSBnIbcT0OO1ZcmnvaXgadi6nBJXrmt2zuAY9wOST61Je24u7c4JDDkEUOKadiHTUXc527tWY5TGw9CT1qCEPEMNkAnj61pw
zLhoHYM6cDjmqV5G68EH1rli2m0zTdGnaTFRtlHzY/Cn3MZC+ZGAeOR61DblbiBM4DAYJ75qdGaEhJCeehPSqUugJE9pN5kCE8MOCMdMU27wI+ScHt61Eg8m
U5I2Nz9DTp3DR46+lYT91lK5zurRqyg4JAOSPai0uRbMZIFIVAQM+9Gq/KCAOp61WWVfL2ycjoa66NSyOerG7KGqyl5S7DBPPA4qkkgkYKmc46ds1JfzhsxgErnAP
tUdhtVyWHfA9qUn1RrTheyZPHbgB3l3Mccbe31q1p6ATZB4PHPpV628lzg49x61YuIIlACoORzx2rL2vc1eFcleJT1OJVMLhgQeMDqa19Mkh8tEVRkc5PpWJqJh2wp
G5yCcj0q7p25XQEk49KiavsbYe8VZnSRYKEDGB0A71OgO0EDpVSPhFcA5x0q5E2VyO/atcG3z2uYZiv3ewcnkHgU3r/AFoHDYOfpQ2QgIH416rVjwCCRB1B4qJm
zHt79KsN8wBOMVVk4yVFD1RpTlZ3RTlQZGR/jUUh25Kk8jBFSSknLdfYVAwzg+orFrU7k+ZLUiQ7uvPPSpVAbgnnHB9KjXOSOB74p6rjG

Here i am using this code:

<!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.');
  });

  // Subscribing to a Topic
  // ----------------------

  var audio = new ROSLIB.Topic({
    ros : ros,
    name : '/cam1/image_raw/compressed',
    messageType : 'sensor_msgs/CompressedImage'
  });

  audio.subscribe(function(message) {
    console.log('Received message on ' + audio.name + ': ' + message.data);
    audio.unsubscribe();
  });
</script>
</head>

<body>
  <h1>Simple roslib Example</h1>
  <p>Check your Web Console for output.</p>
</body>
</html>

So after i have subscribed and got the ros image message in javascript how do i decode it or convert it to some javascript object or mp3 data?

Asked by dinesh on 2020-04-21 05:25:35 UTC

Answer 1

I would suggest an alternative way of bringing video data to the browser - http://wiki.ros.org/web_video_server. That is, you will not have subscription to /cam1/image_raw/compressed topic but rather start web_video_server on ROS side and reference video stream in your HTML page like so:

<img src="http://localhost:8080/stream?topic=/cam1/image_raw&type=ros_compressed"/>

There is a couple benefits:

You don't need to convert ROS image data to something your browser can understand (your current issue)
Depending on how web_video_server is configured less data might be passed between ROS backend and browser thus improveing video latency
On related note, If the video is designed to be consumed by a human operator and resolution does not make a big difference for you you might consider downsizing resolution of video stream thus further reducing bandwidth requirement

Asked by viktor.holova on 2020-04-21 09:15:13 UTC

Comments

i have tried this. but what i want to do is not only show the video in the web but also other rostopics like audio and orher sensor data.

Asked by dinesh on 2020-04-22 00:02:15 UTC

ros image to js object

Comments

Answers

Comments