Table of Contents

Esempio Web di riconoscimento cloud di immagini

Questo articolo guida in un'analisi approfondita del codice di esempio, aiutando a comprenderlo e a sviluppare i propri esempi sulla sua base.

Per le istruzioni di download e configurazione del sample, consultare Guida rapida.

Impostazione del target di riconoscimento

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

  • Nome immagine di riconoscimento: assegnare un nome al target di riconoscimento, ad esempio demo.
  • Caricare immagine di riconoscimento: selezionare e caricare un'immagine. L'immagine usata in questo sample è: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Larghezza: larghezza dell'immagine di riconoscimento (cm). L'altezza dell'immagine di riconoscimento viene calcolata automaticamente dal sistema in base all'immagine caricata. La dimensione dell'immagine di riconoscimento corrisponde alla dimensione del contenuto virtuale e non viene usata in questo sample.
  • Meta: informazioni aggiuntive, generalmente usate per memorizzare informazioni sul contenuto AR. Il contenuto usato in questo sample è: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Ottenere il target di riconoscimento

Dopo aver chiamato l'API di riconoscimento cloud e riconosciuto un target, vengono restituite le informazioni del 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
}
Consiglio

Per informazioni complete sui campi, consultare Riferimento API

Decodificare meta con base64 per ottenere le informazioni meta originali.

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

Descrizione del codice principale

  • src/webar.js

    Incapsula diverse operazioni di base, come inizializzazione della camera, acquisizione immagine e chiamate al riconoscimento cloud.

  • src/app.js

    Incapsula operazioni di base dell'interfaccia, come cambio camera, interazione dell'interfaccia e inizializzazione WebAR.

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

    Configurazione del riconoscimento cloud e gestione business dopo il riconoscimento riuscito.

Effetto previsto

  • Interfaccia dopo l'inizializzazione della camera

Effetto previsto

  • Effetto di riproduzione video

Effetto previsto

  • Effetto di rendering modello

Effetto previsto

Comprensione approfondita del codice

Se si desidera approfondire lo sviluppo del riconoscimento cloud, si consiglia vivamente di leggere il codice sorgente del sample. Su questa base, è possibile provare a modificare ed estendere il codice sorgente.

Consiglio

La seguente spiegazione si basa sul presupposto che si disponga già di una certa capacità di sviluppo HTML e JavaScript. Se non si padroneggiano ancora queste competenze di base, si consiglia di studiare prima in modo sistematico le conoscenze correlate, per comprendere meglio i contenuti successivi.

Useremo TokenThreeJsExample (rendering di modelli 3D) come esempio per introdurre la descrizione del codice sorgente principale nel sample.

Elaborazione business

The main methods in TokenThreeJsExample/asset/js/app.js are described below.

  • Inizializzare l'oggetto App
// inizializza l oggetto App con il Client-end URL del riconoscimento cloud
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Impostare le informazioni di cloud recognition
// imposta AppId e token della libreria di riconoscimento cloud; si puo usare solo questa opzione o app.useEasyAr()
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId della libreria di riconoscimento cloud
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token generato da APIKey + APISecret
});

// se si usa l ambiente integrato fornito da EasyAR
// app.useEasyAr();
  • Elaborare la logica business
app.callback = (msg) => {
    // msg contiene le informazioni del target riconosciuto
    // analizza il campo meta e gestisce la logica di business
};

UI e inizializzazione del riconoscimento cloud

Descrizione dei metodi principali del file html/src/app.js.

  • Inizializzare la selezione della fotocamera
constructor(url = '') {
}
  • Configurare il riconoscimento cloud con un Token personalizzato
setToken(token) {
}
  • Configurare il riconoscimento cloud con l'ambiente integrato EasyAR
useEasyAr() {
}

Elaborazione Cloud Recognition

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

  • Screenshot camera e configurazione Cloud Recognition
constructor(interval, recognizeUrl, token, container) {
}
  • Aprire la camera e rilevare l'impostazione preview del video stream orizzontale/verticale
openCamera(constraints) {
}
  • Avviare recognition
startRecognize(callback) {
}
  • Screenshot
captureVideo() {
}
  • Inviare lo screenshot al servizio Cloud Recognition per recognition
httpPost(data) {
}

Argomenti correlati