CE 432 Robotics II Fall 2021
ESP32-CAM Practice - Video Streaming Web Server and Robot Car
Sean Eaton
smeaton@fortlewis.edu
ESP32-CAM Practice - Video Streaming Web Server and Robot Car
Introduction:
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.
Conclusion:
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.