Can't stream PointCloud2 with rosbridge

asked 2023-03-02 00:58:03 -0600

alperenkeser gravatar image

updated 2023-03-02 05:12:15 -0600

I am trying to display my PointCloud2 data on a browser using rosbridge and web_video_server.

As far as I know, web_video_server is not capable of streaming PointCloud2 but sensor_msgs/Image type messages only.

So I've been trying to do it with rosbridge but even though I can receive the messages from PointCloud2, I can't view it on the webpage. Here is the js code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

  <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
  <script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
  <script type="text/javascript" src="https://static.robotwebtools.org/threejs/r89/three.js"></script>

  <script type="text/javascript">
    var ros = new ROSLIB.Ros({
        url : 'ws://localhost:9090'
    });

    ros.on('connection', function() {
        document.getElementById("status").innerHTML = "Connected";
    });

    ros.on('error', function(error) {
        document.getElementById("status").innerHTML = "Error";
    });

    ros.on('close', function() {
        document.getElementById("status").innerHTML = "Closed";
    });

    var pointCloudListener = new ROSLIB.Topic({
        ros: ros,
        name: '/merged_cloud',
        messageType: 'sensor_msgs/PointCloud2'
    });

    pointCloudListener.subscribe(function(msg) {
        console.log(msg);
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        // clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // draw the point cloud
        var points = new Float32Array(msg.data.buffer, msg.data.byteOffset, msg.width * msg.height * 3);
        var colors = new Uint8Array(msg.data.buffer, msg.data.byteOffset + msg.point_step * msg.width * msg.height, msg.width * msg.height * 3);

        for (var i = 0; i < msg.width * msg.height; i++) {
            var x = points[i * 3];
            var y = points[i * 3 + 1];
            var z = points[i * 3 + 2];
            var r = colors[i * 3];
            var g = colors[i * 3 + 1];
            var b = colors[i * 3 + 2];

            // draw a point at (x, y, z) with color (r, g, b)
            ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
            ctx.fillRect(x * canvas.width, y * canvas.height, 2, 2);
        }
    });

  </script>
</head>
<body>
  <h1>PointCloud2 & Image</h1>
  <p>Connection status: <span id="status"></span></p>
  <p>Last /txt_msg received: <span id="msg"></span></p>
  <canvas id="canvas" width="60000" height="1"></canvas>
</body>
</html>

Any help is appreciated.

edit retag flag offensive close merge delete