webviz | web-based visualization libraries | Frontend Framework library

How can I decode rosbridge data in the browser?

So far ive been able to decode the following types:

• Uncompressed raw RGB
• Uncompressed raw Depth
• JPEG compressed RGB

My Problem now is decoding compressed depth and PointCloud2 data. As far as my understanding goes, the data is encoded as base64. The depth image has been compressed to a mono16 PNG. I have tried many different approaches, but none seem to work. The depth image is supposed to contain 307200 depth values of 16 bits each.

I do not want to display this data in something like ros3djs or webviz (cloud not figure out how they do the decoding). I want to decode the data and use it in my own analysis.

Steps to reproduce:

Here is a sample file. It contains the data field of the JSON message: https://drive.google.com/file/d/18ZPpWrH9TKtPBbevfGdceZVpmmkiP4bh/view?usp=sharing

OR

1. Make sure you have a device publising or a rosbag playing
2. roslaunch rosbridge_server rosbridge_websocket.launch
3. Launch your web page and make sure you added roslibjs in your script tag

The JS of my web page is simplified to this: