Table of Contents

Guía para desarrolladores web de reconocimiento de imágenes en la nube

En el lado web, el flujo clave para implementar el reconocimiento de imágenes en la nube abarca los siguientes pasos principales: primero, capturar imágenes en tiempo real mediante el acceso a la cámara del navegador; luego, cargar los datos de imagen capturados al servidor en la nube para su procesamiento de reconocimiento; finalmente, recibir y analizar los resultados devueltos por la nube, completando así el ciclo completo de reconocimiento de imágenes.

Pasos de desarrollo

Diferentes navegadores implementan el manejo de cámaras de manera distinta. Este código de ejemplo no cubre todos los problemas de compatibilidad entre navegadores; se recomienda ajustar según el entorno real.

El flujo es el siguiente:

flowchart LR

A((Inicializar cámara)) --> B[Capturar imagen de cámara] --> C{Llamar a API de reconocimiento en la nube}
C ----> |No se detectó objetivo| B
C ----> |Objetivo detectado| D((Procesar lógica de negocio))

Configuración previa

Agregue los siguientes elementos en la página html:

<video id="video"></video>
<canvas id="canvas"></canvas>

En el código js, agregue lo siguiente para obtener los objetos necesarios:

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');
  • videoEl es el elemento video, que vincula el flujo de video de la cámara para vista previa en tiempo real
  • canvasEl es el elemento canvas
  • canvasCtx es el objeto context 2d del canvas

Inicializar la cámara

const constraints = {
    audio: false,
    video: true,
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    videoEl.srcObject = stream;
    videoEl.play();
}).catch((err) => {
    console.error(err);
    alert('Error al abrir la cámara');
});
  • Configuración de parámetros de la cámara
    • constraints.video como true, selecciona automáticamente la cámara
    • constraints.video como {facingMode: {exact: 'user'}}, usa la cámara frontal
    • constraints.video como {facingMode: {exact: 'environment'}}, usa la cámara trasera
Consejo

Más parámetros de cámara, consulte Parámetros de configuración de cámara.

Capturar imagen de la cámara

canvasCtx.drawImage(videoEl, 0, 0, videoEl.offsetWidth, videoEl.offsetWidth);
const image = canvasElement.toDataURL('image/jpeg', 0.8).split('base64,').pop();

Llamar a la API de reconocimiento en la nube

// URL del cliente de la biblioteca en la nube
const clientendUrl = 'Su Client-end URL de la biblioteca en la nube';
// Token de nube de la biblioteca en la nube
const token = 'Aquí está el Cloud Token de la biblioteca en la nube';
// CRS AppId de la biblioteca en la nube
const appId = 'Aquí está el CRS AppId de la biblioteca en la nube';
// image es la imagen capturada en el paso anterior
const image = '/9j/4AAQSkZJRgABAQ......';

fetch(`${clientendUrl}/search`, {
    method: 'POST',
    body: `{ "image": "${image}", "appId": "${appId}", "notracking": true }`,
    headers: {
        'Content-Type': 'application/json;Charset=UTF-8',
        'Authorization': token
    }
}).then(res => res.json()).then(data => {
    console.info(data);
    // TODO: procesar resultados de reconocimiento
});
Consejo

Para enviar solicitudes de red, puede usar fetch, XMLHttpRequest o bibliotecas como axois.

Procesamiento de resultados de reconocimiento

Cuando la API del servicio de reconocimiento en la nube recibe una solicitud, si reconoce un objetivo correctamente, devuelve el resultado de reconocimiento; si no detecta ningún objetivo, devuelve un código de estado de no reconocido; si hay otros errores, devuelve el código de error correspondiente y mensajes de información.

No se detectó objetivo

Si no se detecta ningún objetivo, statusCode es 17, el resultado devuelto es:

{
  "statusCode" : 17,
  "result" : {
    "message" : "No result: there is no matching."
  },
  "date" : "2026-01-05T05:49:02.651Z",
  "timestamp" : 1767592142651
}

Objetivo detectado

Si se detecta un objetivo, statusCode es 0, el resultado devuelto es:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "allowSimilar" : "0",
      "detectableDistinctiveness" : 1,
      "detectableFeatureCount" : 3,
      "type" : "ImageTarget",
      "trackableDistinctiveness" : 0,
      "detectableFeatureDistribution" : 1,
      "trackableFeatureCount" : 3,
      "detectableRate" : 2,
      "trackableFeatureDistribution" : 1,
      "size" : "1",
      "trackablePatchContrast" : 0,
      "meta" : "eyJ2aWRlb1VybCI6Im********pL0Vhc3lBUi1NZWdhLm1wNCJ9",
      "grade" : "2",
      "trackablePatchAmbiguity" : 3,
      "name" : "Mega video",
      "appKey" : "f7ff497********f8068c",
      "trackableRate" : 2,
      "active" : "1",
      "date" : "1746609056804",
      "modified" : 1746609056804
    }
  },
  "date" : "2026-01-05T05:50:36.484Z",
  "timestamp" : 1767592236484
}

Explicación de los campos principales:

  • targetId: id del objetivo
  • meta: información adicional codificada en base64, como contenido 3D o URL de video agregados al cargar la imagen de reconocimiento
  • name: nombre del objetivo
  • active: "1" indica estado activado, "0" indica estado desactivado
Consejo

Para información completa de los campos, consulte Referencia de API

Procesamiento de lógica de negocio

Puede usar la información en meta para procesar la lógica de negocio posterior, como reproducir videos, renderizar modelos 3D, etc.

Temas relacionados