easytarget / esp32-cam-webserver Goto Github PK

The ESP32 is capable of secure (SSL) http communications; so enable it.
Lots of issues getting working certificates and keys, both generating them, and encoding them into the sketch. But a good example with documentation would be a good start,

• This is another quite well known ESP32 thing to do; so I can probably leverage solutions from other projects, or at least get a good hint.

Adding a HTTP basic auth system makes sense as part of this; #80 has a good example.

Recent changes to CSS dont play well with rotated streams, maybe need to rotate whole container, or swap out the vh/vw size modifiers on the image. Or even do this on the upper container too.. Need to experiment.

Please implement some additional system info:

Could think of the following:

• Local Time
• Uptime
• Load
• Free RAM
• Free Stack
• RSSI

Hi there!
Thanks for a great project focusing on important things for many of us.

I will not make a pull request for that, but I do think that in file storage.cpp in line 2
https://github.com/easytarget/esp32-cam-webserver/blob/master/storage.cpp#L2

it should be:

#include "esp_camera.h"
#include "jsonlib/jsonlib.h"
#include "storage.h"

instead of:

#include "esp_camera.h"
#include "jsonlib/jsonlib.cpp"
#include "storage.h"

(I'm using platformio on VSCode and it throws error when the linker is started at the end of compilation)

What have I done wrong?

Move all user and hardware options into myconfig.h so the main .ino file can remain unchanged.
Make the serial stream debug optional
Some cleanup in options and comments as I go.

Hi, thank you very much for providing this example code. Being actually a web-developer I was struggling with finding a way to be able to edit the HTML/styling more conveniently with some automatic conversion into the byte-arrays as in the original example.

I found some inspiration here and after some tweaking I made a script utilizing the bin2c tool to produce almost identical output as in the original example.

#!/bin/bash

OUTPUT_FILE=camera_index.h

convert_to_byte_array() {
    echo "Converting $@ to byte arrays"
    ./bin2c -m -o $OUTPUT_FILE $@
}

for file in `ls *.html`; do
    echo "Compressing: $file"
    cp "$file" "copy_$file" && \
    gzip -f "$file" && \
    mv "copy_$file" "$file"
    compressed_files=( "${compressed_files[@]}" $file".gz")
done
if test -f "./bin2c"; then
    convert_to_byte_array ${compressed_files[@]}
elif test -f "./bin2c.c"; then
    echo "Compiling bin2c from the source"
    gcc -o bin2c bin2c.c
    convert_to_byte_array ${compressed_files[@]}
else
    echo "Conversion of ${compressed_files[@]} to byte arrays not possilbe, missing bin2c.
Download bin2c source (bin2c.c) fom https://sourceforge.net/projects/bin2c/ and put it in this folder."
fi

I would like to replace the bash altogether with plain C code, but I wasn't able yet to figure out how to do the compression (some example is here)

So, maybe you could be interested to use my bash script or help me with extending the bin2c to something like html2c (There was something 20 years ago 😄 )

Hi all,

how about implementation off a fallback/alternative SSID for WIFI?

ESPeasy and Tasmota are supporting this for ESP8266, so this should be possible with ESP32 s well, right?

Would be a great settings option.

hi, today i tried your code,
now i just got the v3. announcment a minute ago.

my impression was before, your code is a bit slower than the general cam-example-code.

i did not find any hints, that there had been speed improvements in V3...
Or was my impression wrong?

thx.

Add OTA support. Is not posible to program a module that is in production. For example in a box in a corner in the ceiling of the room.

Expressif example:
https://github.com/espressif/arduino-esp32/tree/master/libraries/ESP32/examples/Camera/CameraWebServer
Has had some small fixes and changes since I copied it, worth triaging and bringing in.

i try V3beta3, and before the github version.
How do i differentiate the code-base/versions?
maybe even if it is flashed in different versions on different boards?

when the board dont get a webgui ready,
it would be great to see the version on the serial-monitor..

Hi there,
I liked your improvements. I'm actually looking for a startup configuration with face recognition. I mean when cam powered on automatically face recognition must be selected. Would you add this in your improvement list?

I had to add a couple of lines of code to specify the hostname.

WiFi.config(INADDR_NONE, INADDR_NONE, INADDR_NONE);
WiFi.setHostname("my_cam_hostname_goes_here");

I'm not sure where the best place to put them is but they work here, at the top and bottom of this snippet from the main file:

    WiFi.config(INADDR_NONE, INADDR_NONE, INADDR_NONE);
    if (bestStation == -1) {
        if (!accesspoint) { 
            #if defined(WIFI_AP_ENABLE)
                Serial.println("No known networks found, entering AccessPoint fallback mode");
                accesspoint = true;
            #else
                Serial.println("No known networks found");
            #endif
        } else {
            Serial.println("AccessPoint mode selected in config");
        }
    } else {
        Serial.printf("Connecting to Wifi Network: %s\n", stationList[bestStation].ssid);
        if (stationList[bestStation].dhcp == false) {
            #if defined(ST_IP)
                Serial.println("Applying static IP settings");
                #if !defined (ST_GATEWAY)  || !defined (ST_NETMASK) 
                    #error "You must supply both Gateway and NetMask when specifying a static IP address"
                #endif
                IPAddress staticIP(ST_IP);
                IPAddress gateway(ST_GATEWAY);
                IPAddress subnet(ST_NETMASK);
                #if !defined(ST_DNS1)
                    WiFi.config(staticIP, gateway, subnet);
                #else
                    IPAddress dns1(ST_DNS1);
                #if !defined(ST_DNS2)
                    WiFi.config(staticIP, gateway, subnet, dns1);
                #else
                    IPAddress dns2(ST_DNS2);
                    WiFi.config(staticIP, gateway, subnet, dns1, dns2);
                #endif
                #endif
            #else
                Serial.println("Static IP settings requested but not defined in config, falling back to dhcp");
            #endif
        }
        // Initiate network connection request
        WiFi.setHostname("my_cam_hostname_goes_here");
        WiFi.begin(stationList[bestStation].ssid, stationList[bestStation].password);

The hostname probably needs a myconfig.h setting too.

I think I found the solution here espressif/arduino-esp32#3438

I am getting a warning in Firefox developer tools about deprecated Components-Object still used.
It should no longer be used.

'Das Components-Objekt sollte nicht mehr verwendet werden. Es wird bald entfernt.'

Once these features are working for SPIFFS based storage it will be possible to provide handlers for up/downloading them.

Up/Down loading files/data via browsers is a common goal, so plenty of good examples can be found.

It is, however, still quite a bit of work to get the UI working well, plus the relevant http handlers for file up/download, so this is on the back-burner.

Very basic viewer with just enough code to grab the rotation setting and camera name for display,
Serve directly on the stream port at /view to complement the miniviewer on the http port
Provide a very stripped-down status query/response on stream port for this.
Start/Stop when image clicked, resize image without breaking ratio.
Maybe show resolution in tooltip.

Would be posible to do a #define FACE in order to allow the option to compile without face recognition featrures in order to get a smaller code to fit in a OTA compiler option?

I was trying to password protect the web stream following this link:
https://microcontrollerslab.com/esp32-password-protected-web-server-in-arduino-ide/
but I'm not really able to find the piece of code where to implement this.

Any help, suggestions, alternatives? Thank you!

Currently I (lazily) used simple calls to URI's to handle button actions (spiffs branch)
This causes URI handler 'bloat' and unwanted windows opening with responses. The 'Enrol' Button does it differently; leveraging the existing settings mechanism/uri. This would be a better way to handle this.

We can pull the camera module module from this:
https://github.com/espressif/esp32-camera/blob/master/driver/include/sensor.h

There seems to be very little robustness in the code for WiFi disconnects; once you fall off the local network you need a reboot to recover.
This is OK for the example/demo scenarios, but a headache when using these for long-duration use.
Some sort of basic re-try mechanism for client mode is needed,

• Nothing heavy. Just detect the disconnect and loop, retrying, until reconnected.

Since the camera module can be fully controlled via HTTP requests; lets document this as a basic API.

Also happens when I use a simple SSH tunnel, but NOT when i connect from my local network
espressif/arduino-esp32#2983
I'd like remote access working...

I've moved the stream URI from http://<host>:<port>/stream to the web root, eg: http://<host>:<port>/stream
Set up a permanent redirect for all accesses (except favicons..) to ensure clients see the stream for any path on the port.

Hi,

I installed v3.0-RC2 on two of my cams, one with external antenna.

I have 2 AccessPoints with the same SSID. Usually my devices connect to the AP with the strongest signal
but the two cams are only connecting to the AP which they connected to at first connect.

Does the cam store information of the AP somehow?
I once had this with another IP cam, where the cam refused to connect to another AP with the same SSID.

thx

Enable the RTC in the esp32 so that we can use the system time effectively.
https://docs.espressif.com/projects/esp-idf/en/latest/esp32/api-reference/system/system_time.html

And select a time source: https://docs.espressif.com/projects/esp-idf/en/latest/esp32/api-reference/system/system_time.html#rtc-clock-source
(the 8.5MHz option makes sense, we dont need to save power in deep sleep modes for this project)

• Useful in V4 for saving files to disk, putting a timestamp on logging, etc.
• Basis for an OSD overlay function
• Provide a global flag that can be set to say 'NTP synced', and chose file names sensibly depending on that.
• This looks like a good candidate: https://github.com/arduino-libraries/NTPClient
• Config: activate by defining a ntp pool server in myconfig.h

This issue only covers adding NTP time syncing, future enhancements will actually use this info.

I have had many problems with my esp32 cam and have solved them but there is one I cant figure out. I have used the FTDI USB to TTL converter and two Arduino uno's and nothing is working. After running the camera web server script and removing the jumper from the esp32 cam I would open the serial monitor and click the RST button on the back of the cam to get the ip adress of the cam. But instead of the ip adress this error would pop up:

[E][sccb.c:154] SCCB_Write(): SCCB_Write Failed addr:0x70, reg:0x12, data:0x80, ret:-1
[E][sccb.c:154] SCCB_Write(): SCCB_Write Failed addr:0x70, reg:0xff, data:0x00, ret:-1
[E][sccb.c:154] SCCB_Write(): SCCB_Write Failed addr:0x70, reg:0x05, data:0x01, ret:-1
[E][camera.c:1215] camera_init(): Failed to set frame size
[E][camera.c:1270] esp_camera_init(): Camera init failed with error 0x20002

If anybody could help me that would be greatly appreciated.

It would be an idea to store the web assets: html indexes, icons, etc. on LittleFS, if available.

• Separate CSS and Javascript files would be nice.
• Either provide a default in the sketch, Or have a default landing page prompting for a web asset upload. grbl-esp32 does this and it works well.
• Could enable a 'proper' toolchain for the Web UI, building and delivering the UI as a gzippped package
  This would allow easy updating and testing, skinning etc

Noticed in passing. Set on line 177 in esp32-cam-webserver.ino, looks trivial to break this out.

As others have stated after some time (minutes to hours) the stream becomes unavailable and in some cases the main page also. (device still responds to pings)

I did find a post that suggests that a lot of the issue occur with chrome browser although I also experienced issues with IE and firefox (mobile and platform) Here is the fix they suggested. https://rntlab.com/question/solved-esp32-web-server-drops-connection-crashes/

Also would be really nice if there was the stream page also able to be changed from myconfig.h and a modified version that removed all the facial recognition. Also debug is seems to be working intermittently.

I had to program my aithinker using the wrover option in board manager, not sure if this means mine was a clone.

Thanks again for the great project.

Similar to adding favicon responses, it should be relatively easy to make a standalone miniviewer page for the stream.

• No Controls, except maybe a close button
• Respect the current browser rotation setting when opened
• Scale the stream to fill window (with borders to preserve ratio)

i had this before on the usb-port of my PC,
not enough current...

but with same module and pre-release2 (beta3) version,
it does not recover. even on a stronger USB-port.

something i can do about?

===
esp32-cam-webserver: ESP32 camera server
Code Built: Oct  6 2020 @ 14:25:17
Camera init succeeded
OV2640 camera module detected
Internal filesystem contents
Listing SPIFFS directory: /
Preference file /esp32cam-preferences.json not found; using system defaults.
Lamp: 0%, pwm = 0
Starting WiFi
Known external SSIDs: None
MAC address: CC:50:E3:95:12:24
Scanning local Wifi Networks

Brownout detector was triggered

ets Jun  8 2016 00:22:57

rst:0xc (SW_CPU_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
configsip: 0, SPIWP:0xee
clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00
mode:DIO, clock div:1
load:0x3fff0018,len:4
load:0x3fff001c,len:1216
ho 0 tail 12 room 4
load:0x40078000,len:9720
ho 0 tail 12 room 4
load:0x40080400,len:6352
entry 0x400806b8

====
esp32-cam-webserver: ESP32 camera server
Code Built: Oct  6 2020 @ 14:25:17
[E][camera.c:205] skip_frame(): Timeout waiting for VSYNC
[E][camera.c:1270] esp_camera_init(): Camera init failed with error 0x20003
Halted: Camera sensor failed to initialise
Will reboot to try again in 10s

ets Jun  8 2016 00:22:57

rst:0xc (SW_CPU_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
configsip: 0, SPIWP:0xee
clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00
mode:DIO, clock div:1
load:0x3fff0018,len:4
load:0x3fff001c,len:1216
ho 0 tail 12 room 4
load:0x40078000,len:9720
ho 0 tail 12 room 4
load:0x40080400,len:6352
entry 0x400806b8

====
esp32-cam-webserver: ESP32 camera server
Code Built: Oct  6 2020 @ 14:25:17
[E][camera.c:205] skip_frame(): Timeout waiting for VSYNC
[E][camera.c:1270] esp_camera_init(): Camera init failed with error 0x20003
Halted: Camera sensor failed to initialise
Will reboot to try again in 10s

Just wondering if its possible to change the "V-Flip" button a rotate function in 90 degree increments. Methinks that would be much more useful. I have looked thru the code and can't find anything I understand to change it. My code skills are pretty much non-existent anyway.

This would make for many more mounting options for the camera.

Hi all,

stream freezes regulary.

Powered via USB power bank 5,17 V.

Webserver keeps up and does not reboot.

Please check

Can this be saved/restored?

• Need to check; it appears to just be a indexed array/structure in memory, so I assume the answer is yes.

If so:

1. Save/Restore to LittleFS
2. Rename/Delete entries
3. Upload/Download from the clients browser

The first is probably the easiest, json makes sense for the format rather than binary. The first step is to read the IDE build settings (to check that space is reserved for the filesystem) and, if so, run an example on the ESP-CAM board to demo saving/restoring a filestructure to that.
Adding buttons to the UI and a new action handler to process that should be relatively easy.

The second involves setting up a handler that can return the name list, a dialog to obtain that and offer rename/delete on entries, then a receiver to import the update and modify the in-ram Db. The dialog involves extending the javascript somewhat.

The third involves another handler/reciever pair to provide the current db from ram as a Json file, and a reciever to import that. The JS for this is also a bit complex, the upload needs a progress bar and fail/success notification etc.

It appears to be relatively easy, though cumbersome, to change default compile-time values for camera controls(gain, white balance, effects, etc) by editing the defaults in the code.
This would be a useful stop-gap measure since a proper save/restore mechanism for the controls is some way off (planned as a v4 milestone)

• Test
• Write-Up in the readme, or a separate document

Hi,

thx for the great project!

Any chance for having multiclient streaming enabled in your project?

See for reference:
https://github.com/arkhipenko/esp32-cam-mjpeg-multiclient

br

Good day. Thank you for your effort in developing this and putting it out there for the masses.

It is proving useful for my employment of the ESP32 CAM as a 3D printer camera and is beneficial in this use case as I can set default resolution and have the Illumination LED on.

It would be useful to be able to have the Illuminator LED off when not streaming but allow a preset illumination level whenever a capture event transpires vs. having it on and generating heat all the time.

Thanks again! Take care.

When I set rotation in a browser, send to the server and change the default for new windows (eg so miniviewer respects this when changed in main window

Hide the settings panel, display a little 'Loading' text in it's place.
Once the initial settings are loaded hide the loading notification and show the settings.

V4 extended..
Allow images to be (timestamped and) saved to a folder on an attached SD card (AI-THINKER has a SD card slot)

• Trigger button in UI
• Timelapse?
• Face recognition triggers?
  • Named faces
  • Unknown faces

Allow images to be browsed, deleted and downloaded via the WebUI. ?

• maybe some libraries/examples already exist for this
• Download all images as a bundle? might be easier for UI to do, and may also have some examples/libaries already available or adaptable.

Alternatively find a library (?) that allows ftp/smd or some other file transfer/browse standard to access the filestore.

Hi,

when I used the original demo version available in Arduino IDE I was able to get the video stream on my mobile using tinyCam PRO Android app.

Settings:
Vendor: Generic
Camera model: Generic URL
URL: http://IP:81/stream
Protocol: snapshot (JPEG)

Now with your project the above settings (but URL http://IP:81/view) does not show the stream.

Also changing the protocol to 'Server push (MJPEG)' does not work.

Any ideas?

Thx

I'd like to have SSID & key added to settings panel, with a fallback and also all of theses settings saved in Preferences, to restore them on reboot.

Do you plan to do that ?

Find a graphic, encode it up, send as a response to a /favicon.ico request.
Good online resources for the icon generation.

Currently each html doc (now three) has a huge CSS payload, it would make sense to serve this as a seperate CSS file to make the HTML and JS files smaller and easier to work with.
Bonus: makes theming easier since changes apply to all pages automagically.

Add ability to extend the path for the HTTP handlers; allowing easier embedding and providing a basic secrecy hurdle against casual viewers.

ie: define HTTP_PREFIX (eg mysecret/) and embed in all the URI's like this http://<IP>/$HTTP_PREIX<target>

Needs SSL support ( #54 ) to become a real privacy / eavesdropper protection, totally vulnerable to network sniffing without this.
May be very useful if you want to embed within another site.

I have made some changes that allow an AP to be set up using a macro variable WIFI_AP that is declared in myconfig.h. Also added a wifichan definition in the myconfig to help wireless congestion. Changes are in esp32-cam-webserver.ino

First change

#ifdef WIFI_AP
  Serial.println("Setting up AP");
  WiFi.softAP(ssid, password, wifichan);
#else
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(250);  // Wait for Wifi to connect. If this fails wifi the code basically hangs here.
                 // - It would be good to do something else here as a future enhancement.
                 //   (eg: go to a captive AP config portal to configure the wifi)
  }
#endif

2nd change

#ifdef WIFI_AP
  Serial.print(WiFi.softAPIP());
#else
  Serial.print(WiFi.localIP());
#endif
  Serial.println("' to connect");
}

Simple inclusions.

Cheers John

Use LittleFS (nee SPIFFS) to save/restore settings to both the stream/camera and the UI in a persistent manner

Hopefully there is a library I can leverage for this, YAML based for preference.
Needs some thought and effort; there are a lot of settings to cover if all the discreet camera settings are included.
Addresses #7

Hi all,

I understand that in the original demo version some http requests are supported to set parameters.

Is setting the light by http request supported in this version?

I would like to do the following from my FHEM home automation.

• if door bell pressed
• http request to turn on LED (if night)
• get still picture
• send still picture via Telegram
• http request to turn off LED

thx for your support