Bienvenido de nuevo a mi proyecto. Soy Eric Aquí. Voy a continuar desde el final del
video anterior. Este video cubre cómo codificar la imagen jpeg
de ESP32CAM en base64 y decodificarla en la aplicación para mostrar la
imagen en tiempo real en la pantalla del teléfono inteligente. Quería hacerlo posible en iPhone, pero
esta aplicación para iOS no es posible debido a la política de Apple. Si planea un servicio que conecte dispositivos iOS
y su hardware, le recomiendo que primero se informe sobre el
programa MFI.
No hay forma de desarrollar este tipo de servicio
sin él. El código fuente de la aplicación ESP32CAM y Flutter
se puede descargar a través del siguiente enlace. Debe compilarlo si desea instalar
esta aplicación en su teléfono Android. No comparto ningún archivo APK. Hay ventajas y desventajas en el uso de la codificación BASE64. Veamos cómo podemos usarlo para este proyecto. Veamos brevemente la codificación base64. Porque es codificación, hay decodificación que
hace lo contrario. En resumen, convierte los datos de bytes en una cadena
con ciertas reglas. Base64 es una representación de datos de 64 dígitos,
representada por 64 códigos ASCII. Dado que solo usa mayúsculas de la A a la Z, minúsculas de la
a a la z, números del 0 al 9,/+ , se puede transmitir de manera confiable entre sistemas
con diferentes formatos de caracteres que pueden dañar los datos. Expresa 256 bytes utilizando 64
imprimibles. Significa que está expresando 8 bits como 6 bits. Por ejemplo, Tres 8 bits se puede expresar
como cuatro 6 bits. Este proceso de codificación aumenta el tamaño de
los datos.
Además, dado que los datos se codifican antes de enviarlos,
el proceso de decodificación en el lado receptor es absolutamente necesario. Hay todas las cosas malas aquí, ¿verdad? Sin embargo, el motivo de la codificación base64
se utiliza para evitar la pérdida de datos binarios durante la comunicación. Es una buena forma de garantizar la fiabilidad
de los datos transmitidos. Si hay un problema con los datos codificados en base64
, el receptor puede verificar fácilmente la integridad. Veamos la canalización general aquí. Después de adquirir la imagen Jpeg de ESP32CAM,
codifíquela como base64. Y luego, escriba en serie los datos codificados e
imprima una nueva línea para notificar el final de los datos. Si hay un modelo de pantalla como el que usé,
dibuje una pantalla con la imagen jpeg adquirida también. Eso es todo lo que hace ESP32. ¿Qué pasa con el lado de la aplicación? Creando la aplicación Flutter, no la aplicación nativa de Android.
La razón por la que creo una aplicación con Flutter
es que puedo crear aplicaciones para iOS y Android con un solo código. Pero, lamentablemente,
no podemos hacerlo para iOS en este proyecto porque Apple impide estrictamente las conexiones de hardware
sin autenticación MFI. Por lo tanto, solo está disponible para Android en este
proyecto. Lo que debemos hacer en la aplicación es decodificar
los datos codificados en base64 que entraron en la serie, convertirlos a la imagen jpeg original
y mostrarlos en la pantalla. Eso es todo. Veamos primero la ESP32CAM. Todo el código fuente será simple y muy intuitivo. Si observa el código fuente general
, no es muy diferente del código fuente ESP32CAM que utilicé. La codificación Base64 es fácil de usar. El núcleo de Arduino contiene base64.
Una vez que agregue el encabezado base64, puede usar
la codificación y decodificación base64 inmediatamente. No necesita agregar ninguna otra biblioteca
aparte de esa. El modelo de pantalla TTGO T se agrega al archivo de encabezado del pin
para que pueda seleccionar el modelo que uso. Por supuesto, también puede usar el
modelo ESP32CAM AI Thinker normal. Los siguientes son los ajustes de visualización. En mi caso, tengo una pantalla incorporada de 1,3 pulgadas,
por lo que refleja la imagen en tiempo real aquí. Si no se requiere la visualización,
configúrela en 0. La velocidad de transmisión en serie se establece en 2 Mbps. Ajústelo a resolución QVGA para una velocidad rápida. La pantalla integrada tiene una resolución de 240 px
por 240 px, por lo que esta resolución es la mejor. Codifica la imagen en base64. Una función estática llamada "codificar" se define
en base64. Entonces, pasar el búfer y la longitud del búfer devuelve
el valor de la cadena.
Muy fácil de usar. Como es una cadena, la escribo en el serial
de la misma manera que les mostré en el video anterior. Después de agregar una nueva línea, se completará una transmisión de datos
. Para transferir datos correctamente
, el receptor necesita tiempo para vaciar todos los datos en el búfer entre las transmisiones de datos. Al enviar a la pantalla, se
produce un retraso natural porque requiere tiempo para escribir en la pantalla. De lo contrario, debe agregar los retrasos adecuados
según su sistema. Luego, le mostraré cómo entran los datos de la imagen real
.
En el lado derecho de la pantalla
, puede ver el modelo TTGO T Camera Plus conectado. Muestra la imagen actual en una pantalla integrada
en tiempo real. Además, la cadena base64 sigue entrando
porque está conectada por USB a Serial. Están entrando unos 72 kilobytes por segundo. Dado que los valores ficticios aparecen primero cuando se
inicia la comunicación en serie, sería mejor ignorar los primeros datos. En la parte inferior de la pantalla, la cadena base64
recibida por ESP32CAM se está imprimiendo en la consola.
Además, puede ver que los datos se transmiten de
manera confiable. El tamaño del archivo rara vez cambia
porque sigue enviando casi la misma imagen. Entonces, déjame intentar hacer algo. Muevo mis dedos frente a la cámara
para obtener una imagen diferente a la anterior en ESP32CAM. El tamaño de la imagen jpeg creada por esto
también está cambiando y el tamaño de los datos entrantes también está
cambiando.
Puede verificar la
longitud de la cadena entrante modificada. Actualmente, una imagen se convierte en un fragmento. Como mencioné en el video anterior, si
necesita enviar datos grandes, puede establecer el tamaño de fragmento que puede enviar y recibir al
máximo y cortarlo en la unidad de fragmento. Comprobaré si la imagen se envía con normalidad. Copiaré una cadena base64 impresa en la
consola y la pegaré en un sitio web que muestre base64 como una imagen.
Puede verificar que los datos transferidos se
restauran a la imagen correctamente. Veamos cómo funciona la aplicación Flutter. En este proyecto, hice esta aplicación con dos
bibliotecas, USB Serial y GetX. Es lo mismo que la mayoría de los proyectos anteriores
llamados "Mi llave de hardware para operar mi aplicación". Si necesita crear una aplicación desde cero,
consulte este video. La lógica básica es la misma, así que solo
miraré la parte donde recibo los datos y los dibujaré en la pantalla después de decodificar base64. Aquí está el código fuente de la aplicación Flutter.
Solo hay dos archivos para este proyecto. Uno de ellos es para el diseño
y el otro es para el controlador. Lo hice lo más simple posible. Primero, veamos el controlador serial
a la derecha. Como nos comunicamos con ESP32 a 2 Mbps
, configuramos la velocidad de transmisión a esta. También utiliza la configuración serial básica de 8N1. Para saber el final de los datos, estamos usando un carácter de nueva
línea, por lo que se usan Retorno de carro y Avance de línea. Aquí, actualizando el valor del
objeto de datos base64 cuando se reciben datos del dispositivo conectado. A continuación se muestra la parte donde puede encontrar los
dispositivos USB conectados en Android. Conectar solo dispositivos con una identificación específica
entre los USB conectados. Esto es para CP2104 de TTGO T camera plus y
debajo es para la conexión del programador FTDI de ESP32CAM. Ahora sigamos la aplicación en orden. Cuando se ejecuta la aplicación, se crea un widget sin estado llamado
Primero. Aquí se dibuja la primera pantalla de la aplicación.
Dado que el controlador serie se crea como
un controlador para GETX, se puede inicializar de esta manera. Después de eso, cuando el valor se actualiza a través
del controlador serie, esta pantalla también cambia automáticamente a un
nuevo valor. Una vez que el hardware está conectado, aparece un botón llamado
Confirmar en la pantalla. Toque este botón para ir a la página siguiente. En la segunda página,
los datos de la cadena base64 deben decodificarse a los datos originales, que es la imagen jpeg. Está comprobando si los datos que recibí aquí
son realmente base64. Si hubo algún problema al enviarlo y
recibirlo, no podrá pasar esta parte. Después de eso, decodifica los datos recibidos. Finalmente, puede dibujar la imagen jpeg en la
pantalla con widgets de imagen a través de una biblioteca con zoom de pellizco.
El zoom de pellizco no es un gran problema. Así que puedes ignorarlo si no lo necesitas. Una cosa aquí es que si no configura la
opción verdadera en GaplessPlayback , obtendrá parpadeos entre las imágenes. Entonces, esta opción es necesaria. Tenga en cuenta. Por último, se agregó el botón de acción flotante
para que la imagen que se muestra en la pantalla se pueda guardar como un archivo. Esto es todo para la aplicación flutter para obtener
imágenes de ESP32CAM a través de una serie USB. Este proyecto es conectar entre ESP32 y la
aplicación de Android para transmitir datos. Puede utilizar módulos de comunicación
inalámbrica como WIFI o Bluetooth para enviar y recibir datos.
Pero el objetivo de este proyecto es utilizar la
comunicación en serie para transmitir la mayor cantidad de datos posible a la máxima velocidad. También fue una oportunidad para usar la codificación
y decodificación Base64, que se usan comúnmente en el desarrollo web o de aplicaciones, en entornos ESP32. Eso es todo por el video de hoy. Gracias chicos, nos
vemos en el próximo proyecto..