ESP32 WiFi instant Camera

I’ve been really busy with another projects like CALE Eink calendar but I still think that this one can be a good example for anyone dealing with SPI interfaces and is fun to build so I though about making an upgrade so it is:

• Easier to install using PlatformIO 
• Only one codebase for both ESP8266 and ESP32 (now that I have a bit more experience using #ifdef)
• Add zlib compression to send the image in ESP32 version (will reduce at least 3 times upload time)
• More customizable. Moving all config / SPI and so on into Config and leaving most configuration in a single place

So that’s it. I wish you all a great start of 2020, build cool stuff and learn a lot in the process

Martin Fasani

The limit I hit with this is that anything more than 10Kb of Json and Arduino JSON cannot parse it. So I didn't found time to check why it is, I just though about debugging it with PlatformIO with a board that supports debbuging and ordered one.

https://github.com/martinberlin/php-gallery/blob/master/upload-xbm.php The lines to do this in PHP are not very complicated, we will first reduce the thumbnail using imagemagic to about 60px height (Proportional) and then just read byte by byte and converting it to an integer. The image method does not really care if it's an hexa like "0xFF" or 255. So I prefer to sent 255 since it will generate a smaller Json response.

<?php
switch ($returnType) {
        // JPG bytes
        case 3:
            $im->setImageFormat('jpg');
            $jpg = $im->getImageBlob();
            $cleanPixels = array();
            foreach(str_split($jpg) as $char){
                array_push($cleanPixels, ord($char)); // For HEX image: "0x".strtoupper(bin2hex($char))
            }
            //header("Content-Type: image/jpeg");exit($jpg); // Check JPEG
            $imageObj['jpg']    = $cleanPixels;
}
$imageObj['url'] = "http://".$_SERVER['HTTP_HOST']."/".$directoryBase.$directoryDate.$uploadedName;
$imageObj['hash']= md5_file($uploadedFile);
$imageObj['folder'] = $getFolder;
echo json_encode($imageObj);

That will return a JSON like this (leaving only 5 bytes to avoid pasting an endless sucker here):

{"jpg":[255,216,0,0,0],
"url":,
"hash":"0c3d3224de90d57f32fbef43116eec14",
"folder":"Tests"}

 This is how will parse this incoming bytes in C++

// After successful upload and discarding response headers
// https://github.com/martinberlin/FS32/blob/tft-7735/src/FasarekFS2.ino#L380
 DynamicJsonBuffer jsonBuffer;
  JsonObject& json = jsonBuffer.parseObject(response);
  total_time = millis() - total_time;
  cameraOff();
  if (!json.success()) {
    tft.setTextColor(TFT_RED);
    printMessage("JSON parse failed", true, true);
    server.send(200, "text/html", "<div id='m'>JSON parse error. Debug:<br>"+response+"</div><br>");
    return;
  }
  
  char imageUrl[300];
  char hash[33];
  char folder[33];
  // WARNING If the json does not contain any of this properties then ESP will reboot
  strcpy(imageUrl, json["url"]);
  strcpy(hash, json["hash"]);
  strcpy(folder, json["folder"]);

  // serverCaptureWifi()
  if (json.containsKey("jpg")) {
    JsonArray& arr = json["jpg"];
    int c = 0;
    const char* tempx;
    for (auto value : arr) {
      image[c] = value.as<unsigned int>();
      c++;
    }
    // Draw thumbnail coming from json:
drawArrayJpeg(image, sizeof(image), 0, 11);

I hope that explains a bit more how is the JPG thumbnail rendering in this project.

NOTE : If anyone has an advice regarding my 10Kb max JSON String please comment. I also found out that when the response coming from the API is two long, strange numbers appear in the beginning and the end, so I had to clean it up like this:

// DEBUG: Do some ugly parsing since a big JSON comes with garbage at the beginning like 398f {"jpg":1,2} 0 (And an appended zero?)
int jsonStart = response.indexOf('{');
int jsonEnd = response.indexOf('}');
response = response.substring(jsonStart, jsonEnd+1);

 That is really sub-optimal and I still do not understand why. Is because String has a limit in characters ?

Last week I found out some time to make a new model of the camera using a cheap 4€ display st7735.

https://github.com/martinberlin/FS32/tree/tft-7735

The wiring of the ArduCam is defined right after setup() and we use an independent SPI class for the camera. I wrote a short blog post about it and I must say that using an inexpensive wemos ESP32 and the TFT display with a total cost about 9€ I could build a quite decent camera. ( this 9 bucks they do not include camera of course )

Blog post: https://fasani.de/2018/12/30/espressif-multi-spi-workshop/

3D file is still a bit raw. Just tell me if you have the intention to build one of this before I make the extra effort to clean it ;)

Happy new year 2019! Let your projects see the light and don’t let anyone tell you that it can’t be done ;)

