Table of Contents

Guida per sviluppatori Web di image cloud recognition

Il processo principale per implementare image cloud recognition sul Web comprende alcuni passaggi fondamentali: prima richiamare la fotocamera tramite il browser per catturare immagini in tempo reale, poi caricare i dati immagine raccolti sul server cloud per l'elaborazione recognition e infine ricevere e analizzare il risultato restituito dal cloud per completare l'intero ciclo di image recognition.

Passaggi di sviluppo

L'implementazione della gestione della fotocamera varia tra browser diversi. Il codice di esempio in questo articolo non copre tutti i problemi di compatibilità dei browser; si consiglia quindi di adattarlo all'ambiente effettivo.

Il flusso è il seguente:

flowchart LR

A((Inizializza fotocamera)) --> B[Cattura immagine fotocamera] --> C{Chiama cloud recognition API}
C ----> |Target non riconosciuto| B
C ----> |Target riconosciuto| D((Elaborazione logica business))

Configurazione preliminare

Aggiungere i seguenti elementi alla pagina html:

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

Aggiungere il contenuto seguente al codice js per ottenere gli oggetti necessari:

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');
  • videoEl è l'elemento video; associa lo stream video della fotocamera a video per la preview in tempo reale
  • canvasEl è l'elemento canvas
  • canvasCtx è l'oggetto context 2d del canvas

Inizializzare la fotocamera

const constraints = {
    audio: false,
    video: true,
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    videoEl.srcObject = stream;
    videoEl.play();
}).catch((err) => {
    console.error(err);
    alert('打开摄像头错误');
});
  • Impostazione dei parametri della fotocamera
    • constraints.video è true, seleziona automaticamente la fotocamera
    • constraints.video è {facingMode: {exact: 'user'}}, usa la fotocamera frontale
    • constraints.video è {facingMode: {exact: 'environment'}}, usa la fotocamera posteriore
Consiglio

Per altri parametri della fotocamera, vedere parametri di configurazione della fotocamera.

Catturare immagine dalla fotocamera

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

Chiamare cloud recognition API

// Client-end URL della libreria di immagini cloud
const clientendUrl = '您云图库的 Client-end URL';
// Cloud Token della libreria di immagini cloud
const token = '这里是云图库的 Cloud Token';
// CRS AppId della libreria di immagini cloud
const appId = '这里是云图库的 CRS AppId';
// image e l immagine acquisita nel passaggio precedente
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: elaborazione del risultato del riconoscimento
});
Consiglio

Per inviare richieste di rete è possibile usare fetch, XMLHttpRequest, la libreria axois, ecc.

Elaborazione del risultato recognition

Dopo che la cloud recognition service API riceve la richiesta, se il target viene riconosciuto correttamente restituisce il risultato recognition; se il target non viene riconosciuto, restituisce lo status code di mancato riconoscimento; per altri errori restituisce il codice errore corrispondente e il messaggio.

Target non riconosciuto

Se il target non viene riconosciuto, statusCode è 17 e il risultato restituito è il seguente:

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

Target riconosciuto

Se il target viene riconosciuto, statusCode è 0 e il risultato restituito è il seguente:

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

Descrizione dei fields principali:

  • targetId: id del target
  • meta: informazioni aggiuntive codificate in base64, come contenuto 3D o URL video aggiunti durante il caricamento dell'immagine di recognition
  • name: nome del target
  • active: "1" indica stato abilitato, "0" indica stato disabilitato
Consiglio

Per le informazioni complete sui fields, vedere API reference

Elaborazione della logica business

È possibile usare le informazioni in meta per elaborare la logica business successiva, ad esempio riprodurre video, renderizzare modelli 3D, ecc.

Argomenti correlati