ESP32-CAM toma fotografías y las muestra en el servidor web

¿Quieres aprender cómo utilizar tu ESP32-CAM para tomar fotografías y mostrarlas en un servidor web? En este artículo, te enseñaremos paso a paso cómo lograrlo, utilizando este increíble dispositivo y sus capacidades. ¡No te lo pierdas!

Aprenda a crear un servidor web usando la placa CAM ESP32 que le permite enviar un comando para tomar una foto y ver la última foto tomada en su navegador almacenada en SPIFFS. También agregamos la opción de rotar la imagen si es necesario.

Tenemos otros proyectos ESP32 CAM en nuestro blog que podrían interesarle. De hecho, puedes ampliar este proyecto aún más agregando un sensor PIR para tomar una foto cuando se detecta movimiento, un botón físico para tomar una foto o incluso incluir capacidades de transmisión de video en otra ruta URL.

Otros proyectos y tutoriales de ESP32 CAM:

• ESP32-CAM Detector de movimiento PIR con grabación de fotografías (guarda en tarjeta microSD)
• Streaming de vídeo ESP32 CAM y reconocimiento facial con Arduino IDE
• Servidor web de transmisión de video ESP32-CAM (Home Assistant, Node-RED, etc.)
• ESP32-CAM Tomar foto y guardar en tarjeta MicroSD
• Guía de solución de problemas de ESP32-CAM

Mira el vídeo de demostración

Mire la demostración en video a continuación para ver lo que creará en este tutorial.

Piezas requeridas

Para completar este proyecto necesitará las siguientes piezas:

• Cámara ESP32 con OV2640 (Leer descripción general del tablero) – leer Las mejores placas de desarrollo CAM ESP32
• Cable puente hembra a hembra
• programador FTDI
• Fuente de alimentación de 5V o banco de energía

Puedes utilizar los enlaces anteriores o ir directamente MakerAdvisor.com/tools ¡Para encontrar todas las piezas para tus proyectos al mejor precio!

Descripción del proyecto

La siguiente imagen muestra el servidor web que crearemos en este tutorial.

Al acceder al servidor web, aparecen tres botones:

• DOBLAR: Dependiendo de la orientación de su ESP32 CAM, es posible que necesite rotar la foto.
• TOMA UNA FOTO: Cuando hace clic en este botón, la ESP32 CAM tomará una nueva foto y la guardará en el ESP32 SPIFFS. Espere al menos 5 segundos antes de actualizar la página web para asegurarse de que ESP32 CAM capture y guarde la foto;
• ACTUALIZAR PÁGINA: Al hacer clic en este botón, la página web se actualizará y actualizará con la foto más reciente.

Nota: Como ya se mencionó, la última foto tomada se guarda en el ESP32 SPIFFS, por lo que siempre puedes acceder a la última foto guardada incluso si reinicias tu tablero.

Instalación del complemento ESP32

Programamos la placa ESP32 con Arduino IDE. Por lo tanto, debe tener instalado el IDE de Arduino y el complemento ESP32:

• Instalación de la placa ESP32 en el IDE Arduino (Windows, Mac OS X, Linux)

Instalación de bibliotecas

Para crear el servidor web utilizamos el ESPAsyncWebServer Biblioteca. Esta biblioteca también requiere la AsíncronoTCP Biblioteca para funcionar correctamente. Siga los siguientes pasos para instalar estas bibliotecas.

Instalación de la biblioteca ESPAsyncWebServer

Siga los siguientes pasos para instalar el ESPAsyncWebServer Biblioteca:

1. Haga clic aquí para descargar la biblioteca ESPAsyncWebServer. Deberías tener una carpeta .zip en tu carpeta de Descargas.
2. Descomprima la carpeta .zip y debería obtener Maestro ESPAsyncWebServer Carpeta
3. Cambie el nombre de su carpeta de Maestro ESPAsyncWebServer A ESPAsyncWebServer
4. mueve eso ESPAsyncWebServer Carpeta a la carpeta de bibliotecas de instalación de Arduino IDE

Alternativamente, después de descargar la biblioteca, puede Bosquejo > incluir biblioteca > Agregar biblioteca .ZIP… y seleccione la biblioteca que acaba de descargar.

Instalación de la biblioteca Async TCP para ESP32

La biblioteca ESPAsyncWebServer requiere la AsíncronoTCP Obras de biblioteca. Siga los siguientes pasos para instalar esta biblioteca:

