Real-Time Video Tracking

Descripción del Proyecto: Efecto de Traqueo en Tiempo Real

Resumen: Este proyecto muestra cómo implementar un sistema de traqueo de objetos en tiempo real utilizando la cámara del dispositivo. La página web captura video en vivo y utiliza algoritmos de inteligencia artificial para detectar y seguir objetos específicos dentro del video.

Características Principales:

Captura de Video en Vivo:
- Utiliza la API getUserMedia para acceder a la cámara del dispositivo y mostrar el video en vivo en la página web.
- La visualización del video es fluida y se ajusta automáticamente al tamaño de la pantalla.
Detección de Objetos:
- Implementa el modelo preentrenado COCO-SSD utilizando TensorFlow.js para detectar una variedad de objetos en tiempo real, como personas, bicicletas, gatos, etc.
- Los objetos detectados se destacan con rectángulos dibujados sobre el video en tiempo real.
Visualización de Resultados:
- Los resultados de la detección se muestran directamente en el video mediante un canvas superpuesto.
- Cada objeto detectado se marca con un rectángulo y se etiqueta con su nombre y porcentaje de confianza.

Responsividad y Adaptabilidad:

Diseño Adaptable:
- La interfaz se ajusta automáticamente para ser usable tanto en dispositivos móviles como en computadoras de escritorio.
- La resolución del video y del canvas se adapta al tamaño de la pantalla para asegurar una experiencia de usuario óptima.

Implementación Técnica:

HTML y CSS:
- La estructura HTML es simple y eficiente, utilizando elementos <video> y <canvas> para mostrar el video y los resultados de la detección.
- El CSS asegura que el video y el canvas se superpongan correctamente y se ajusten al tamaño de la pantalla.
JavaScript:
- La API getUserMedia se utiliza para acceder a la cámara y mostrar el video en vivo.
- TensorFlow.js se carga para utilizar el modelo COCO-SSD, que detecta y clasifica objetos en el video.
- Un script se encarga de procesar el video en tiempo real, dibujar los rectángulos y actualizar las etiquetas de los objetos detectados.

Beneficios del Proyecto:

Aplicación Práctica:
- Este proyecto puede ser utilizado en diversas aplicaciones, como seguridad, reconocimiento de objetos, y experiencias interactivas.
- Demuestra habilidades avanzadas en el manejo de video en tiempo real y el uso de inteligencia artificial en la web.
Interactividad Mejorada:
- Proporciona una experiencia de usuario interactiva y educativa, mostrando cómo la inteligencia artificial puede integrarse en aplicaciones web para detectar y seguir objetos.
Atractivo Visual:
- La visualización en tiempo real de los objetos detectados es tanto atractiva como informativa, captando la atención del usuario y demostrando capacidades técnicas avanzadas.

Implementación Paso a Paso:

Captura de Video:
- Utiliza getUserMedia para capturar el video en vivo desde la cámara del dispositivo.
- Muestra el video en un elemento <video> en la página.
Configuración del Canvas:
- Superpone un elemento <canvas> sobre el video para dibujar los rectángulos de detección.
Carga del Modelo y Detección de Objetos:
- Carga el modelo COCO-SSD utilizando TensorFlow.js.
- Procesa cada frame del video para detectar objetos en tiempo real.
Visualización de Resultados:
- Dibuja rectángulos y etiquetas sobre el canvas para cada objeto detectado.
- Actualiza estos dibujos en cada frame para proporcionar una visualización en tiempo real.

¿Cómo lo construimos?

HTML

				
					<body>
    <h1>Real-Time Video Tracking</h1>
    <div class="video-container">
        <video id="video" autoplay></video>
        <canvas id="canvas"></canvas>
    </div>
    <script src="scripts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
</body>
</html>

CSS

				
					<body>
    <h1>Real-Time Video Tracking</h1>
    <div class="video-container">
        <video id="video" autoplay></video>
        <canvas id="canvas"></canvas>
    </div>
    <script src="scripts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
</body>
</html>

JavaScript

				
					navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
        const video = document.getElementById('video');
        video.srcObject = stream;
        video.onloadedmetadata = () => {
            video.play();
            adjustCanvasSize();
            loadAndPredict();
            window.addEventListener('resize', adjustCanvasSize);
        };
    })
    .catch(err => {
        console.error("Error accessing the camera: ", err);
    });

