Let's see how we can run this web application.

First, we have to start a robot simulation in Gazebo. Here, we are testing with a TurtleBot simulation. You can launch the TurtleBot simulation using the following command:

    $ roslaunch turtlebot_gazebo turtlebot_world.launch

Now, we can set the parameter use_gui to true. The robot will only visualize on the browser if this parameter is set.

    $ rosparam set use_gui true

After running this command, run tf2_web_republisher in another Terminal window, using the following command:

    $ rosrun tf2_web_republisher tf2_web_republisher

After launching it, let's launch the rosbridge server to start WebSocket communication. You can start it using the following command:

    $ roslaunch rosbridge_server rosbridge_websocket.launch

Congratulations; you are done with the commands that need to be executed from ROS; now, let's open keyboardteleop.html in Chrome or Firefox.

You will see the following window in the browser:

When you submit the teleop topic and base frame, you can see the 3D visualizer appear in the same window with the robot model. Now you can use keys such as W, S, A, and D to move the robot around the workspace. You can adjust the speed of the robot by moving the slider. Here is the window you will get when you press the Submit button:

In the previous screenshot, you can see a JavaScript console window too. You can enable it by pressing Ctrl + Shift + I or right-clicking on the page and using the Inspect option. This window will be useful for debugging.