1. Haga clic aquí para descargar la biblioteca AsyncTCP. Deberías tener una carpeta .zip en tu carpeta de Descargas.
2. Descomprima la carpeta .zip y debería obtener Maestro asíncrono TCP Carpeta
3. Cambie el nombre de su carpeta de Maestro asíncrono TCP A AsíncronoTCP
4. mueve eso AsíncronoTCP Carpeta a la carpeta de bibliotecas de instalación de Arduino IDE
5. Finalmente, vuelva a abrir su IDE de Arduino

Alternativamente, después de descargar la biblioteca, puede Bosquejo > incluir biblioteca > Agregar biblioteca .ZIP… y seleccione la biblioteca que acaba de descargar.

ESP32-CAM – Boceto para tomar y ver fotografías en el servidor web

Copie el siguiente código en su IDE de Arduino. Este código crea un servidor web que le permite tomar una foto con su ESP32 CAM y ver la última foto tomada. Dependiendo de la orientación de su ESP32 CAM, es posible que desee rotar la imagen, por lo que también hemos incluido esta función.

/*********
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-cam-take-photo-display-web-server/
  
  IMPORTANT!!! 
   - Select Board "AI Thinker ESP32-CAM"
   - GPIO 0 must be connected to GND to upload a sketch
   - After connecting GPIO 0 to GND, press the ESP32-CAM on-board RESET button to put your board in flashing mode
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*********/

#include "WiFi.h"
#include "esp_camera.h"
#include "esp_timer.h"
#include "img_converters.h"
#include "Arduino.h"
#include "soc/soc.h"           // Disable brownour problems
#include "soc/rtc_cntl_reg.h"  // Disable brownour problems
#include "driver/rtc_io.h"
#include <ESPAsyncWebServer.h>
#include <StringArray.h>
#include <SPIFFS.h>
#include <FS.h>

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

boolean takeNewPhoto = false;

// Photo File Name to save in SPIFFS
#define FILE_PHOTO "/photo.jpg"

// OV2640 camera module pins (CAMERA_MODEL_AI_THINKER)
#define PWDN_GPIO_NUM     32
#define RESET_GPIO_NUM    -1
#define XCLK_GPIO_NUM      0
#define SIOD_GPIO_NUM     26
#define SIOC_GPIO_NUM     27
#define Y9_GPIO_NUM       35
#define Y8_GPIO_NUM       34
#define Y7_GPIO_NUM       39
#define Y6_GPIO_NUM       36
#define Y5_GPIO_NUM       21
#define Y4_GPIO_NUM       19
#define Y3_GPIO_NUM       18
#define Y2_GPIO_NUM        5
#define VSYNC_GPIO_NUM    25
#define HREF_GPIO_NUM     23
#define PCLK_GPIO_NUM     22

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { text-align:center; }
    .vert { margin-bottom: 10%; }
    .hori{ margin-bottom: 0%; }
  </style>
</head>
<body>
  <div id="container">
    <h2>ESP32-CAM Last Photo</h2>
    <p>It might take more than 5 seconds to capture a photo.</p>
    <p>
      <button onclick="rotatePhoto();">ROTATE</button>
      <button onclick="capturePhoto()">CAPTURE PHOTO</button>
      <button onclick="location.reload();">REFRESH PAGE</button>
    </p>
  </div>
  <div><img src="saved-photo" id="photo" width="70%"></div>
</body>
<script>
  var deg = 0;
  function capturePhoto() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "/capture", true);
    xhr.send();
  }
  function rotatePhoto() {
    var img = document.getElementById("photo");
    deg += 90;
    if(isOdd(deg/90)){ document.getElementById("container").className = "vert"; }
    else{ document.getElementById("container").className = "hori"; }
    img.style.transform = "rotate(" + deg + "deg)";
  }
  function isOdd(n) { return Math.abs(n % 2) == 1; }
</script>
</html>)rawliteral";

