Reto: iteremos a video

Laboratorio de JavaScript: Crea tu App de Filtros y Detección de Rostros

Contenido del curso

Prueba

Soluciones

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:56

Reto: iteremos a video

Laboratorio de JavaScript: Crea tu App de Filtros y Detección de Rostros

Clase 4 de 5

Clase 4 / 5

Recursos

¿Cómo enfrentar el reto de hacer detección de rostros en video?

La detección de rostros en un video presenta desafíos únicos que no encontramos en una imagen estática: movimiento de rostros y variaciones de luz son solo algunos de los elementos que complican el proceso. Sin embargo, con un enfoque bien estructurado, es posible abordar este reto de manera eficiente y precisa utilizando las herramientas adecuadas.

¿Qué herramientas y métodos utilizamos?

API Navigator MediaDevices.GetUserMedia: Esta API es fundamental para capturar el video desde la cámara del dispositivo. Nos permite solicitar acceso a la cámara y obtener un stream de video según las especificaciones que queramos definir.
Dimensiones del video: Elegimos un tamaño convencional para el video, 640x480 píxeles, que proporciona una buena relación entre calidad visual y rendimiento del procesamiento.
Canvas para Renderizado: Al igualar las dimensiones del canvas con las del video, garantizamos que los filtros se rendericen correctamente y que la detección de rostros sea precisa.

¿Cómo implementamos la solución?

Para cambiar de imagen estática a video, se realizaron los siguientes pasos en el código:

// Obtener acceso al video mediante la API del navegador
navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } })
    .then(stream => {
        const videoElement = document.querySelector('video');
        videoElement.srcObject = stream;
        videoElement.play();
    })
    .catch(error => {
        console.error("Error al acceder a la cámara: ", error);
    });

Inicialización del video: Cambiamos la fuente de la imagen estática a un stream de video en vivo desde el dispositivo del usuario.
Stream y renderizado: Usamos el método play() para iniciar el video y posteriormente pasamos este stream al detector de rostros para aplicar los filtros pertinentes, asegurando que el proceso sea continuo y eficiente.
Sincronización del video y el canvas: Ajustamos las dimensiones del canvas al mismo tamaño del video para que los efectos aplicados sean precisos y estéticamente coherentes.

¿Qué dificultades encontraste?

Al intentar implementar esta solución, podrías haber enfrentado desafíos como:

Problemas de compatibilidad del navegador: No todos los navegadores pueden soportar la captura de video de la misma manera.
Retos con la sincronización de video y canvas: Al no coincidir las dimensiones, los filtros podrían visualizarse incorrectamente.
Obstáculos al solicitar permisos de cámara: Es necesario manejar adecuadamente los errores cuando el usuario no concede acceso a su cámara.

Este enfoque ofrece una oportunidad invaluable para explorar cómo pequeños cambios en el código pueden tener un impacto significativo en el rendimiento y funcionalidad de una aplicación. Invito a los estudiantes a seguir explorando y experimentando con esta tecnología, ya que esto no solo afianza conocimientos técnicos, sino que también amplía las posibilidades creativas en el desarrollo de software interactivo. ¡Sigue adelante!

Resumen

¿Cómo enfrentar el reto de hacer detección de rostros en video?

¿Qué herramientas y métodos utilizamos?

API Navigator MediaDevices.GetUserMedia: Esta API es fundamental para capturar el video desde la cámara del dispositivo. Nos permite solicitar acceso a la cámara y obtener un stream de video según las especificaciones que queramos definir.
Dimensiones del video: Elegimos un tamaño convencional para el video, 640x480 píxeles, que proporciona una buena relación entre calidad visual y rendimiento del procesamiento.
Canvas para Renderizado: Al igualar las dimensiones del canvas con las del video, garantizamos que los filtros se rendericen correctamente y que la detección de rostros sea precisa.

¿Cómo implementamos la solución?

Para cambiar de imagen estática a video, se realizaron los siguientes pasos en el código:

// Obtener acceso al video mediante la API del navegador
navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } })
    .then(stream => {
        const videoElement = document.querySelector('video');
        videoElement.srcObject = stream;
        videoElement.play();
    })
    .catch(error => {
        console.error("Error al acceder a la cámara: ", error);
    });

Inicialización del video: Cambiamos la fuente de la imagen estática a un stream de video en vivo desde el dispositivo del usuario.
Stream y renderizado: Usamos el método play() para iniciar el video y posteriormente pasamos este stream al detector de rostros para aplicar los filtros pertinentes, asegurando que el proceso sea continuo y eficiente.
Sincronización del video y el canvas: Ajustamos las dimensiones del canvas al mismo tamaño del video para que los efectos aplicados sean precisos y estéticamente coherentes.

¿Qué dificultades encontraste?

Al intentar implementar esta solución, podrías haber enfrentado desafíos como:

Problemas de compatibilidad del navegador: No todos los navegadores pueden soportar la captura de video de la misma manera.
Retos con la sincronización de video y canvas: Al no coincidir las dimensiones, los filtros podrían visualizarse incorrectamente.
Obstáculos al solicitar permisos de cámara: Es necesario manejar adecuadamente los errores cuando el usuario no concede acceso a su cámara.

Prueba

Qué es el laboratorio Face Detection de Platzi

Explora el código del laboratorio Face Detection

Soluciones

Filtro de Pokémon con Canvas y face detection

Reto: iteremos a video

Secretos ocultos del Laboratorio

Reto: iteremos a video

Progreso del curso

Prueba

Soluciones

Recursos

Recursos