Video en Streaming con Esp32cam – Electronica IoT

¿Te imaginas poder monitorear la entrada de tu casa desde tu estudio? Hoy veremos cómo hacer video en streaming con Esp32Cam como proyecto de IoT y electrónica, veremos que necesitamos, el código de programación y cómo ver la señal en nuestra oficina o estudio.

Uno de mis pasatiempos favoritos, fuera de la programación, es la electrónica.

Desde hace tiempo tenía en mente la idea de poder visualizar la entrada de mi hogar desde mi estudio.

Mi estudio esta al fondo de donde vivo por lo que quería poder ver quien tocaba el timbre desde donde estoy la mayoría del tiempo en casa.

Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

La solución mezclaba cosas que me gustaban como son la programación, la electrónica y el IoT (Internet de las Cosas).

Por esta razón decidí realizar este pequeño proyecto de video en streaming con Esp32Cam.

Veamos algunas imágenes de lo que haremos el día de hoy así como de las conexiones que realizaremos.

La idea principal es colocar una cámara en la puerta de mi casa y transmitir vía Wifi para poder conectarme desde un pequeño proyecto web y transmitir a una pantalla con Chromecast que tengo en lo alto de mi estudio.

¿La idea suena genial  no es así?

¿Qué necesitamos?

La lista de lo que vamos a necesitar se muestra a continuación:

• Módulo Esp32Cam
• Módulo adaptador serie Usb a Serial Ftdi
• Software Arduino
• Cables
• Adaptador Usb de teléfono (salida 5v)

Opcionalmente vamos a necesitar una pantalla con Chromecast para visualizar el contenido de la cámara con ayuda de una pequeña página montada en un servidor web, como dije es opcional, podemos también visualizar a través del navegador del móvil.

Una imagen de lo que haremos sería esta:

Programando la cámara

Lo primero sería programar la cámara, lo vamos a hacer mediante el software de Arduino y el módulo adaptador de USB a serial.

Conectamos el adaptador usb a serial a el módulo Esp32Cam con ayuda de algunos cables.

Conectamos de la siguiente forma para programar la camara:

ESP32CAM          USB TO TLL

5V                          5V

GND                     GND

TX                        RX

RX                        TX

Nota: Al momento de programar tenemos que jumpear GP100 con GND de nuestro Esp32Cam.

Puedes revisar las imágenes al inicio de este post para ver de manera más gráfica como realizar estas conexiones.

Posterior a esto conectamos vía USB a nuestra computadora y abrimos el software arduino.

Instalar el soporte para Esp32Cam en arduino

Vamos a Archivo – Preferencias

En Gestor de URLs adicionales de tarjetas agregamos:

https://dl.espressif.com/dl/package_esp32_index.json

En Herramientas – Placas – Gestor de tarjetas buscamos Esp32 e instalamos.

Reiniciamos Arduino y ahora podremos elegir entre placas asociadas al módulo Esp32Cam.

En mi caso yo trabaré con la placa AI THINKER ESP32 CAM.

Código fuente de la cámara

El código fuente para montar el servidor de transmisión de la camara es el siguiente:

define CAMERA_MODEL_AI_THINKER

#include "camera_pins.h"

const char* ssid = "SSID";
const char* password = "Contraseña de tu red";

void startCameraServer();

void setup() {
  Serial.begin(115200);
  Serial.setDebugOutput(true);
  Serial.println();

  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;
  }

#if defined(CAMERA_MODEL_ESP_EYE)
  pinMode(13, INPUT_PULLUP);
  pinMode(14, INPUT_PULLUP);
