First, start a robot simulation or load a robot description. Here, we are using the robot model of the PR2 robot. If you don't have this model, you can install it using the following command:

    $ sudo apt-get install ros-kinetic-pr2-description

After installing, you can load the PR2 description using the following command:

    $ roslaunch pr2_description upload_pr2.launch

After uploading the code, you can set the ROS parameter called use_gui to true using the following command:

    $ rosparam set use_gui true

After doing this, you can start the joint_state_publisher_js node using the following command. This will launch joint state publisher, rosbridge, and tf2_web_republisher node in a single launch file.

    $ roslaunch joint_state_publisher_js core.launch

Okay, you are done launching the ROS nodes; now, it's time to open the HTML code in a web browser. You can open joint_state_publisher.html from chapter_12_codes/ros_web_ws.

You will get the following window if everything works fine:

Congratulations, you have successfully set up a joint state publisher inside a web browser. Now you can move robot joints by moving the sliders.

Robot surveillance application

This is another interesting web application, which can move a robot and display the camera view of the robot in a browser. This application is best used to teleoperate a robot for surveillance. Let's see how to set it up in ROS Kinetic.