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:

Transformación Educativa: La IA y Su Efecto en la Educación Superior en Latinoamérica

COMPARTIR EN:

160

Al fin funciona

COMPARTIR EN:

367

Agentes de IA para tu e-commerce

Esta app te permite diseñar y probar agentes de IA que atienden a tus clientes

COMPARTIR EN:

325

ElSaltoWeb News

Un experimento visual con HTML y CSS inspirado en televisores CRT, señales analógicas, glitch y estética retro para presentar recursos, artículos o proyectos dentro de una interfaz diferente.

COMPARTIR EN:

492

MCP Builder IA: APK Android para generar conectores MCP con inteligencia artificial

MCP Builder IA es una APK Android para generar conectores MCP orientados a negocio. Permite crear proyectos Node.js, definir tools, revisar código, probar conexiones y exportar un ZIP listo para prototipar integraciones con WooCommerce, WordPress, WhatsApp Business, Supabase, Notion y más.

COMPARTIR EN:

290

El Futuro de la IA y las Páginas Web: Innovación y Transformación

COMPARTIR EN:

236

Descubre el BMW M135i: Potencia y Estilo en un Solo Paquete

COMPARTIR EN:

255

La Evolución de los Coches de F1: Innovación y Tecnología en la Velocidad

COMPARTIR EN:

325

Resultados Completos de los Nadadores de GEBA en el 41 Aniversario de ETANDIL

COMPARTIR EN:

244

El Futuro de la Electrónica de Consumo en Uruguay: Referentes y Perspectivas

COMPARTIR EN:

495

Email Designer: la herramienta gratuita y open source para crear emails que sí funcionan

COMPARTIR EN:

375

Explora las Razas en el Juego Lineage 2: Un Análisis Detallado

MÁS RECURSOS