#endif

  esp_err_t err = esp_camera_init(&config);
  if (err != ESP_OK) {
    Serial.printf("Error al inicializar camara 0x%x", err);
    return;
  }

  sensor_t * s = esp_camera_sensor_get();
  
  if (s->id.PID == OV3660_PID) {
    s->set_vflip(s, 1);
    s->set_brightness(s, 1);
    s->set_saturation(s, -2);
  }
  
  s->set_framesize(s, FRAMESIZE_QVGA);

  #if defined(CAMERA_MODEL_M5STACK_WIDE)
    s->set_vflip(s, 1);
    s->set_hmirror(s, 1);
  #endif

  IPAddress local_IP(192, 168, 1, 190);
  IPAddress gateway(192, 168, 0, 1);
  
  IPAddress subnet(255, 255, 255, 0);
  IPAddress primaryDNS(8, 8, 8, 8); 
  IPAddress secondaryDNS(8, 8, 4, 4);

  if (!WiFi.config(local_IP, gateway, subnet, primaryDNS, secondaryDNS)) {
    Serial.println("Error al establecer IP FIJA");
  }

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("Conectado a Internet");

  startCameraServer();

  Serial.print("Servidor listo en red "+String(ssid)+" Ingresa a 'http://");
  Serial.print(WiFi.localIP());
  Serial.println("' para visualizar");
}

void loop() {
  delay(10000);
}

Compilamos y cargamos el código a nuestra Esp32Cam.

Una vez que este subido nuestro programa desconectamos y quitamos el jumper en GP100.

Volvemos a conectar y abrimos el monitor Serie en Herramientas – Monitor Serie y reiniciamos el Esp32Cam en su boton de reinicio.

Veremos que ya está conectado a Internet y la IP en la que transmite que seguramente será la 192.168.1.190.

Ahora podremos desconectar los cables para la comunicación serial (RX – Tx) de la cámara y del adaptador Usb a Serial y solo dejar los relacionados con su alimentación.

Podemos hacerle algunas adecuaciones estéticas y ubicarla en la puerta de nuestra casa o del lugar que queramos monitorear.

La podemos conectar con un adaptador de teléfono que arroje 5v de salida y conectarlo en algún enchufe cercano con alguna extensión.

Listo, ahora nuestra cámara estará transmitiendo.

Accediendo al streaming

Ahora que nuestra cámara esta transmitiendo debemos de acceder a su señal.

Como dijimos anteriormente lo hace mediante la IP 192.168.1.190, aquí algunas direcciones importantes:

192.168.1.190 -> Accedemos a la cámara con las opciones de configuración.

Podemos acceder nuestro navegador y visualizar la imagen en esta IP 192.168.1.190 pero nos saldrán varias opciones de configuración.

En mi caso solo quería obtener la imagen de video por lo que obtuve la URL del streaming en sí, limpio: 192.168.1.190:81/stream.

Además yo quería visualizar en mi Chromecast una pantalla con varios datos no relacionados a este proyecto pero también una pequeña ventana con el streaming de mi entrada.

Yo tengo montado un servidor web XAMPP en mi PC y programe un pequeño sitio con los datos que quiero visualizar y por supuesto la vista de la camara, para quien le interese cómo incluirla en un proyecto web les dejo la parte interesante:

Código HTML

<div class="camara-tabla-vista">
     <img id="streamingCamara01" />
</div>

Código Javascript / jQuery

var urlCamara01 = "http://192.168.1.190:81/stream";

$(document).ready(function(){

      iniciaCamara01();

      ...

});

function iniciaCamara01(){

    $("#streamingCamara01").attr("src", urlCamara01);

}

Por supuesto podríamos solo establecer el atributo src con la URL pero como planeo hacer más cosas con este streaming que mejor que controlarlo de esta manera.

Ahora que abro mi proyecto en un navegador puedo enviar el contenido a mi pantalla con Chromecast ubicada en mi estudio y visualizar la puerta de mi casa.

Esta es la primera versión de este proyecto, espero poder en un futuro poder hace ciertas mejoras y correcciones, si es así las compartiré con gusto con ustedes.

Si esta información sobre video en streaming con Esp32Cam como proyecto de electrónica o IoT te fue de utilidad no olvides compartirlo en tus redes sociales y dejarnos un comentario en la sección de abajo si tienes cualquier duda relacionada con el tema de hoy, será un placer ayudarte.

¡Hasta luego!