Can't stream PointCloud2 with rosbridge
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.
add a comment