function adjustCanvasSize() {
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const container = document.querySelector('.video-container');

    const videoAspectRatio = video.videoWidth / video.videoHeight;
    const containerAspectRatio = container.clientWidth / container.clientHeight;

    if (videoAspectRatio > containerAspectRatio) {
        canvas.width = container.clientWidth;
        canvas.height = container.clientWidth / videoAspectRatio;
    } else {
        canvas.height = container.clientHeight;
        canvas.width = container.clientHeight * videoAspectRatio;
    }

    video.style.width = canvas.width + 'px';
    video.style.height = canvas.height + 'px';
}

async function loadAndPredict() {
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    const model = await cocoSsd.load();
    console.log('Model loaded.');

    async function detectFrame() {
        const predictions = await model.detect(video);

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        predictions.forEach(prediction => {
            context.beginPath();
            context.rect(...prediction.bbox);
            context.lineWidth = 2;
            context.strokeStyle = 'red';
            context.fillStyle = 'red';
            context.stroke();
            context.fillText(
                `${prediction.class} (${Math.round(prediction.score * 100)}%)`,
                prediction.bbox[0],
                prediction.bbox[1] > 10 ? prediction.bbox[1] - 5 : 10
            );
        });

        requestAnimationFrame(detectFrame);
    }

    detectFrame();
}

COMPARTIR EN:

167

Image Accordion Slider with CSS and JS

🚀 Efecto accordion slider 🖼️ que combina imágenes con animaciones suaves y diseño interactivo.💻🔥

COMPARTIR EN:

308

¿Qué es View Transitions?

View Transitions es una API moderna del navegador que permite crear transiciones fluidas entre diferentes vistas o estados de una página web.

COMPARTIR EN:

139

Creando partículas controladas por audio en Three.js

👉 Con tecnología de Three.js y Web Audio API, ahora el sonido no solo se escucha, ¡se ve en tiempo real! 💻🎶

COMPARTIR EN:

150

Looping words with GSAP

CodePen Looping words with GSAP

COMPARTIR EN:

315

WordPress con React y Gutenberg

Crear una landing page con React y Gutenberg en WordPress es una combinación poderosa para lograr una experiencia de usuario moderna y un control total sobre el desarrollo.

COMPARTIR EN:

1.267

Fundamentos avanzados de UI

Temario completo del Curso UI

COMPARTIR EN:

1.012

Customiza tus widgets de Elementor de manera fácil

📢 ¡Nuevos Recursos para Personalizar tus Widgets de Elementor! 🎉

COMPARTIR EN:

1.263

ThreeJS + Vanta.Fog: Animated Background

Three.js es una biblioteca de JavaScript que permite crear gráficos 3D en el navegador de manera eficiente, usando WebGL.

COMPARTIR EN:

1.127

Tensorflow videotracking V2

🧠TensorFlow.js, es como un cerebro de computadora que detecta objetos a tu alrededor 🕵️‍♂️.

COMPARTIR EN:

1.268

Proyecto de Conversión de Texto a Voz (TTS) – Gratuito

Este proyecto ha sido creado como una herramienta accesible para cualquier persona que desee convertir texto en voz sin necesidad de utilizar servicios de pago. Lo ofrezco de manera gratuita como una forma de contribuir al acceso de tecnologías avanzadas para todos.

COMPARTIR EN:

154

Headless CMS

¿Qué es un Headless CMS?

COMPARTIR EN:

Animación de Desplazamiento con Efecto de Pantalla Dividida para Portafolio

Encontrarás el código HTML completo para que puedas integrarlo fácilmente utilizando un widget de HTML en WordPress y Elementor.

MÁS RECURSOS

Real-Time Video Tracking

Descripción del Proyecto: Efecto de Traqueo en Tiempo Real

¿Cómo lo construimos?

HTML

CSS

JavaScript

Image Accordion Slider with CSS and JS

¿Qué es View Transitions?

Creando partículas controladas por audio en Three.js

Looping words with GSAP

WordPress con React y Gutenberg

Fundamentos avanzados de UI

Customiza tus widgets de Elementor de manera fácil

ThreeJS + Vanta.Fog: Animated Background

Tensorflow videotracking V2

Proyecto de Conversión de Texto a Voz (TTS) – Gratuito

Headless CMS

Animación de Desplazamiento con Efecto de Pantalla Dividida para Portafolio

CONTACTO

mis redes sociales

Para tu ayuda

Elsaltoweb.es