|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 CanvasDescription: This tutorial shows you how to create a single-stream MJPEG canvas.
Tutorial Level: BEGINNER
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
Now that we have an example, let's look at each piece.
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()">
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:
Please send bug reports to the GitHub Issue Tracker. Feel free to contact me at any point with questions and comments.