(!) 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 Single-Stream Canvas

Description: This tutorial shows you how to create a single-stream MJPEG canvas.

Keywords: mjpegcanvasjs, web interface, javascript, mjpeg_server, Robot Web Tools

Tutorial Level: BEGINNER

Single-Stream Example

In this tutorial, we show how to create and display a single-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://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
   6 <script type="text/javascript" src="http://cdn.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.Viewer({
  15       divID : 'mjpeg',
  16       host : 'localhost',
  17       width : 640,
  18       height : 480,
  19       topic : '/wide_stereo/left/image_color'
  20     });
  21   }
  22 </script>
  23 </head>
  24 
  25 <body onload="init()">
  26   <h1>Simple MJPEG Canvas Example</h1>
  27   <div id="mjpeg"></div>
  28 </body>
  29 </html>

Code Explanation

Now that we have an example, let's look at each piece.

   5 <script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
   6 <script type="text/javascript" src="http://cdn.robotwebtools.org/mjpegcanvasjs/current/mjpegcanvas.min.js"></script>

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.Viewer({
  15       divID : 'mjpeg',
  16       host : 'localhost',
  17       width : 640,
  18       height : 480,
  19       topic : '/wide_stereo/left/image_color'
  20     });

This section of code creates the actual canvas. In this example, the script will connect to localhost on the default port of 8080. The single stream that we will connect to is /wide_stereo/left/image_color and this image will be streamed across the wire at a size of 640x480. 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.

  25 <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.

  27   <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 Viewer.

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:

screen.png

Support

Please send bug reports to the GitHub Issue Tracker. Feel free to contact me at any point with questions and comments.


wpi.png

rail.png

Wiki: mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas (last edited 2013-04-30 17:30:24 by Russell Toris)