ROS Programming: Building Powerful Robots

Explaining the code

Initially, we have to include the JS module, which is mjpegcanvas.js, to get streamer functionality inside the browser. The following code does this job:

    <script src=" http://cdn.robotwebtools.org/   
    mjpegcanvasjs/current/mjpegcanvas.js"> 
    </script> 

The following is the function to start an MJPEG viewer inside the browser. You can set parameters such as width, height, and ROS image topic to display in the viewer.

       var viewer = new MJPEGCANVAS.Viewer({ 
          divID : 'mjpeg', 
          host : 'localhost', 
          width : 640, 
          height : 480, 
          topic : '/camera/rgb/image_raw', 
          interval : 200 
        }); 
       } 

To visualize multiple camera views, we can use code like this. Here, you can add any number of image topics. We also need to mention the image label. In the ...