Table of Contents

Guía para desarrolladores Web de image cloud recognition

El proceso clave para implementar image cloud recognition en Web incluye varios pasos centrales: primero invocar la cámara mediante el navegador para capturar imágenes en tiempo real, después subir los datos de imagen recopilados al servidor cloud para el procesamiento de recognition y, por último, recibir y analizar el resultado devuelto por cloud para completar el circuito de image recognition.

Pasos de desarrollo

La implementación del procesamiento de cámara varía entre navegadores. El código de ejemplo de este artículo no cubre todos los problemas de compatibilidad de navegadores, por lo que se recomienda ajustarlo según el entorno real.

El flujo es el siguiente:

flowchart LR

A((Inicializar cámara)) --> B[Capturar imagen de cámara] --> C{Invocar cloud recognition API}
C ----> |No se reconoce target| B
C ----> |Se reconoce target| D((Procesamiento de lógica de negocio))

Configuración previa

Agregue los siguientes elementos a la página html:

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

Agregue el siguiente contenido al código js 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; vincula el stream de video de la cámara a video para preview en tiempo real
  • canvasEl es el elemento canvas
  • canvasCtx es el objeto context 2d de canvas

Inicializar 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('打开摄像头错误');
});
  • Configuración de parámetros de cámara
    • constraints.video es true, selecciona automáticamente la cámara
    • constraints.video es {facingMode: {exact: 'user'}}, usa la cámara frontal
    • constraints.video es {facingMode: {exact: 'environment'}}, usa la cámara trasera
Consejo

Para más parámetros de cámara, consulte parámetros de configuración de cámara.

Capturar imagen de cámara

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

Invocar cloud recognition API

// Client-end URL de la biblioteca de imagenes en la nube
const clientendUrl = '您云图库的 Client-end URL';
// Cloud Token de la biblioteca de imagenes en la nube
const token = '这里是云图库的 Cloud Token';
// CRS AppId de la biblioteca de imagenes en la nube
const appId = '这里是云图库的 CRS AppId';
// 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: procesamiento del resultado de reconocimiento
});
Consejo

Para enviar solicitudes de red puede usar fetch, XMLHttpRequest, la biblioteca axois, etc.

Procesamiento del resultado de recognition

Después de que el cloud recognition service API recibe la solicitud, si reconoce correctamente el target devuelve el resultado de recognition; si no reconoce el target, devuelve el status code de no reconocido; si es otro error, devuelve el error code correspondiente y el mensaje.

No se reconoce target

Si no se reconoce target, statusCode es 17, y el resultado devuelto es el siguiente:

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

Se reconoce target

Si se reconoce target, statusCode es 0, y el resultado devuelto es el siguiente:

{
  "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
}

Descripción de los fields principales:

  • targetId: id del target
  • meta: información adicional codificada en base64, como contenido 3D o URL de video agregado al subir la imagen de recognition
  • name: nombre del target
  • active: "1" indica estado habilitado, "0" indica estado deshabilitado
Consejo

Para la información completa de fields, consulte API reference

Procesamiento de lógica de negocio

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

Temas relacionados