ESP32-CAM building your own robot car with live video streaming – programming the WIFI remote control

With the previous article and the first small control of the motors, the robot car has already driven straight ahead. So it was clear that the technology works and now only a more complex control system has to be programmed with which the robot car can be actively steered. This includes a minimalistic web-interface and the possibility to control the motors with different speed and direction of rotation. In this article I will explain how I realized the web interface and which functions like rotating the camera image are possible. If you have worked through all articles step by step you don’t need to install any new libraries in your Arduino IDE.

The web interface with live video stream looks like the picture below.

ESP32-CAM Web-interface

Introduction to the program adaptations

The basis is again the sample program CameraWebServer, which has been adapted considerably. In many places there is certainly a need for optimization but I would be happy if readers with more programming experience like me would put an optimized version online.

The program can be downloaded here as a ZIP file: robot_car_20201003.zip

I put it online on GitHub as well with the hope that it will be of interest and improved.

Here you can find the program on GitHub: (not yet available…)

Again, the program consists of the four already known files:

• robot_car.ino (the logic of the program was changed)
  app_httpd.cpp (the logic and HTML code has been changed)
  camera_index.h (no adjustments were made)
  camera_pins.h (no adjustments were made)

Please unpack the ZIP file and open the file robot_car.ino with the Arduino IDE.

Rotate camera image

In the file app_httpd.cpp the camera image can be rotated. This may be necessary if the camera image is upside down, for example. This happens again depending on how the camera is aligned in the robot car. For example, I rotated the ESP32-CAM module by another 90° in the front of the robot car, because I wanted to have an image that is wide instead of high. Afterwards I didn’t have to rotate the image anymore and set the degree number to 0° in the HTML code at the following position.

page += "<p align=center><IMG SRC='http://" + Camerafeed + ":81/stream' style='width:350px; transform:rotate(0deg);'></p><br/>";

Of course, the HTML code that generates the small web interface for the controller can be customized. It was only important to me that the HTML code is as simple as possible.

For my part I think this was the most important information about the small program and now it’s time to transfer the program to the ESP32-CAM module and to drive the robot car through the apartment.

Summary

Now you should have a robot car with live video and a little web control that you can program and design as you like. With the knowledge that you have acquired over this series of articles it should now be possible to easily build e.g. a surveillance camera for the goldfish pond with connected automatic feeders. The possibilities are now huge what can be realized. For example, in the summer I will implement a control system for my pool with live video images of whether the pump is running and the water from the pool is not leaking.

Article Overview ESP32-CAM Robot Auto: