Table of Contents

Guida per sviluppatori web al riconoscimento immagini cloud

L'implementazione del riconoscimento immagini cloud sul web coinvolge questi passaggi chiave: acquisizione del flusso video tramite browser, caricamento dei dati immagine sul server cloud per l'elaborazione e infine interpretazione dei risultati restituiti dal cloud per completare il ciclo di riconoscimento.

Passaggi di sviluppo

Diverse implementazioni browser per la gestione della fotocamera presentano variazioni. Questo codice d'esempio non copre tutti i problemi di compatibilità tra browser. Si consiglia di adattarlo all'ambiente effettivo.

Flusso:

flowchart LR

A((Inizializza fotocamera)) --> B[Acquisisci immagine] --> C{Chiama API cloud}
C ----> |Nessun target rilevato| B
C ----> |Target rilevato| D((Elaborazione logica))

Configurazione preliminare

Aggiungi questi elementi nella pagina HTML:

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

Nel codice JavaScript, aggiungi:

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');
  • videoEl è l'elemento <video>, per visualizzare l'anteprima del flusso fotocamera
  • canvasEl è l'elemento <canvas>
  • canvasCtx è il contesto 2d del canvas

Inizializzazione fotocamera

const constraints = {
    audio: false,
    video: true,
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    videoEl.srcObject = stream;
    videoEl.play();
}).catch((err) => {
    console.error(err);
    alert('Errore apertura fotocamera');
});
  • Parametri fotocamera:
    • constraints.video = true: selezione automatica fotocamera
    • constraints.video = {facingMode: {exact: 'user'}}: usa fotocamera frontale
    • constraints.video = {facingMode: {exact: 'environment'}}: usa fotocamera posteriore
Consiglio

Per altri parametri, consulta Parametri configurazione fotocamera.

Acquisizione immagine dalla fotocamera

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

Chiamata all'API cloud

// Client-end URL della libreria cloud
const clientendUrl = '您云图库的 Client-end URL';
// Cloud Token della libreria cloud
const token = '这里是云图库的 Cloud Token';
// CRS AppId della libreria cloud
const appId = '这里是云图库的 CRS AppId';
// image è 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 risultati
});
Consiglio

Per le richieste di rete è possibile usare fetch, XMLHttpRequest o librerie come axios.

Elaborazione risultati

L'API restituisce:

  • Risultato se il target è riconosciuto
  • Codice di stato se nessun target è rilevato
  • Codice di errore per altri problemi

Nessun target rilevato

Se nessun target è rilevato, statusCode è 17:

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

Target rilevato

Se il target è riconosciuto, statusCode è 0:

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

Campi principali:

  • targetId: ID del target
  • meta: informazioni aggiuntive codificate in base64 (es. URL video o contenuti 3D)
  • name: nome del target
  • active: "1" per abilitato, "0" per disabilitato
Consiglio

Per tutti i campi vedi Riferimento API

Elaborazione logica

Utilizza le informazioni in meta per la logica successiva (es. riproduzione video, rendering modelli 3D).

Argomenti correlati