-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwebcam.html
More file actions
314 lines (269 loc) · 19.3 KB
/
Copy pathwebcam.html
File metadata and controls
314 lines (269 loc) · 19.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Wireless Webcam | Maxwell Patwardhan</title>
<link rel="icon" type="image/png" href="images/personal/icon.png">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Wireless Webcam project by Max Patwardhan, featuring a custom PCB, ATSAM4S8B, ESP32, and live video streaming.">
<link rel="canonical" href="https://maxwellpatwardhan.com/webcam.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Wireless Webcam | Maxwell Patwardhan" />
<meta property="og:description" content="Wireless Webcam project by Maxwell Patwardhan, featuring a custom PCB, ATSAM4S8B, ESP32, and live video streaming." />
<meta property="og:url" content="https://maxwellpatwardhan.com/webcam.html" />
<meta property="og:image" content="https://maxwellpatwardhan.com/images/social-card.png" />
<meta property="og:image:alt" content="Maxwell Patwardhan electrical hardware engineering portfolio" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Wireless Webcam | Maxwell Patwardhan" />
<meta name="twitter:description" content="Wireless Webcam project by Maxwell Patwardhan, featuring a custom PCB, ATSAM4S8B, ESP32, and live video streaming." />
<meta name="twitter:image" content="https://maxwellpatwardhan.com/images/social-card.png" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo">Home</a>
</header>
<!-- Nav -->
<nav id="nav">
<ul class="links">
<li class="active"><a href="index.html">Projects</a></li>
<li><a href="macro.html">Photography</a></li>
<li><a href="elements.html">About Me</a></li>
</ul>
<ul class="icons">
<li><a href="https://github.com/MaxPatwardhan" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://www.linkedin.com/in/maxwell-patwardhan" class="icon brands alt fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Project Introduction -->
<section class="post">
<header class="major">
<h1>Wireless Webcam</h1>
<h3>Personal Project</h3>
<p>January 2024 - March 2024</p>
</header>
</section>
<!-- Overview -->
<section id="overview">
<h2>Project Overview</h2>
<p><span class="image right"><img src="images/esd/camZest.jpg" alt="Completed custom wireless webcam circuit board" style="max-width: 900px; height: auto;"/></span>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 20 fps. The device has two microcontrollers on board: the <a href="https://www.microchip.com/en-us/product/atsam4s8b">ATSAM4S8B</a> and the
<a href="https://www.mouser.com/ProductDetail/Espressif-Systems/ESP32-WROOM-32E-H4?qs=Li%252BoUPsLEnuUxeqGSCz%252BcA%3D%3D">ESP32-WROOM-32E</a>. The SAM chip handles image processing, while the ESP32
hosts a live web server to which the video is streamed. <br>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.
</p>
</section>
<!-- PCB Design -->
<section id="pcb">
<h2>Design Overview</h2>
<p><span class="image right"><img src="images/esd/camcomplete.jpg" alt="Assembled wireless webcam electronics" style="max-width: 800px; height: auto;"/></span> 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.</p>
<p>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 <b>V<sub>cc</sub></b> 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.</p>
<h2>Breakout Board Prototype</h2>
<div class="box alt">
<div class="row gtr-50 gtr-uniform">
<div class="col-4">
<span class="image fit">
<img src="images/esd/breakout.png" alt="ATSAM4S8B breakout board layout" class="gallery-item" data-description="It's Labeled!" />
<span class="caption">ATSAM4S8B Breakout Board Layout</span>
</span>
</div>
<div class="col-4">
<span class="image fit">
<img src="images/esd/camBreakout.png" alt="OV2640 camera shield layout" class="gallery-item" data-description="Camera Board Layout" />
<span class="caption">OV2640 Shield Layout</span>
</span>
</div>
<div class="col-4">
<span class="image fit">
<img src="images/esd/espbreakout.png" alt="ESP32 breakout board layout" class="gallery-item" data-description="ESP32 Breakout Board" />
<span class="caption">ESP32 Breakout Board Layout</span>
</span>
</div>
</div>
</div>
<p>
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 writing firmware
for the MCUs 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 comparison of the breakout boards and the final
completed camera:
</p>
<h2 style="text-align: center; font-size: 1.5rem; " >Prototype vs. Final Design</h2>
<div class="image-comparison">
<div class="image-container">
<img src="images/esd/brkout.jpg" alt="Prototype webcam breakout-board assembly" class="image-left gallery-item" data-description="Breakout Boards">
<div class="caption">Breakout Board Assembly</div>
</div>
<div class="arrow"><i class="fas fa-arrow-right"></i></div>
<div class="image-container">
<img src="images/esd/camSQuar.jpg" alt="Final custom webcam PCB assembly" class="image-right gallery-item" data-description="Final Design">
<div class="caption">Final Design</div>
</div>
</div>
<br> <br>
<div style="clear:both"></div>
<h2>Layout & Schematic</h2>
<div class="box alt">
<div class="row gtr-50 gtr-uniform">
<div class="col-6">
<span class="image fit">
<img src="images/esd/eds1.png" alt="Final webcam PCB layout in Eagle" class="gallery-item" data-description="PCB Layout" />
<span class="caption">Final Webcam Layout</span>
</span>
</div>
<div class="col-6">
<span class="image fit">
<img src="images/esd/eds2.png" alt="Wireless webcam electrical schematic" class="gallery-item" data-description="Probably not my prettiest, but well labeled and separated." />
<span class="caption">Webcam Schematic</span>
</span>
</div>
</div>
</div>
<div class="row aln-top gtr-uniform">
<!-- List -->
<div class="col-7">
<div class="adjacent-list">
<h3>Function</h3>
<ul style="font-size: 1rem;">
<li>A wireless web camera that hosts a website and streams video at 480p at 20 frames per second</li>
</ul>
<h3>Functional Breakdown</h3>
<ul style="font-size: 1rem;">
<li>The camera and the ATSAM4S8B MCU communicate over I<sup>2</sup>C, with pull-up resistors</li>
<li>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</li>
<li>The ESP32 streams successive JPEG images to a live server via Websockets</li>
</ul>
<h3>Design Features</h3>
<ul style="font-size: 1rem;">
<li><strong>Compact Design</strong> ATSAM4S8B and ESP32 are placed on opposite sides, minimizing trace length and reducing board area</li>
<li><strong>Signal Integrity:</strong> Controlled impedance routing for high-speed signals, ground plane is minimally interrupted, stitching vias exist throughout the board to guarantee low-impedance return path</li>
<li><strong>Filtering:</strong> Bypass capacitors at the power and GPIO pins act as low-pass filters for the MCUs.</li>
<li><strong>Easy Assembly</strong> 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</li>
<li><strong>Easy Debugging:</strong> 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</li>
</ul>
</div>
</div>
<!-- Table -->
<div class="col-5">
<div class="table-stack">
<table class="compact-table">
<thead>
<tr><th>Physical Characteristic</th><th>Value</th></tr>
</thead>
<tbody>
<tr><td><strong>Layers</strong></td><td>2</td></tr>
<tr><td><strong>Dimensions</strong></td><td>50mm × 33mm</td></tr>
<tr><td><strong>Thickness</strong></td><td>1.6mm</td></tr>
<tr><td><strong>Copper Thickness</strong></td><td>1 Oz./ft<sup>2</sup></td></tr>
<tr><td><strong>Substrate</strong></td><td>FR-4</td></tr>
<tr><td><strong>Minimum Track Spacing</strong></td><td>4 mil</td></tr>
<tr><td><strong>Vias</strong></td><td>Tented, 0.3mm</td></tr>
</tbody>
</table>
<table class="compact-table">
<thead>
<tr><th>Threat</th><th>Mitigation Feature</th></tr>
</thead>
<tbody>
<tr><td><strong>Signal Noise</strong></td><td>Decoupling Capacitors</td></tr>
<tr><td><strong>Parasitic Capacitance</strong></td><td>Stitching Vias, <br> Trace Spacing</td></tr>
<tr><td><strong>Data Corruption</strong></td><td>Parity Check, <br> Short Trace Length</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Web Interface -->
<section id="web">
<h2>Web Interface and Streaming</h2>
<div class="box alt">
<div class="row gtr-50 gtr-uniform">
<div class="col-6">
<span class="image fit">
<img src="images/esd/itsME.jpg" alt="Live self-portrait streamed from the custom webcam" class="gallery-item" data-description="Oh hello there" />
<span class="caption">Webcam Streaming!</span>
</span>
</div>
<div class="col-6">
<span class="image fit">
<img src="images/esd/flowchart.png" alt="ATSAM4S8B embedded software flowchart" class="gallery-item" data-description="" />
<span class="caption">ATSAM4S8B Embedded Logic</span>
</span>
</div>
<div class="col-6">
<span class="image fit">
<img src="images/esd/website.png" alt="First browser page displaying video from the custom webcam" class="gallery-item" data-description="My HTML, CSS, and JS has since improved ;)" />
<span class="caption">First Video Ever Streamed</span>
</span>
</div>
<div class="col-6">
<span class="image fit">
<img src="images/esd/dataflow.png" alt="High-level wireless webcam data-flow diagram" class="gallery-item" data-description="High level demonstration of dataflow" />
<span class="caption">Overview of Dataflow Through System</span>
</span>
</div>
</div>
</div>
<!-- Lightbox -->
<div id="lightbox" class="lightbox" role="dialog" aria-modal="true" aria-label="Image preview" aria-describedby="lightbox-description" aria-hidden="true">
<div class="lightbox-content">
<img id="lightbox-image" alt="Enlarged view" />
<p id="lightbox-description" class="description"></p>
<button type="button" id="lightbox-close" class="lightbox-close" aria-label="Close image preview">×</button>
</div>
</div>
<p>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.
</p>
</section>
<!-- 3D-Printed Enclosure -->
<section id="enclosure">
<h2>3D-Printed Enclosure</h2>
<p>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.</p>
<div style="text-align:center;">
<img src="images/esd/case.png" alt="3D-Printed Enclosure" style="width:60%; margin-bottom:20px;" />
<span class="caption">CAD of the 3D-printed enclosure</span>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<section>
<div style="display: flex; align-items: center; gap: 10px;">
<h3 style="margin: 0;">Email:</h3>
<p style="margin: 0;"><a href="mailto:maxwellpatwardhan@gmail.com">maxwellpatwardhan@gmail.com</a></p>
</div>
<div style="display: flex; align-items: center; gap: 10px;">
<h3 style="margin: 0;">Other Pages:</h3>
<ul class="icons alt" style="display: flex; gap: 10px; list-style: none; padding: 0; margin: 0;">
<li><a href="https://github.com/MaxPatwardhan" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://www.linkedin.com/in/maxwell-patwardhan" class="icon brands alt fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
</ul>
</div>
</section>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/lbox.js"></script>
</body>
</html>