## For instruction on writing tutorials ## http://www.ros.org/wiki/WritingTutorials #################################### ##FILL ME IN #################################### ## for a custom note with links: ## note = ## for the canned note of "This tutorial assumes that you have completed the previous tutorials:" just add the links ## note.0= ## descriptive title for the tutorial ## title = Point Cloud Streaming from a Kinect ## multi-line description to be displayed in search ## description = This tutorial shows you how to stream and visualize a point cloud from a Kinect camera to the browser using ros3djs. ## the next tutorial description (optional) ## next = ## links to next tutorial (optional) ## next.0.link= ## next.1.link= ## what level user is this tutorial for ## level= BeginnerCategory ## keywords = ros3djs, web interface, javascript, Robot Web Tools, depthcloudjs, depthcloud #################################### <> <> == DepthCloud Example == In this tutorial, we show how to stream and visualize a point cloud from a Kinect camera in the browser. To begin, check out the [[https://github.com/RobotWebTools/ros3djs/blob/stable/examples/depthcloud.html|example code from ros3djs]]. === The HTML Code === {{{ #!block=html_example

Simple DepthCloud Example

Run the following commands in the terminal then go to http://localhost:9999/examples/depthcloud.html*.

  1. roscore
  2. roslaunch rosbridge_server rosbridge_websocket.launch
  3. rosrun tf2_web_republisher tf2_web_republisher
  4. roslaunch openni_launch openni.launch depth_registration:=true
  5. rosrun ros_web_video ros_web_video _port:=9999 _framerate:=15 _bitrate:=250000 _profile:=best _www_file_server:=true _wwwroot:=/path/to/ros3djs/
  6. rosrun depthcloud_encoder depthcloud_encoder_node _depth:=/camera/depth_registered/image_rect _rgb:=/camera/rgb/image_rect_color
*Due to a bug in the current WebGL implementations, it is not possible to serve this file and the video stream from a different host or port number, so we need ros_web_video to serve the html file as well. If you use Apache, you can set it up to proxy port 9999 to a subdirectory.
}}} === Code Explanation === Now that we have an example, let's look at each piece. <> We first need to import all of the required `JavaScript` files. Here, we use the [[http://robotwebtools.org|Robot Web Tools]] CDN. <> Next, we need to create a `Ros` node object to communicate with a `rosbridge v2.0` server. In this example, the script will connect to `localhost` on the default port of `9090`. <> We then need to create a 3D viewer. We provide the dimensions as well as the HTML div where the viewer will be placed. <> We then create a TF client. This client will subscribe to changes in the TF tree and update the scene appropriately. We use this to rotate the optical frame of the Kinect camera, which has it's Z axis pointing forward, into the standard ROS convention where X points forward. <> This section of code creates the `DepthCloud` object. By calling `startStream`, it will create a video buffer for the given URL and start rendering a point cloud as soon as data arrives. <> Finally, we need to add the DepthCloud to our scene and assign the right tf frame to it. === Running the Example === At this point we are ready to run the example. To do so, you will need to have [[rosbridge_server]], [[tf2_web_republisher]], [[openni_camera]], [[ros_web_video]], [[depth_image_proc]] and [[depthcloud_encoder]] installed. Refer to their respective Wiki pages for installation instructions, or simply install their latest builds from the Ubuntu repositories. Simply launch the necessary nodes with the following: {{{#!shell roscore roslaunch rosbridge_server rosbridge_websocket.launch rosrun tf2_web_republisher tf2_web_republisher roslaunch openni_launch openni.launch depth_registration:=true rosrun ros_web_video ros_web_video _port:=9999 _framerate:=15 _bitrate:=250000 _profile:=best www_file_server:=true _wwwroot:=/path/to/ros3djs/ rosrun nodelet nodelet standalone depth_image_proc/convert_metric image_raw:=/camera/depth_registered/image_raw image:=/camera/depth_registered/image_float rosrun depthcloud_encoder depthcloud_encoder_node _depth:=/camera/depth_registered/image_float _rgb:=/camera/rgb/image_rect_color }}} Finally, you are now ready to bring up your HTML page in a web browser. == Support == Please send bug reports to the [[https://github.com/RobotWebTools/ros3djs/issues|GitHub Issue Tracker]]. Feel free to contact us at any point with questions and comments. * [[mailto:robot-web-tools@googlegroups.com|robot-web-tools@googlegroups.com]]