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:

¿Sobrevive la procedencia de la IA cuando una imagen sale al mundo?

COMPARTIR EN:

104

ChatGPT para adolescentes no es un filtro: es un rediseño del producto

COMPARTIR EN:

Mi primer plugin de WordPress no nació para venderse: ¿debería convertirlo en producto?

COMPARTIR EN:

Construir con Codex un plugin de WordPress para editar contenido sin tocar código

COMPARTIR EN:

4.208

🔍 Analiza tu web con Inteligencia Artificial – Gratis y al instante

¿Tu sitio está optimizado? Descúbrelo en segundos con nuestra herramienta de IA y recibe un informe de UX

COMPARTIR EN:

De una idea difusa a un panel compartido: cómo construir con Codex una primera app de intercambio por torrents

COMPARTIR EN:

Desarrollo de una Aplicación Web para la Compra de Viviendas Personalizada con IA

COMPARTIR EN:

239

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

COMPARTIR EN:

280

Al fin funciona: el meme que todo desarrollador ha vivido

Descubre el meme interactivo que representa el momento más esperado por cualquier desarrollador: cuando el código funciona.

COMPARTIR EN:

483

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:

462

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:

700

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.

MÁS RECURSOS