void setup() {
  // Serial port for debugging purposes
  Serial.begin(115200);

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  if (!SPIFFS.begin(true)) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    ESP.restart();
  }
  else {
    delay(500);
    Serial.println("SPIFFS mounted successfully");
  }

  // Print ESP32 Local IP Address
  Serial.print("IP Address: http://");
  Serial.println(WiFi.localIP());

  // Turn-off the 'brownout detector'
  WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0);

  // OV2640 camera module
  camera_config_t config;
  config.ledc_channel = LEDC_CHANNEL_0;
  config.ledc_timer = LEDC_TIMER_0;
  config.pin_d0 = Y2_GPIO_NUM;
  config.pin_d1 = Y3_GPIO_NUM;
  config.pin_d2 = Y4_GPIO_NUM;
  config.pin_d3 = Y5_GPIO_NUM;
  config.pin_d4 = Y6_GPIO_NUM;
  config.pin_d5 = Y7_GPIO_NUM;
  config.pin_d6 = Y8_GPIO_NUM;
  config.pin_d7 = Y9_GPIO_NUM;
  config.pin_xclk = XCLK_GPIO_NUM;
  config.pin_pclk = PCLK_GPIO_NUM;
  config.pin_vsync = VSYNC_GPIO_NUM;
  config.pin_href = HREF_GPIO_NUM;
  config.pin_sscb_sda = SIOD_GPIO_NUM;
  config.pin_sscb_scl = SIOC_GPIO_NUM;
  config.pin_pwdn = PWDN_GPIO_NUM;
  config.pin_reset = RESET_GPIO_NUM;
  config.xclk_freq_hz = 20000000;
  config.pixel_format = PIXFORMAT_JPEG;

  if (psramFound()) {
    config.frame_size = FRAMESIZE_UXGA;
    config.jpeg_quality = 10;
    config.fb_count = 2;
  } else {
    config.frame_size = FRAMESIZE_SVGA;
    config.jpeg_quality = 12;
    config.fb_count = 1;
  }
  // Camera init
  esp_err_t err = esp_camera_init(&config);
  if (err != ESP_OK) {
    Serial.printf("Camera init failed with error 0x%x", err);
    ESP.restart();
  }

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send_P(200, "text/html", index_html);
  });

  server.on("/capture", HTTP_GET, [](AsyncWebServerRequest * request) {
    takeNewPhoto = true;
    request->send_P(200, "text/plain", "Taking Photo");
  });

  server.on("/saved-photo", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, FILE_PHOTO, "image/jpg", false);
  });

  // Start server
  server.begin();

}

void loop() {
  if (takeNewPhoto) {
    capturePhotoSaveSpiffs();
    takeNewPhoto = false;
  }
  delay(1);
}

// Check if photo capture was successful
bool checkPhoto( fs::FS &fs ) {
  File f_pic = fs.open( FILE_PHOTO );
  unsigned int pic_sz = f_pic.size();
  return ( pic_sz > 100 );
}

// Capture Photo and Save it to SPIFFS
void capturePhotoSaveSpiffs( void ) {
  camera_fb_t * fb = NULL; // pointer
  bool ok = 0; // Boolean indicating if the picture has been taken correctly

  do {
    // Take a photo with the camera
    Serial.println("Taking a photo...");

    fb = esp_camera_fb_get();
    if (!fb) {
      Serial.println("Camera capture failed");
      return;
    }

    // Photo file name
    Serial.printf("Picture file name: %sn", FILE_PHOTO);
    File file = SPIFFS.open(FILE_PHOTO, FILE_WRITE);

    // Insert the data in the photo file
    if (!file) {
      Serial.println("Failed to open file in writing mode");
    }
    else {
      file.write(fb->buf, fb->len); // payload (image), payload length
      Serial.print("The picture has been saved in ");
      Serial.print(FILE_PHOTO);
      Serial.print(" - Size: ");
      Serial.print(file.size());
      Serial.println(" bytes");
    }
    // Close the file
    file.close();
    esp_camera_fb_return(fb);

    // check if file has been correctly saved in SPIFFS
    ok = checkPhoto(SPIFFS);
  } while ( !ok );
}

Ver código sin formato

Cómo funciona el código

Primero, incluye las librerías necesarias para trabajar con la cámara, crea el servidor web y usa SPIFFS.

#include "WiFi.h"
#include "esp_camera.h"
#include "esp_timer.h"
#include "img_converters.h"
#include "Arduino.h"
#include "soc/soc.h"           // Disable brownout problems
#include "soc/rtc_cntl_reg.h"  // Disable brownout problems
#include "driver/rtc_io.h"
#include <ESPAsyncWebServer.h>
#include <StringArray.h>
#include <SPIFFS.h>
#include <FS.h>

A continuación, escriba sus credenciales de red en las siguientes variables para que la CAM ESP32 pueda conectarse a su red local.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Crea uno Servidor web asíncrono Objeto en el puerto 80.

AsyncWebServer server(80);

