Wireless Webcam

Personal Project

January 2024 - April 2024

Project Overview

I created this web camera as a class project for Northwestern University, where we were tasked with the full design and development of an embedded electronic device. My camera live-streams video to a website at 480p at upwards of 20fps. The device has two microcontrollers on board: the ATSAM48SB and the ESP32-WROOM-32E. The SAM chip handles image processing, while the ESP32 hosts a live web server to which the video is streamed.
One of the primary challenges tackled was managing real-time data flow from the camera to the ESP32 module while ensuring that the system was robust and efficient. The project required an abundance of low-level programming in C, PCB layout optimization, and mechanical design for enclosing the hardware securely. There are some design choices that I ideally would have changed, but was unable to due to the short duration of the class. These changes will be discussed below.

Design Overview

The main difficulty in this project was the design of the camera PCB, which integrates the ATSAM4S8B, the OV2640 camera module, and the ESP32 for WiFi communication. I tried to keep the circuit board compact, while still being fairly easy to assemble.

Special attention was given to routing high-speed SPI and UART signals between the MCU and the WiFi module. Separate ground planes were utilized to reduce noise, and bypass capacitors were placed near Vcc and power pins to act as a low pass filter. The PCB includes debug headers for USART and SPI communication, allowing real-time monitoring during firmware development.

Breakout Board Prototype

ATSAM4S8B Breakout Board Layout

OV2640 Shield Layout

ESP32 Breakout Board Layout

To test the functionality of my circuits and microcontrollers before developing a production board, I created a handful of breakout boards which would allow me to quickly assemble the system with easy points for scoping. In total, I created a breakout board for each microcontroller as well as a shield for the camera. Once the circuits were validated, these boards allowed me to begin to write my firmware for the MCU's in parallel with the design and manufacturing of the final circuit board, and I used them for the duration of the project. Below is a before and after of the breakout boards and the final completed camera:

Prototype vs. Final Design

Breakout Boards
Breakout Board Assembly
After
Final Design


Layout & Schematic

PCB Design (EagleCAD)

Final Webcam Layout

Webcam Schematic
      Function:
        A wireless web camera that hosts a website and streams video at 480p at 20 frames per second
      Functional Breakdown:
      • The camera and the ATSAM4S8B MCU communicate over I2C, with pull-up resistors
      • The ESP32 and SAM4S8B are connected via both SPI and UART. UART is used for programming and reset, SPI is used to capture images taken by the SAM MCU
      • The ESP32 streams successive JPEG images to a live server via Websockets
      Design Features:
      • Compact Design ATSAM4S8B and ESP32 are placed on opposite sides, minimizing trace length and reducing board area
      • Signal Integrity: Controlled impedance routing for high-speed signals, ground plane is minimally interrupted, stitching vias exist throughout the board to guarantee low-impedance return path
      • Filtering: Bypass Capacitors at various power and GPIO pins act as Low Pass filters for the MCU's
      • Easy Assembly Most components sit on one side of the board and can be reflow soldered, subcircuits are grouped together, diodes are all oriented the same way, and component package sizing is uniform
      • Easy Debugging: Headers allow for MCU activity to easily be scoped, buttons allow a convenient method for resetting the MCU, and LED indicators display the camera state
Physical CharacteristicValue
Layers2
Dimensions50mm × 33mm
Thickness1.6mm
Copper Thickness1 Oz./ft2
SubstrateFR-4
Minimum Track Spacing4 mil
ViasTented, 0.3mm
ThreatMitigation Feature
Signal NoiseDecoupling Capacitors
Parasitic CapacitanceStitching Vias,
Trace Spacing
Data CorruptionParity Check,
Short Trace Length

Web Interface and Streaming

PCB Design (EagleCAD)

Board Closeup

ATSAM4S8B Embedded Logic
PCB Design (EagleCAD)

First Video Ever Streamed

Overview of Dataflow Through System

As previously mentioned, the ESP32 module acts as a web server, hosting a responsive interface for streaming captured images. The interface features controls for starting and stopping the stream and provides real-time timestamps for captured frames. The web interface was optimized for both desktop and mobile viewing, ensuring accessibility across platforms.

3D-Printed Enclosure

I designed a 3D-printed enclosure in Onshape. The case has cutouts for the camera lens, indicator LEDs, and buttons. It also incorporates mounting options to allow the camera to be securely positioned for various use cases.

3D-Printed Enclosure

CAD of the 3D-printed enclosure