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 viewer, we have a provision to select the desired view from the list:

        var viewer = new MJPEGCANVAS.MultiStreamViewer({ 
          divID : 'mjpeg', 
          host : 'localhost', 
          width : 640, 
          height : 480, 
          topics : [ '/camera/rgb/image_raw', '/camera/rgb/image_raw', 
              '/camera/rgb/image_raw' ], 
           labels : [ 'Robot View', 'Left Arm View', 'Right Arm View' ] 
        });