CE 432 Robotics II Fall 2021
ESP32-CAM Practice - Video Streaming Web Server and Robot Car
Sean Eaton

ESP32-CAM Practice - Video Streaming Web Server and Robot Car


In this homework we got more experience with the ESP32-CAM's ability to stream video to a web server. In task 1 we simply used the provided sample code to start and stop the video stream at the provided IP address. In task 2 we used the a BMP180 module to collect temperature, altitude, and pressure measurements. In addition to this, we had to adapt the example code to work with the BMP180 since the Random Nerd Tutorials ebook uses a BME280 instead. Finally in task 3 we needed to complete the robot car construction and get the example code running. After this we were then able to use either a computer's web browser or even a smart phone's web browser to control the robot car. Another task was included in this homework originally but it was decided that completing this task was going to require a bit more time. This task would've been to design a PCB layout in EAGLE PCB so that it could replace the prototype PCBs we put together in the lab. This PCB would take over the jobs of holding the ESP32-CAM and connecting to the voltage regulator. The motor driver board would still be used as is.

Task 1: Start and stop video streaming on a web server.

In task 1 we uploaded the video streaming web server code to the ESP32-CAM. The only modifications necessary were changing the network credentials and changing the JPEG quality to 40 like we have been using. The video streaming works pretty well and I was able to click the start and stop buttons as intended. A screenshot of the web server can be seen below in Figure 1.

Figure 1. Screenshot of the video streaming web server hosted on the ESP32-CAM.

Task 2: Video streaming with sensor readings.

In task 2 we were instructed to use the BMP180 sensor instead of the BME280 sensor used in the ebook and example code. Due to using a different sensor the example code needed to be modified more thoroughly, mainly so the BMP180 could actually be used. Additional edits to the web server's HTML code were also made however, this was because the BMP180 does not have humidity sensing capabilities while the BME280 does.
We were provided some example code of how to use the BMP180 to get temperature, altitude, and pressure measurements. Using the BMP180 example code I was able to modify the video streaming web server to use the BMP180 rather than the BME280. Figure 2 below shows the web server is accessible via my laptop and Figure 3 shows accessing the web server on my phone. As you can see, temperature, altitude, and pressure are being reported back.

Figure 2. Screenshot of task 2's web server on my laptop. It successfully reports back BMP180 measurements.

Figure 3. Screenshot of the web server being accessed on my phone. BMP180 measurements are clearly displayed.

Task 3: Remote controlled car robot with a camera.

For the final task we needed to use prototype PCB boards to build a holder for the ESP32-CAM and voltage regulator that could mount onto the robot car kit provided to us. The robot car kit contained the robot car frame, two DC motors, a battery holder, and an on off switch. A motor driver board was also provided to us so that the DC motors could be controlled effectively.

I started putting the PCB together at the start of the semester so during this homework I primarily soldered the DC motor connections, put together the robot car, and drilled into my PCB for mounting purposes. Figure 4 below shows the ESP32-CAM inserted into my holder PCB. Toward the bottom you can see the 90 degree header pin strip which connects it to the voltage regulator PCB. Above the header pin strip there are two groups of three header pins. On the left side of the board, those header pin short IO-0 to ground to activate programming mode. The ESP32-CAM is in operating mode when the header pin connector is on the left most side. When the header pin connector is on the right most side it is in programming mode. On the right side of the board the vertical header pins are for the FTDI to USB connections. From top to bottom I have the orange connection, then the yellow, and finally the ground connection.

Figure 4. Front view of my ESP32-CAM holder prototype PCB.