ESP32 project has moved here: https://github.com/martinberlin/FS32

I'm a bit tired of switching branches all the time and I want to make a very basic version just for one camera model. Started using PlatformIO I find it much more versatile than Arduino, but it's compatible anyways, just open the contents of src/ and put the /data folder in the same level of your sketch. Camera firmware in this FS32 new repo is only for model OV5642 since I find it the best to take good pictures and finally after tweaking the code for weeks I'm able to take 19 good pictures out of 20 which is already much more than the previous rate. Stable code is currently merged on master.

There are two important additions that help to avoid wasting time and disk space:

1.  Check that the Arducam fifo memory read starts with the JPEG headers 2F / D8 and if not abort upload inmediatly:
   https://github.com/martinberlin/FS32/blob/master/src/FasarekFS2.ino#L491
2. Generate an MD5(Arducam_FIFO) and compare to MD5(After_upload)  if it does not match then show a message on the display (Or turn HIGH a digitalWrite to give a signal that upload is corrupt using a LED)
   Optionally you can change the code to save this picture to spiffs only if the upload failed
3. Point 2 involves returning a JSON string after upload containing:

{"url": "full_url_to_image.jpg",  "hash": "md5_file(uploaded_file)" }
Please check upload-xbm.php for a reference, it can be done in any language following that reply model.

Already with this 2 things is much more versatile and secure to take a picture because you know that it's a JPEG (Also the camera is working good) and also that the upload worked out.
Additionally there are two functions: cameraInit() and cameraOff() that take care of waking up the camera and switching it off after every photo if the config parameter: camera_mosfet is set to 1.

First 3 TOP actions here would be:

1. Power the camera via a MOSFET or using VEXT if your board supports it, only power it in the second that you take the picture and then disconnect it the hard way  DONE!
   NOTE: Although some boards like Heltec ESP32 claim that they support up to 200mA in VEXT, at least OV5642 is above that, almost reaching 300mA and then Voltage will go down and it won't work. Use always an external MOSFET unless it's guaranteed that VEXT supports at least 350mA.
2. Same with OLED display show anything for no more than 8/10 seconds, then make it off (Or sleep NOT DONE)
3. If you don't do any server.handleClient() action or you don't press the shooter the ESP32 will go into Deep sleep mode ( Not sure if it makes sense a sleepAfterMinutes new setting, for the moment no )

Starting taking the necessary steps to make the battery last longer:

https://github.com/martinberlin/FS2/issues/9 Read this if you are interested in the discussion

ESP32 integration and refactoring from the ESP8266 is done. Uses XBM thumbnail rendering as a response from PHP Upload endpoint if you want to use a Board with Oled.  Please refer to this issue to see the JSON example: 

https://github.com/martinberlin/FS2/issues/2

The PHP upload endpoint is here in upload-xbm.php : https://github.com/martinberlin/php-gallery
PHP Gallery is also a small Bootstrap 4 photo uploader and mini preview that is ready to receive the WiFi upload from the camera.