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:

ChatKit de OpenAI: Revolucionando la Comunicación Digital

COMPARTIR EN:

Agentes de IA con LangChain

Agentes de IA con LangChain: arquitectura, seguridad y resultados

COMPARTIR EN:

211

Efecto de estrellas detrás de tu ratón

¿Te fascina el cielo estrellado? 🌌🌠 Explora este proyecto «Star Trails with Options» y personaliza la magia del firmamento. 💫🔧

COMPARTIR EN:

225

Slider responsivo solo HTML y CSS

Slider totalmente personalizado que hemos creado utilizando solo HTML y CSS.

COMPARTIR EN:

129

NBA LEGENDS

Leyendas de la NBA: Quiénes son los GOATs de la Historia

COMPARTIR EN:

1.921

Cómo mejorar la experiencia de usuario (UX) con un diseño web profesional

UI/UX en acción: claves para optimizar tu web y aumentar conversiones

COMPARTIR EN:

447

🔍 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:

454

Creando un Efecto de Rastro de Imágenes en tu Sitio Web

En este tutorial, te guiaré a través del código HTML y JavaScript para implementar este efecto sorprendente en tu propio sitio web.

COMPARTIR EN:

818

Desafío Neon Runner

Juega a Neon Runner, un videojuego desarrollado con HTML, CSS y JavaScript gracias a la inteligencia artificial generativa.

COMPARTIR EN:

356

CSS 3D wave animation

Aprende a crear un carrusel 3D con efecto de profundidad usando solo HTML y CSS. Incluye guía paso a paso, código de ejemplo y versión responsive sin JavaScript.

COMPARTIR EN:

1.215

Sobre Migraciones Web, Redireccionamiento y Visualización de la Propagación de DNS

🌐 Las migraciones web son un paso crucial en la evolución de un sitio web.

COMPARTIR EN:

1.428

Proyecto GitHub

GitHub es mi espacio creativo y colaborativo. Me encanta aprender, compartir y crecer junto a otros desarrolladores.

MÁS RECURSOS