Figure 5 below shows what the prototype PCB looks like with the ESP32-CAM board disconnected from it. I decided to use both sides of the protoboard because I felt it made wiring the whole thing easier in some cases. This is why the green and white wire are on this side of the board. I used blue and yellow wires on this side of the board mainly so I could easily remember where the yellow connection goes. Blue is used for orange since it is a darker color than yellow (I would've liked to use orange wire though) and I just remember that I put ground at the bottom.

Figure 5. Front view of my ESP32-CAM holder prototype PCB with the ESP32-CAM board removed.

Figure 6 below shows the back side of my ESP32-CAM holder prototype PCB. You can see some details like how 5V and GND connections are wired along with the single blue wire for shorting IO-0 to GND and programming the ESP32-CAM. The blue wire next to the white wire on the right are two of the connections needed for controlling the motor driver. They go along with the green and white wire on the front of the board seen in Figure 5. These four wires connect to the four jumper wires on the voltage regulator protoboard (purple, green, blue, and yellow wires).

Figure 6. Back view of my ESP32-CAM holder prototype PCB while it is connected to the voltage regulator holder PCB.

The prototype PCB that holds the voltage regulator can be seen below in Figure 7. I drilled three holes total, two of them so that the PCB could be mounted to the robot car, and the largest one for mounting the WiFi antenna to the PCB. The input pins of the voltage regulator connect to the simple plug seen on the left. The plug connects to the power switch and then to the batteries. The other two wires below the plug connect to the motor driver to provide it with power. The output of the voltage regulator then goes to the female header pins which connect to the ESP32-CAM holder PCB with the 90 degree male header pins.

Figure 7. Top view of the voltage regulator holder prototype PCB board that was built.

In Figure 8 below some of the connections on the underside of the voltage regulator board can be seen. The four longer solder connections are for the four pin headers that connect the ESP32-CAM board to the motor driver board. These would be the purple, green, blue, and yellow wires seen in Figure 7. I mainly wired things on the top side of the board with red and black wires to clearly show where the battery voltage and ground were going. You can also better see how the PCB was mounted to the robot car and where the WiFi antennahole was drilled.

Figure 8. Underside view of the voltage regulator holder prototype PCB board that was built.

In Figure 9 below, I show how the battery holder and motor driver were mounted onto the robot car. Luckily the motor driver board was able to be mounted at its current location. That place was where the battery holder originally was. The battery holder was also lucky in that there was a section where two out of four screws could be used. I was initially worried on how I was going to get everything mounted but it worked out in the end. The positive lead of the battery holder connects to the power switch on the bottom. The other power switch lead then connects to that simple plug on the voltage regulator. The ground lead of the battery holder then connects directly to the ground lead of the simple plug. Wiring it this way means I have the option of disconnecting power all together or using the power switch when its more convenient.

Figure 9. Top side of my robot car. The motor driver and battery holder have been successfully mounted.

Figure 10 below shows the underside of the robot car. You can see that two out of four screws were used for the battery holder. The motor driver also only uses two standoff screws. Both DC motor leads go through a hole in order to connect up above to the motor driver. You can also see the power button placement better.

Figure 10. Underside view of my robot car. The holes used for mounting the motor driver and battery holder are clearly seen.

After completing the robot car construction I downloaded the example code, changed the network credentials, and tested if I could successfully control the robot car using a laptop and my phone. Everything functioned but my left and right controls were backwards initially. I edited the section of the code that told the motor driver how to turn left and right to correct this. I also wanted to rotate my video stream so it matched the robot car's setup. I did this by inserting some HTML code for header 1 before and after the HTML code for the video stream. I had to insert this code because if I didn't, the video stream would end up covering the webpage's title and the Forward button. Figure 11 below shows the webpage when you initially visit it. Figure 12 shows that all the controls are viewable. I also moved forward a bit in between Figure 11 and 12.

Figure 11. Initially visiting the robot car webserver. The video stream is rotated as well.

Figure 12. Scrolling down to view the robot car's controls fully.

I was able to successfully move forward, backward, left, and right using the controls on my phone. For some reason the web server loaded up more quickly on my phone versus loading the web server on my laptop. If you double tap any of the controls it will lock the robot in that movement. I found this out when trying to make small adjustments and the robot car wouldn't stop turning clockwise. This is what the Stop button is for, it makes the robot stop moving. In Figure 13 below you can see how the robot car and the Woodstock toy looked from my perspective as I was controlling the robot car.

Figure 13. Picture of the robot car looking at the Woodstock toy.

Task 4: Design a PCB in Eagle

Using Eagle PCB I redesigned the PCBs that hold the voltage regulator as well as the ESP32-CAM boards. I searched online for footprints of the ESP32-CAM and the voltage regulator boards but I was only able to find one for the ESP32-CAM. The ESP32-CAM footprint was found via this website: https://www.snapeda.com/parts/ESP32-CAM/AI-Thinker/view-part/?welcome=home
I was able to just use the footprint I found for the ESP32-CAM but I couldn't find the voltage regulator footprint. Instead I looked for a schematic of the voltage regulator that was the same as the one we were using. I found a schematic on this website: https://protosupplies.com/product/lm2596s-adjustable-dc-dc-step-down-module/
They were selling the LM2596S voltage regulator and I used that schematic to incorporate the voltage regulator into my PCB. One other footprint was needed however, the footprint for the SS34 diode. I was able to find it on SnapEDA as well as shown here: https://www.snapeda.com/parts/SS34/ON 20Semiconductor/view-part/4480080/?ref=search&t=SS34.

Below is my schematic for my board design. The full image can be seen by clicking on it.

Figure 14. Schematic view of my PCB design.

The board view of my design is also shown below. Clicking on the image will also display the full resolution.

Figure 15. Board view of my PCB design.

I also made sure that my design passed both the RatsNest check and the DRC check as well as PCBway's verification system. Screenshots of these verifications can be seen below.

Figure 16. Status bar displaying Ratsnest check completed without any issues.

Figure 17. Status bar displaying no errors were found with the DRC check.

Figure 18. Screenshot of the PCBWay pass for my PCB design.

After submitting my PCB design to our instructor Dr. Li, the PCB boards were ordered for us to verify final functionality. I designed my board to be about 90mm by 70mm for the purposes of mounting, which ended up making it one of the larger PCBs in our class. This ended up being nice for me however since I was able to have more freedom in how I wanted to mount the PCB to my car. The front and back of the unsoldered printed circuit board can be seen below in Figures 19 and 20.

Figure 19. Front of the unsoldered PCB.

Figure 20. Back of the unsoldered PCB.

After receiving the printed circuit boards we then had to finish soldering all of the components onto the board. For me this involved some male and female pin headers, a potentiometer, and various surface mount devices. The surface mount devices consisted of two of the larger electrolytic capacitors, two small ceramic capacitors, two resistors, two diodes (one light emitting), and the LM2596S integrated circuit. There was also a 47 uH inductor that should've been its surface mounted variant as well but I used the wrong pad for it. I had to solder on the through hole version of the 47 uH inductor in order to get my design to work. The front and back of the soldered PCB can be seen below in Figures 21 and 22.

Figure 21. Front of the soldered PCB.

Figure 22. Back of the soldered PCB.

After soldering everything onto the PCB I then drilled the mounting hole and another hole for the antenna to be mounted to. In hindsight I wish I had at least specified where the antenna hole should be drilled at when designing the PCB but it wasn't a huge deal to drill another hole. I am glad the mounting hole wasn't pre-drilled because I was able to center the camera fairly well onto the robot by observing where the bracket could be mounted onto the robot car. A video of the car in operation can be seen below. As you can see, the PCB I designed was successfully able to replace the two prototype PCBs used initially for the robot car. The voltage regulator was also successfully integrated into the PCB design and I made sure to verify the voltage going into the ESP32-CAM board was indeed 5V so the ESP32 would not be damaged.


I really enjoyed putting together the robot car and finally seeing it function. I enjoyed soldering the prototype PCB boards, figuring out how I was going to create connections, and mounting everything to the robot car kit. The robot car also functions pretty well, I do get some quality errors on the video stream when the robot is moving but I'm not sure how much that can be improved. The majority of the shaking is likely due to the ESP32-CAM's camera module only being secured by a ribbon cable. A mounting plate to hold the camera module would be very useful as well as increasing the mounting points for the voltage regulator holding board.
Another error I have run into is that occasionally, when the robot is set to turn continously, the web server will end up crashing. It doesn't always happen but when it does, I have to either refresh the web server or restart the robot car with the power switch. Other than that, the robot car operation is very good. I didn't have very many issues with tasks 1 and 2 and am looking forward to creating the replacement PCBs using Eagle PCB.

I also enjoyed using Eagle PCB again, finding the footprints I needed, and wiring the components together for the board. I want to continue working with Eagle PCB and I think it would be great to order from PCBWay one of these days. I needed to refresh myself on using Eagle PCB however but once I made it through the tutorials I remembered a lot of the process.

Getting to construct my PCB and verify that it functioned correctly was really fun, especially because I haven't had the opportunity to work with surface mounted devices prior to this. The capacitor footprint I used seems to have been a bit too large for the physical capacitors used and the footprint for the 47 uH inductor was just incorrect so I definitely learned to pay attention to and verify footprints prior to getting a PCB design manufactured. If I were to do it again I would definitely find more suitable footprints for both capacitors since the 100 uF capacitor is a lot closer to the edges of the pad than I would like. The design could've been a lot more compact as well but I am happy with the functionality of the design since mounting was simplified. It would be cool to design a 3D printable frame for a smaller PCB design however.