El tomar una nueva foto La variable booleana indica cuándo es el momento de tomar una nueva fotografía.

boolean takeNewPhoto = false;

A continuación, establezca la ruta y el nombre de la foto que se guardará en SPIFFS.

#define FILE_PHOTO "/photo.jpg"

A continuación, defina los pines de la cámara para el módulo ESP32-CAM AI THINKER.

#define PWDN_GPIO_NUM     32
#define RESET_GPIO_NUM    -1
#define XCLK_GPIO_NUM      0
#define SIOD_GPIO_NUM     26
#define SIOC_GPIO_NUM     27
#define Y9_GPIO_NUM       35
#define Y8_GPIO_NUM       34
#define Y7_GPIO_NUM       39
#define Y6_GPIO_NUM       36
#define Y5_GPIO_NUM       21
#define Y4_GPIO_NUM       19
#define Y3_GPIO_NUM       18
#define Y2_GPIO_NUM        5
#define VSYNC_GPIO_NUM    25
#define HREF_GPIO_NUM     23
#define PCLK_GPIO_NUM     22

Creando el sitio web

A continuación necesitamos el HTML para crear la página web:

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { text-align:center; }
    .vert { margin-bottom: 10%; }
    .hori{ margin-bottom: 0%; }
  </style>
</head>
<body>
  <div id="container">
    <h2>ESP32-CAM Last Photo</h2>
    <p>It might take more than 5 seconds to capture a photo.</p>
    <p>
      <button onclick="rotatePhoto();">ROTATE</button>
      <button onclick="capturePhoto()">CAPTURE PHOTO</button>
      <button onclick="location.reload();">REFRESH PAGE</button>
    </p>
  </div>
  <div><img src="https://randomnerdtutorials.com/esp32-cam-take-photo-display-web-server/saved-photo" id="photo" width="70%"></div>
</body>
<script>
  var deg = 0;
  function capturePhoto() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "/capture", true);
    xhr.send();
  }
  function rotatePhoto() {
    var img = document.getElementById("photo");
    deg += 90;
    if(isOdd(deg/90)){ document.getElementById("container").className = "vert"; }
    else{ document.getElementById("container").className = "hori"; }
    img.style.transform = "rotate(" + deg + "deg)";
  }
  function isOdd(n) { return Math.abs(n % 2) == 1; }
</script>
</html>)rawliteral";

No entraremos en detalles sobre cómo funciona este HTML. Sólo damos una breve descripción.

Básicamente crea tres botones: DOBLAR; TOMA UNA FOTO Y ACTUALIZAR PÁGINA. Cada foto llama a una función de JavaScript diferente: rotarFoto(), capturarFoto() Y recargar().

<button onclick="rotatePhoto();">ROTATE</button>
<button onclick="capturePhoto()">CAPTURE PHOTO</button>
<button onclick="location.reload();">REFRESH PAGE</button>

El capturarFoto() La función envía una solicitud al /captura URL al ESP32 para que tome una nueva foto.

function capturePhoto() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "/capture", true);
  xhr.send();
}

El rotarFoto() La función gira la foto.

function rotatePhoto() {
  var img = document.getElementById("photo");
  deg += 90;
  if(isOdd(deg/90)){ document.getElementById("container").className = "vert"; }
  else{ document.getElementById("container").className = "hori"; }
  img.style.transform = "rotate(" + deg + "deg)";
}
function isOdd(n) { return Math.abs(n % 2) == 1; }

No estamos seguros de cuál es la «mejor» forma de rotar una foto con JavaScript. Este método funciona bien, pero puede haber mejores formas de hacerlo. Si tienes alguna sugerencia, por favor compártela con nosotros.

Finalmente, la fotografía se muestra en el siguiente apartado.

<div><img src="https://randomnerdtutorials.com/esp32-cam-take-photo-display-web-server/saved-photo" id="photo" width="70%"></div>

Si haces clic en esto ACTUALIZAR se cargará la última imagen.

configuración()

En el configuración()Inicializar una comunicación en serie:

Serial.begin(115200);

Conecte el ESP32-CAM a su red local:

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi...");
}

Inicializar SPIFFS:

if (!SPIFFS.begin(true)) {
  Serial.println("An Error has occurred while mounting SPIFFS");
  ESP.restart();
}
else {
  delay(500);
  Serial.println("SPIFFS mounted successfully");
}

Imprima la dirección IP local del ESP32-CAM:

Serial.print("IP Address: http://");
Serial.println(WiFi.localIP());

