222 lines
16 KiB
HTML
222 lines
16 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
|
|
<meta name="generator" content="Doxygen 1.9.3"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<title>ESP32 WebCam Server: ESP32-CAM WebCam Server </title>
|
|
<link href="tabs.css" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" src="jquery.js"></script>
|
|
<script type="text/javascript" src="dynsections.js"></script>
|
|
<link href="search/search.css" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" src="search/searchdata.js"></script>
|
|
<script type="text/javascript" src="search/search.js"></script>
|
|
<link href="doxygen.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
|
|
<div id="titlearea">
|
|
<table cellspacing="0" cellpadding="0">
|
|
<tbody>
|
|
<tr id="projectrow">
|
|
<td id="projectlogo"><img alt="Logo" src="logo.svg"/></td>
|
|
<td id="projectalign">
|
|
<div id="projectname">ESP32 WebCam Server<span id="projectnumber"> 5.0</span>
|
|
</div>
|
|
<div id="projectbrief">Fully customizable WebCam server based on Espressif ESP32-based board with a camera.</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- end header part -->
|
|
<!-- Generated by Doxygen 1.9.3 -->
|
|
<script type="text/javascript">
|
|
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt MIT */
|
|
var searchBox = new SearchBox("searchBox", "search",'Search','.html');
|
|
/* @license-end */
|
|
</script>
|
|
<script type="text/javascript" src="menudata.js"></script>
|
|
<script type="text/javascript" src="menu.js"></script>
|
|
<script type="text/javascript">
|
|
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt MIT */
|
|
$(function() {
|
|
initMenu('',true,false,'search.php','Search');
|
|
$(document).ready(function() { init_search(); });
|
|
});
|
|
/* @license-end */
|
|
</script>
|
|
<div id="main-nav"></div>
|
|
</div><!-- top -->
|
|
<!-- window showing the filter options -->
|
|
<div id="MSearchSelectWindow"
|
|
onmouseover="return searchBox.OnSearchSelectShow()"
|
|
onmouseout="return searchBox.OnSearchSelectHide()"
|
|
onkeydown="return searchBox.OnSearchSelectKey(event)">
|
|
</div>
|
|
|
|
<!-- iframe showing the search results (closed by default) -->
|
|
<div id="MSearchResultsWindow">
|
|
<iframe src="javascript:void(0)" frameborder="0"
|
|
name="MSearchResults" id="MSearchResults">
|
|
</iframe>
|
|
</div>
|
|
|
|
<div><div class="header">
|
|
<div class="headertitle"><div class="title">ESP32-CAM WebCam Server        </div></div>
|
|
</div><!--header-->
|
|
<div class="contents">
|
|
<div class="textblock"><p ><a class="anchor" id="md_README"></a><span title="ESP EYE"><img src="data/www/img/logo.svg" alt="ESP-EYE logo" style="pointer-events: none;" class="inline"/></span></p>
|
|
<p >This sketch is a fully customizable webcam server based on ESP32-based board with camera. It can be used as a starting point for your own webcam solution.</p>
|
|
<h2><a class="anchor" id="autotoc_md17"></a>
|
|
Key features:</h2>
|
|
<ul>
|
|
<li>Extended options for default network and camera settings</li>
|
|
<li>Save and restore settings in JSON configuration files</li>
|
|
<li>Dedicated standalone stream viewer</li>
|
|
<li>Over The Air firmware updates</li>
|
|
<li>Optimizing the way how the video stream is processed, thus allowing higher frame rates on high resolution.</li>
|
|
<li>Using just one IP port instead of two.</li>
|
|
<li>Porting the web server to <a href="https://github.com/me-no-dev/ESPAsyncWebServer">ESP Async Web Server</a>.</li>
|
|
<li>Storing web pages as separate HTML/CSS/JS files on the SD drive, which greatly simplifies development of the interface. Basically, you can swap the face of this project just by replacing files on SD card.</li>
|
|
<li>Reduced size of the sketch and improving memory utilization</li>
|
|
<li>Porting the code from basic C to C++ object hierarchy, eliminating extensive use of global variables</li>
|
|
<li>Lots of minor fixes and tweaks, documentation etc.</li>
|
|
</ul>
|
|
<h2><a class="anchor" id="autotoc_md18"></a>
|
|
Key principles</h2>
|
|
<p >There are many other variants of a webcam server for these modules online, but most are created for a specific scenario and not good for general, casual, webcam use.</p>
|
|
<p >Hopefully this expanded example is more useful for those users who wish to set up a simple ESP32 based webcam using the cheap(ish) modules freely available online.</p>
|
|
<h2><a class="anchor" id="autotoc_md19"></a>
|
|
Summary of reductions</h2>
|
|
<p >When re-desiginig and refactoring the original ESP32 Camera web server example from Espressve, the following key principles were followed:</p>
|
|
<ol type="1">
|
|
<li>Any idea can be killed by unnecessary features</li>
|
|
<li>See <a href="https://www.youtube.com/watch?v=iMULJIXPxK4">this tutorial video</a>.</li>
|
|
</ol>
|
|
<p >Given the above, face recognition feature was removed. The main purpose of this sketch is to make the camera web server easily configurable and reusable.</p>
|
|
<p >The original example, is a bit incomprehensible and hard to modify as supplied. It is very focused on showing off the face recognition capabilities, and forgets the 'webcam' part.</p>
|
|
<h2><a class="anchor" id="autotoc_md20"></a>
|
|
Supported development boards</h2>
|
|
<p >The sketch has been tested on the <a href="https://github.com/raphaelbs/esp32-cam-ai-thinker/blob/master/assets/ESP32-CAM_Product_Specification.pdf">AI Thinker ESP32-CAM</a> module. Other ESP32 boards equipped with camera may be compatible but not guaranteed.</p>
|
|
<h2><a class="anchor" id="autotoc_md21"></a>
|
|
Known Issues</h2>
|
|
<p >The ESP32 itself is susceptible to the usual list of WiFi problems, not helped by having small antennas, older designs, congested airwaves and demanding users. The majority of disconnects, stutters and other communication problems are simply due to 'WiFi issues'.</p>
|
|
<p >The AI-THINKER camera module & esp32 combination is quite susceptible to power supply problems affecting both WiFi conctivity and Video quality; short cabling and decent power supplies are your friend here; also well cooled cases and, if you have the time, decoupling capacitors on the power lines.</p>
|
|
<p >A basic limitation of the sketch is that it can can only support one stream at a time. If you try to connect to a cam that is already streaming (or attempting to stream, the first steam will freeze.</p>
|
|
<p >Currently, camera modules other than ov2640 are not supported.</p>
|
|
<h1><a class="anchor" id="autotoc_md22"></a>
|
|
Setup:</h1>
|
|
<ul>
|
|
<li>For programming you will need a suitable development environment. Possible options include Visual Studio Code, Arduino Studio or Espressif development environment .</li>
|
|
</ul>
|
|
<h2><a class="anchor" id="autotoc_md23"></a>
|
|
Wiring for AI-THINKER Boards (and similar clone-alikes)</h2>
|
|
<p >Is pretty simple, You just need jumper wires, no soldering really required, see the diagram below. <img src="Docs/hookup.png" alt="Hoockup" class="inline"/></p><ul>
|
|
<li>Connect the <b>RX</b> line from the serial adapter to the <b>TX</b> pin on ESP32</li>
|
|
<li>The adapters <b>TX</b> line goes to the ESP32 <b>RX</b> pin</li>
|
|
<li>The <b>GPIO0</b> pin of the ESP32 must be held LOW (to ground) when the unit is powered up to allow it to enter it's programming mode. This can be done with simple jumper cable connected at poweron, fitting a switch for this is useful if you will be reprogramming a lot.</li>
|
|
<li>You will to supply 5v to the ESP32 in order to power it during programming; the FTDI board alone fails to supply this sometimes. The ESP32 CAM board is very sensitive to the quality of power source. Decoupling capacitors are very much recommended.</li>
|
|
</ul>
|
|
<h2><a class="anchor" id="autotoc_md24"></a>
|
|
Download the Sketch, Unpack and Rename</h2>
|
|
<p >Download the latest release of the sketch this repository. Once you have done that you can open the sketch in the IDE by going to the <code>esp32-cam-webserver</code> sketch folder and selecting <code>esp32-cam-webserver.ino</code>.</p>
|
|
<p >You also need to copy the content of the <b>data</b> folder from this repository to a micro SD flash memory card (must be formatted as FAT32) and insert it into the micro SD slot of the board.</p>
|
|
<p >Without the SD card, the sketch will not start. Please ensure the size of the card does not exceed 4GB, which is a maximum supported capacity for ESP32-CAM board. Higher capacity SD card may not work.</p>
|
|
<h2><a class="anchor" id="autotoc_md25"></a>
|
|
Config</h2>
|
|
<p >You will need to configure the web server with your WiFi settings. In order to do so, you will need to create a config file in the root folder of your SD card named <code>conn.json</code> and format it as follows:</p>
|
|
<div class="fragment"><div class="line">{ </div>
|
|
<div class="line"> "mdns_name":"YOUR_MDNS_NAME",</div>
|
|
<div class="line"> "stations":[</div>
|
|
<div class="line"> {"ssid": "YOUR_SSID", "pass":"YOUR_WIFI_PASSWORD", "dhcp": true}</div>
|
|
<div class="line"> ],</div>
|
|
<div class="line"> "http_port":80,</div>
|
|
<div class="line"> "ota_enabled":true,</div>
|
|
<div class="line"> "ota_password":"YOUR_OTA_PASSWORD",</div>
|
|
<div class="line"> "ap_ssid":"esp32cam",</div>
|
|
<div class="line"> "ap_pass":"123456789",</div>
|
|
<div class="line"> "ap_ip": {"ip":"192.168.4.1", "netmask":"255.255.255.0"},</div>
|
|
<div class="line"> "ap_dhcp":true,</div>
|
|
<div class="line"> "ntp_server":"pool.ntp.org",</div>
|
|
<div class="line"> "gmt_offset":14400,</div>
|
|
<div class="line"> "dst_offset":0,</div>
|
|
<div class="line"> "debug_mode": false</div>
|
|
<div class="line">}</div>
|
|
</div><!-- fragment --><p> Replace the WiFi and OTA parameters with your settings and save. PLease note that the sketch will not boot properly if WiFi connection is established.</p>
|
|
<p >Web server name can configured by creating another config file, <code>httpd.json</code>, in the root folder of the SD card:</p>
|
|
<div class="fragment"><div class="line">{</div>
|
|
<div class="line"> "my_name": "MY_NAME",</div>
|
|
<div class="line"> "mapping":[ {"uri":"/dump", "path": "/www/dump.html"},</div>
|
|
<div class="line"> {"uri":"/img", "path": "/www/img"},</div>
|
|
<div class="line"> {"uri":"/css", "path": "/www/css"},</div>
|
|
<div class="line"> {"uri":"/js", "path": "/www/js"}],</div>
|
|
<div class="line"> "debug_mode": false</div>
|
|
<div class="line">}</div>
|
|
</div><!-- fragment --><p >The parameter <code>mapping</code> allows to configure folders with static content for the web server.</p>
|
|
<p >Similarly, default camera configuration parameters can be set by creating the file <code>cam.json</code>:</p>
|
|
<div class="fragment"><div class="line">{ </div>
|
|
<div class="line"> "lamp":-1,</div>
|
|
<div class="line"> "autolamp":0,</div>
|
|
<div class="line"> "framesize":8,</div>
|
|
<div class="line"> "quality":12,</div>
|
|
<div class="line"> "xclk":8,</div>
|
|
<div class="line"> "frame_rate":25,</div>
|
|
<div class="line"> "brightness":0,</div>
|
|
<div class="line"> "contrast":0,</div>
|
|
<div class="line"> "saturation":0,</div>
|
|
<div class="line"> "special_effect":0,</div>
|
|
<div class="line"> "wb_mode":0,"awb":1,</div>
|
|
<div class="line"> "awb_gain":1,</div>
|
|
<div class="line"> "aec":1,</div>
|
|
<div class="line"> "aec2":0,</div>
|
|
<div class="line"> "ae_level":0,</div>
|
|
<div class="line"> "aec_value":204,</div>
|
|
<div class="line"> "agc":1,</div>
|
|
<div class="line"> "agc_gain":0,</div>
|
|
<div class="line"> "gainceiling":0,</div>
|
|
<div class="line"> "bpc":0,</div>
|
|
<div class="line"> "wpc":1,</div>
|
|
<div class="line"> "raw_gma":1,</div>
|
|
<div class="line"> "lenc":1,</div>
|
|
<div class="line"> "vflip":0,</div>
|
|
<div class="line"> "hmirror":0,</div>
|
|
<div class="line"> "dcw":1,</div>
|
|
<div class="line"> "colorbar":0,</div>
|
|
<div class="line"> "rotate":"0", </div>
|
|
<div class="line"> "debug_mode": false</div>
|
|
<div class="line">}</div>
|
|
</div><!-- fragment --><h2><a class="anchor" id="autotoc_md26"></a>
|
|
Programming</h2>
|
|
<p >Assuming you are using the latest Espressif Arduino core the <code>ESP32 Dev Module</code> board will appear in the ESP32 Arduino section of the boards list. Select this (do not use the <code>AI-THINKER</code> entry listed in the boiards menu, it is not OTA compatible, and will cause the module to crash and reboot rather than updating if you use it. <img src="Docs/ota-board-selection.png" alt="IDE board config" class="inline"/></p>
|
|
<p >Make sure you select the <code>Minimal SPIFFS (1.9MB APP with OTA/190KB SPIFFS)</code> partition cheme and turn <code>PSRAM</code> on.</p>
|
|
<p >The first time you program (or if OTA is failing) you need to compile and upload the code from the IDE, and when the <code>Connecting...</code> appears in the console reboot the ESP32 module while keeping <b>GPIO0</b> grounded. You can release GPO0 once the sketch is uploading, most boards have a 'boot' button to trigger a reboot.</p>
|
|
<p >Once the upload completes (be patient, it can be a bit slow) open the serial monitor in the IDE and reboot the board again without GPIO0 grounded. In the serial monitor you should see the board start, connect to the wifi and then report the IP address it has been assigned.</p>
|
|
<p >Once you have the initial upload done and the board is connected to the wifi network you should see it appearing in the <code>network ports</code> list of the IDE, and you can upload wirelessly.</p>
|
|
<p >If you have a status LED configured it will give a double flash when it begins attempting to conenct to WiFi, and five short flashes once it has succeeded. It will also flash briefly when you access the camera to change settings.</p>
|
|
<p >Go to the URL given in the serial output, the web UI should appear with the settings panel open. Click away!</p>
|
|
<h2><a class="anchor" id="autotoc_md27"></a>
|
|
API</h2>
|
|
<p >The communications between the web browser and the camera module can also be used to send commands directly to the camera (eg to automate it, etc) and form, in effect, an API for the camera.</p><ul>
|
|
<li><a class="el" href="md__a_p_i.html">ESP32 Camera Web Server JSON API</a>.</li>
|
|
</ul>
|
|
<h1><a class="anchor" id="autotoc_md28"></a>
|
|
Contributing</h1>
|
|
<p >Contributions are welcome; please see the <a class="el" href="md__c_o_n_t_r_i_b_u_t_i_n_g.html">Contribution guidelines</a>.</p>
|
|
<h1><a class="anchor" id="autotoc_md29"></a>
|
|
Future plans</h1>
|
|
<ol type="1">
|
|
<li>Support of LittleFS.</li>
|
|
<li>Support of other boards and cameras.</li>
|
|
<li>Explore how to improve the video quality and further reduce requirements to resources. </li>
|
|
</ol>
|
|
</div></div><!-- PageDoc -->
|
|
</div><!-- contents -->
|
|
<!-- start footer part -->
|
|
<hr class="footer"/><address class="footer"><small>
|
|
Generated by <a href="https://www.doxygen.org/index.html"><img class="footer" src="doxygen.svg" width="104" height="31" alt="doxygen"/></a> 1.9.3
|
|
</small></address>
|
|
</body>
|
|
</html>
|