Table of Contents

Esempio web di riconoscimento cloud immagini

Questo articolo ti guiderà attraverso un'analisi approfondita del codice di esempio, aiutandoti a comprenderlo e a sviluppare i tuoi esempi basati su di esso.

Per le istruzioni di download e configurazione del sample, consulta Guida introduttiva.

Impostazione del target di riconoscimento

Nella gestione del riconoscimento cloud, carica un'immagine di riconoscimento.

  • Nome immagine di riconoscimento: assegna un nome al target di riconoscimento, ad esempio demo.
  • Carica immagine di riconoscimento: seleziona e carica un'immagine. In questo esempio viene utilizzata l'immagine: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Larghezza: larghezza dell'immagine target (cm). L'altezza verrà calcolata automaticamente dal sistema in base all'immagine caricata. La dimensione dell'immagine target corrisponde alla dimensione del contenuto virtuale, non utilizzata in questo esempio.
  • Meta: informazioni aggiuntive, generalmente utilizzate per memorizzare informazioni sul contenuto AR. In questo esempio viene utilizzato: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Recupero del target di riconoscimento

Quando si chiama l'API di riconoscimento cloud e viene rilevato un target, vengono restituite informazioni sul target con la seguente struttura:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "meta" : "eyJtb2RlbFVybCI6ICJhc3NldC9tb2RlbC90cmV4X3YzLmZieCIsICJzY2FsZSI6IDAuMDJ9",
      "name" : "demo",
      "modified" : 1746609056804
    }
  },
  "date" : "2026-01-05T05:50:36.484Z",
  "timestamp" : 1767592236484
}

[!SUGGERIMENTO] Consulta i campi completi in Riferimento API

Decodifica meta in base64 per ottenere le informazioni originali.

// data sono i dati restituiti
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

Spiegazione del codice principale

  • src/webar.js

    Incapsula diverse operazioni di base, come l'inizializzazione della fotocamera, la cattura di immagini e il riconoscimento cloud.

  • src/app.js

    Incapsula le operazioni di base dell'interfaccia, come il cambio fotocamera, l'interazione e l'inizializzazione di WebAR.

  • TokenVideoExample/asset/js/app.js e TokenThreeJsExample/asset/js/app.js

    Configurazione del riconoscimento cloud e gestione delle operazioni aziendali dopo il riconoscimento.

Effetto previsto

  • Interfaccia dopo l'inizializzazione della fotocamera

Effetto previsto

  • Effetto riproduzione video

Effetto previsto

  • Effetto rendering del modello

Effetto previsto

Comprensione approfondita del codice

Se desideri un apprendimento più approfondito dello sviluppo del riconoscimento cloud, ti consigliamo vivamente di leggere il sorgente del sample. Su questa base, puoi provare a modificare ed estendere il codice sorgente.

[!SUGGERIMENTO] Il seguente contenuto presuppone che tu abbia già una certa capacità di sviluppo HTML e JavaScript. Se non hai ancora padroneggiato queste competenze di base, ti consigliamo di studiarle sistematicamente prima per comprendere meglio i contenuti successivi.

Prenderemo come esempio TokenThreeJsExample (rendering modello 3D) per presentare le principali spiegazioni del codice sorgente nel sample.

Gestione delle attività

Descrizione dei metodi principali nel file TokenThreeJsExample/asset/js/app.js.

  • Inizializza l'oggetto App
// Inizializza l'oggetto App con l'URL client-end di riconoscimento cloud
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Imposta le informazioni correlate al riconoscimento cloud
// Imposta l'AppId e il token della libreria di riconoscimento cloud. Usare solo uno tra questo e app.useEasyAr()
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId della libreria cloud
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token generato da APIKey + APISecret
});

// Se si utilizza l'ambiente integrato fornito da EasyAR
// app.useEasyAr();
  • Elaborazione della logica di business
app.callback = (msg) => {
    // msg contiene le informazioni sull'obiettivo riconosciuto
    // Analizza il campo meta per gestire la logica di business
};

Ui e inizializzazione del riconoscimento cloud

File html/src/app.js　principali metodi descritti.

  • Inizializzazione selezione fotocamera
constructor(url = '') {
}
  • Configurazione riconoscimento cloud con token personalizzato
setToken(token) {
}
  • Configurazione riconoscimento cloud con ambiente integrato EasyAR
useEasyAr() {
}

Elaborazione riconoscimento cloud

Descrizione dei metodi principali nel file html/src/webar.js.

  • Acquisizione immagine dalla fotocamera e configurazione riconoscimento cloud
constructor(interval, recognizeUrl, token, container) {
}
  • Apertura fotocamera, rilevamento orientamento orizzontale/verticale del flusso video
openCamera(constraints) {
}
  • Avvio riconoscimento
startRecognize(callback) {
}
  • Acquisizione schermata
captureVideo() {
}
  • Invio schermata al servizio di riconoscimento cloud
httpPost(data) {
}

Argomenti correlati