Las siguientes líneas configuran e inicializan la cámara con la configuración correcta.

Administrar el servidor web

A continuación, debemos aclarar qué sucede cuando ESP32-CAM recibe una solicitud a una URL.

Cuando el ESP32-CAM recibe una solicitud al servidor raíz / URL, enviamos el texto HTML para crear la página web.

server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
  request->send_P(200, "text/html", index_html);
});

Si pulsamos el botón “CAPTURA«Botón en el servidor web enviamos una solicitud al ESP32 /captura URL. Cuando eso sucede, los configuramos tomar una nueva foto variable VERDADEROentonces sabemos que es hora de tomar una nueva foto.

server.on("/capture", HTTP_GET, [](AsyncWebServerRequest * request) {
  takeNewPhoto = true;
  request->send_P(200, "text/plain", "Taking Photo");
});

Si se hace una solicitud en el /foto guardada URL, envía la foto almacenada en SPIFFS a un cliente conectado:

server.on("/saved-photo", HTTP_GET, [](AsyncWebServerRequest * request) {
  request->send(SPIFFS, FILE_PHOTO, "image/jpg", false);
});

Finalmente, inicie el servidor web.

server.begin();

Cinta()

En el Cinta()Si el tomar una nueva foto La variable es verdadera, a eso la llamamos capturarFotoGuardarSpiffs() para tomar una nueva foto y guardarla en SPIFFS. Luego configure el tomar una nueva foto variable INCORRECTO.

void loop() {
  if (takeNewPhoto) {
    capturePhotoSaveSpiffs();
    takeNewPhoto = false;
  }
  delay(1);
}

Toma una foto

Hay dos características más en el boceto: comprobarFoto() Y capturarFotoGuardarSpiffs().

El comprobarFoto() La función comprueba si la foto se guardó correctamente en SPIFFS.

bool checkPhoto( fs::FS &fs ) {
  File f_pic = fs.open( FILE_PHOTO );
  unsigned int pic_sz = f_pic.size();
  return ( pic_sz > 100 );
}

El capturarFotoGuardarSpiffs() La función toma una foto y la guarda en SPIFFS.

void capturePhotoSaveSpiffs( void ) {
  camera_fb_t * fb = NULL; // pointer
  bool ok = 0; // Boolean indicating if the picture has been taken correctly

  do {
    // Take a photo with the camera
    Serial.println("Taking a photo...");

    fb = esp_camera_fb_get();
    if (!fb) {
      Serial.println("Camera capture failed");
      return;
    }

    // Photo file name
    Serial.printf("Picture file name: %sn", FILE_PHOTO);
    File file = SPIFFS.open(FILE_PHOTO, FILE_WRITE);

    // Insert the data in the photo file
    if (!file) {
      Serial.println("Failed to open file in writing mode");
    }
    else {
      file.write(fb->buf, fb->len); // payload (image), payload length
      Serial.print("The picture has been saved in ");
      Serial.print(FILE_PHOTO);
      Serial.print(" - Size: ");
      Serial.print(file.size());
      Serial.println(" bytes");
    }
    // Close the file
    file.close();
    esp_camera_fb_return(fb);

    // check if file has been correctly saved in SPIFFS
    ok = checkPhoto(SPIFFS);
  } while ( !ok );
}

Esta función se basó en este boceto de dualvim.

Código de carga de cámara ESP32

Para cargar código en el Leva ESP32 conéctelo a su computadora mediante un cable. programador FTDI. Siga el siguiente diagrama esquemático:

Importante: GPIO 0 debe estar conectado a GND para poder cargar el código.

Muchos programadores FTDI tienen un puente que le permite seleccionar 3,3 V o 5 V. Asegúrese de que el puente esté en el lugar correcto para seleccionar 5V.

Leva ESP32	programador FTDI
Dimensiones	Dimensiones
5V	VCC (5V)
U0R	Texas
U0T	RX
GPIO 0	Dimensiones

Para cargar el código, siga los siguientes pasos:

1) Ir a Herramientas > tablón y elige Pensador de IA ESP32-CAM.

2) Ir a Herramientas > Puerto y seleccione el puerto COM al que está conectado el ESP32.

3) Luego haga clic en el botón «Cargar» para cargar el código.

4) Cuando vea estos puntos en la ventana de depuración como se muestra a continuación, presione el botón RST incorporado del ESP32-CAM.

Después de unos segundos, el código debería cargarse correctamente en su tablero.

