Detección de objetos con TensorFlow.js

Tecnología que Revoluciona el Mundo Digital

Es impresionante cómo esta tecnología está revolucionando la forma en que interactuamos con el mundo digital. El uso de captura de video, junto con detección de objetos mediante modelos de inteligencia artificial como Coco SSD, tiene aplicaciones infinitas, especialmente en campos como:

  • Seguridad: Cámaras de seguridad inteligentes que pueden identificar intrusos o detectar situaciones peligrosas en tiempo real.
  • Automatización industrial: Robots que pueden reconocer objetos y manipularlos de manera eficiente en líneas de producción.
  • Realidad aumentada (AR): Mejora de la experiencia de AR con la detección de objetos del entorno para sobreponer información digital relevante.
  • Medicina: Análisis de imágenes en tiempo real para ayudar a los médicos a detectar anomalías en imágenes médicas como radiografías o ultrasonidos.
  • Vehículos autónomos: Los autos sin conductor dependen de tecnologías como esta para detectar peatones, otros vehículos y obstáculos en la carretera.
  • Marketing interactivo: Mejora en la interacción con los consumidores, ofreciendo experiencias personalizadas basadas en la detección de objetos o gestos.

Todo esto demuestra que estamos ante una tecnología clave para el futuro, que no solo facilita tareas cotidianas, sino que también abre puertas a innovaciones en prácticamente cualquier industria. La detección de objetos en tiempo real tiene el potencial de transformar cómo interactuamos con nuestro entorno y con la tecnología.

Para comenzar selecciona la cámara

🤖📷. Este sistema detecta objetos como "personas" 👨‍🦱, "perros" 🐕, "coches" 🚗, etc., en el video de tu cámara.

🔧 Cómo funciona:

  1. 🎥 Captura de video: Primero, el navegador obtiene el video de tu cámara. Usamos getUserMedia() para pedir prestada la cámara y mostrar el video en la página.
  2. 🧠 Detección de objetos: Usamos un modelo llamado Coco SSD 🧠, que es como un «cerebro de computadora» capaz de detectar objetos conocidos en el video, como personas, animales o cosas.
  3. 📏 Rectángulos mágicos: Cada vez que el modelo detecta un objeto, dibujamos un rectángulo verde 🟩 alrededor del objeto para mostrarte lo que la computadora ha visto. También mostramos el nombre del objeto justo encima del rectángulo.

HTML + JavaScript

				
					<!-- Widget HTML en Elementor -->
<video id="video" autoplay muted playsinline></video>
<canvas id="canvas"></canvas>
<select id="cameraSelect"></select>
<p id="object-name"></p>

<!-- Importar TensorFlow.js y el modelo Coco SSD -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>

<script>
  const video = document.getElementById('video');
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  const cameraSelect = document.getElementById('cameraSelect');
  const objectName = document.getElementById('object-name');

  // Ajustar el tamaño del canvas al tamaño del video
  video.onloadedmetadata = () => {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
  };

  // Listar cámaras y permitir selección
  async function getCameras() {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devices.filter(device => device.kind === 'videoinput');

    cameraSelect.innerHTML = ''; // Limpiar opciones anteriores

    videoDevices.forEach(device => {
      const option = document.createElement('option');
      option.value = device.deviceId;
      option.text = device.label || `Cámara ${cameraSelect.length + 1}`;
      cameraSelect.appendChild(option);
    });
  }

  // Iniciar la cámara seleccionada
  async function startCamera(deviceId) {
    if (window.stream) {
      window.stream.getTracks().forEach(track => track.stop());
    }
    const constraints = {
      video: {
        deviceId: deviceId ? { exact: deviceId } : undefined
      }
    };
    window.stream = await navigator.mediaDevices.getUserMedia(constraints);
    video.srcObject = window.stream;
  }

  // Cargar el modelo y detectar objetos
  async function init() {
    await getCameras();
    await startCamera();

    cameraSelect.onchange = () => {
      startCamera(cameraSelect.value);
    };

    const model = await cocoSsd.load();
    video.onloadeddata = () => {
      detectFrame(model);
    };
  }

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

    // Limpiar el canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    if (predictions.length > 0) {
      predictions.forEach(prediction => {
        const [x, y, width, height] = prediction.bbox;

        // Dibujar un rectángulo alrededor del objeto detectado
        context.strokeStyle = '#00FF00'; // Color del rectángulo (verde)
        context.lineWidth = 4;
        context.strokeRect(x, y, width, height);

        // Dibujar el texto del objeto (nombre) sobre el rectángulo
        context.font = '16px Arial';
        context.fillStyle = '#00FF00'; // Color del texto (verde)
        context.fillText(prediction.class, x, y > 10 ? y - 5 : 10); // Evitar que el texto quede fuera del canvas

        // Mostrar el nombre del primer objeto detectado debajo del video
        objectName.innerText = predictions[0].class;
      });
    } else {
      objectName.innerText = 'No se detectó ningún objeto';
    }

    // Continuar detectando en cada frame
    requestAnimationFrame(() => detectFrame(model));
  }

  init();
  
  async function startCamera(deviceId) {
  if (window.stream) {
    window.stream.getTracks().forEach(track => track.stop());
  }
  const constraints = {
    video: {
      deviceId: deviceId ? { exact: deviceId } : undefined,
      width: { ideal: 1280 },  // Cambia a una resolución ideal menor
      height: { ideal: 720 }
    }
  };
  window.stream = await navigator.mediaDevices.getUserMedia(constraints);
  video.srcObject = window.stream;
}

  
</script>