 Please ask about problems and questions regarding this tutorial on answers.ros.org. Don't forget to include in your question the link to this page, the versions of your OS & ROS, and also add appropriate tags. |
Creating a Multi-Stream Canvas
Description: This tutorial shows you how to create a multi-stream MJPEG canvas.Keywords: mjpegcanvasjs, web interface, javascript, mjpeg_server, Robot Web Tools
Tutorial Level: BEGINNER
Multi-Stream Example
In this tutorial, we show how to create and display a multi-stream canvas. To run the demo, it is easiest to use the pr2_simulator to grab example camera feeds from. To begin, create a new HTML document and copy the follow code sample into it.
The HTML Code
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
6 <script type="text/javascript" src="http://static.robotwebtools.org/mjpegcanvasjs/current/mjpegcanvas.min.js"></script>
7
8 <script type="text/javascript" type="text/javascript">
9 /**
10 * Setup all visualization elements when the page is loaded.
11 */
12 function init() {
13 // Create the main viewer.
14 var viewer = new MJPEGCANVAS.MultiStreamViewer({
15 divID : 'mjpeg',
16 host : 'localhost',
17 width : 640,
18 height : 480,
19 topics : [ '/wide_stereo/left/image_color', '/l_forearm_cam/image_color', '/r_forearm_cam/image_color' ],
20 labels : [ 'Robot View', 'Left Arm View', 'Right Arm View' ]
21 });
22 }
23 </script>
24 </head>
25
26 <body onload="init()">
27 <h1>Multi-Stream MJPEG Canvas Example</h1>
28 <div id="mjpeg"></div>
29 </body>
30 </html>
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 for mjpegcanvas.js. Here, we use the Robot Web Tools CDN.
14 var viewer = new MJPEGCANVAS.MultiStreamViewer({
15 divID : 'mjpeg',
16 host : 'localhost',
17 width : 640,
18 height : 480,
19 topics : [ '/wide_stereo/left/image_color', '/l_forearm_cam/image_color', '/r_forearm_cam/image_color' ],
20 labels : [ 'Robot View', 'Left Arm View', 'Right Arm View' ]
21 });
This section of code creates the actual canvas. In this example, the script will connect to localhost on the default port of 8080. The streams that we will used are /wide_stereo/left/image_color, /l_forearm_cam/image_color, and /r_forearm_cam/image_color and they will be streamed across the wire at a size of 640x480. We also give them a set of associated labels for use in the drop-down menu. Finally, the ID of the HTML div where the canvas will be placed must be specified. As we will see next, the ID we assigned to our canvas is mjpeg.
26 <body onload="init()">
It is important to remember to call the init() function when this page is loaded. This will call the Javascript code discussed above.
28 <div id="mjpeg"></div>
Within the HTML <body> section is where we create the HTML div where the canvas will be placed. It is important that the ID field here matches the one we give to the MultiStreamViewer.
Running the Example
At this point we are ready to run the example. To do so, you will need to have both pr2_simulator and mjpeg_server installed. Refer to their respective Wiki pages for installation instructions, or simply install their latest builds from the Ubuntu repositories.
To begin, we will launch the simulator. To do so, run the following in a terminal:
roslaunch pr2_gazebo pr2_empty_world.launch
Once the simulator is running, we can launch the mjpeg_server with the following:
rosrun mjpeg_server mjpeg_server
Finally, you are now ready to bring up your HTML page in a web browser. The result should be a page that looks similar to the following:
Support
Please send bug reports to the GitHub Issue Tracker. Feel free to contact me at any point with questions and comments.
|
|
|