demostración

Abra su navegador e ingrese la dirección IP ESP32-CAM. Luego haga clic en “TOMA UNA FOTO”para tomar una nueva foto y esperar unos segundos hasta que la foto se guarde en SPIFFS.

Si luego presiona el botón «ACTUALIZAR PÁGINAEl botón «actualizará la página con la foto guardada más recientemente. Si necesita ajustar la orientación de la imagen, siempre puede utilizar el botón «DOBLAR“Botón para hacer esto.

En la ventana de su Arduino IDE Serial Monitor debería ver mensajes similares:

Solución de problemas

Si recibe alguno de los siguientes errores, consulte nuestra Guía de solución de problemas de ESP32-CAM: solución de los problemas más comunes

• No se pudo conectar a ESP32: tiempo de espera de espera para el encabezado del paquete
• La inicialización de la cámara falló con el error 0x20001 o similar
• Detector de caída de tensión o error de meditación del gurú
• Error de boceto demasiado grande: se seleccionó un esquema de partición incorrecto
• La tarjeta en COMX no está disponible – Puerto COM no seleccionado
• Error de Psram: el servicio GPIO ISR no está instalado
• Señal WiFi débil
• No hay dirección IP en el monitor serie Arduino IDE
• No se puede abrir el servidor web
• La imagen está retrasada/muestra una latencia alta.

Envolver

Esperamos que este ejemplo le haya resultado útil. Intentamos mantenerlo lo más simple posible para que puedas modificarlo e integrarlo fácilmente en tus propios proyectos. Puede combinar este ejemplo con el detector de movimiento PIR ESP32-CAM con captura de fotos para capturar y mostrar una nueva foto cuando se detecta movimiento.

Para más proyectos ESP32 CAM puedes Suscríbete a nuestro boletínSi aún no tienes una CAM ESP32, puedes Consigue uno por alrededor de $6.

Si te gusta este proyecto, es posible que también te gusten otros proyectos que utilizan ESP32-CAM:

• Manual de configuración de pines de ESP32-CAM AI-Thinker: explicación del uso de GPIO
• Streaming de vídeo, reconocimiento facial y reconocimiento facial.
• Crear proyectos ESP32-CAM (libro electrónico)
• Lea todos nuestros proyectos, tutoriales y guías de ESP32 CAM

Gracias por leer.

ESP32-CAM: Captura y muestra fotos en un servidor web

Aprende a construir un servidor web con la placa ESP32-CAM que te permite enviar un comando para tomar una foto y visualizarla en tu navegador, guardada en SPIFFS. También hemos añadido la opción de rotar la imagen si es necesario.

Preguntas Frecuentes

1. ¿Qué se necesita para seguir este proyecto?

Para seguir este proyecto, necesitas la placa ESP32-CAM con OV2640, cables jumper hembra a hembra, un programador FTDI y una fuente de alimentación de 5V o un power bank.

2. ¿Cómo funciona el código para tomar fotos y mostrarlas en el servidor web?

El código incluye bibliotecas necesarias para trabajar con la cámara, construir el servidor web y utilizar SPIFFS. También configura el servidor web para mostrar una página web con botones para capturar y rotar fotos, así como para actualizar la página con la última foto tomada.

3. ¿Cómo se carga el código en la placa ESP32-CAM?

Para cargar el código en la placa ESP32-CAM, debes conectarla a tu computadora usando un programador FTDI, seleccionar la placa y el puerto adecuado en el Arduino IDE, y luego cargar el código haciendo clic en el botón de subida.

4. ¿Qué hacer si surgen problemas al ejecutar el proyecto?

Si encuentras errores como fallas en la conexión, problemas con la cámara o el WiFi, tamaños excesivos de código, entre otros, puedes consultar nuestra Guía de Solución de Problemas para ESP32-CAM y resolver los problemas más comunes.

Este proyecto te permite expandir tus conocimientos sobre la ESP32-CAM, como añadir un sensor PIR para capturar fotos cuando se detecta movimiento, un botón físico para tomar fotos, o incluso incluir capacidades de transmisión de video en una ruta URL diferente.

No dudes en explorar otros proyectos y tutoriales disponibles en nuestro blog relacionados con la ESP32-CAM, como detectores de movimiento, transmisión de video y reconocimiento facial, o guardar fotos en una tarjeta microSD.

¡Esperamos que disfrutes llevando este proyecto a cabo y explorando más posibilidades con la ESP32-CAM!