Table of Contents

Exemple Web de reconnaissance cloud d'image

Cet article vous guide dans une analyse approfondie du code d'exemple, afin de vous aider à le comprendre et à développer vos propres exemples à partir de celui-ci.

Pour les instructions de téléchargement et de configuration du sample, consultez Démarrage rapide.

Configuration de la cible de reconnaissance

Dans la gestion de reconnaissance cloud, téléversez une image de reconnaissance.

  • Nom de l'image de reconnaissance : donnez un nom à la cible de reconnaissance, par exemple demo.
  • Téléverser l'image de reconnaissance : sélectionnez et téléversez une image. L'image utilisée dans ce sample est : https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Largeur : largeur de l'image de reconnaissance (cm). La hauteur de l'image de reconnaissance sera calculée automatiquement par le système selon l'image téléversée. La taille de l'image de reconnaissance correspond à la taille du contenu virtuel, et n'est pas utilisée dans ce sample.
  • Meta : informations supplémentaires, généralement utilisées pour stocker des informations de contenu AR. Le contenu utilisé dans ce sample est : {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Obtenir la cible de reconnaissance

Après l'appel de l'API de reconnaissance cloud et la reconnaissance d'une cible, les informations de cible sont retournées avec la structure suivante :

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

Pour les informations complètes des champs, consultez la référence API

Décodez meta avec base64 pour obtenir les informations meta d'origine.

// data correspond aux donnees renvoyees
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

Description du code principal

  • src/webar.js

    Encapsule plusieurs opérations de base, comme l'initialisation de la caméra, la capture d'image et l'appel de la reconnaissance cloud.

  • src/app.js

    Encapsule les opérations de base de l'interface, comme le changement de caméra, l'interaction avec l'interface et l'initialisation WebAR.

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

    Configuration de la reconnaissance cloud et traitement métier après une reconnaissance réussie.

Effet attendu

  • Interface après initialisation de la caméra

Effet attendu

  • Effet de lecture vidéo

Effet attendu

  • Effet de rendu du modèle

Effet attendu

Compréhension approfondie du code

Si vous souhaitez approfondir le développement de la reconnaissance cloud, il est fortement recommandé de lire le code source du sample. Sur cette base, vous pouvez essayer de modifier et d'étendre le code source.

Astuce

L'explication suivante repose sur le prérequis que vous disposez déjà d'un certain niveau de capacité de développement HTML et JavaScript. Si vous ne maîtrisez pas encore ces compétences de base, il est recommandé d'apprendre d'abord systématiquement les connaissances associées afin de mieux comprendre la suite.

Nous utiliserons TokenThreeJsExample (rendu de modèles 3D) comme exemple pour présenter les principales descriptions du code source dans le sample.

Traitement metier

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

  • Initialiser l'objet App
// initialise l objet App avec le Client-end URL de reconnaissance cloud
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Definir les informations de cloud recognition
// configure l AppId et le token de la bibliotheque de reconnaissance cloud ; une seule option peut etre utilisee avec app.useEasyAr()
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId de la bibliotheque de reconnaissance cloud
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token genere a partir de APIKey + APISecret
});

// si l environnement integre fourni par EasyAR est utilise
// app.useEasyAr();
  • Traiter la logique metier
app.callback = (msg) => {
    // msg contient les informations du target reconnu
    // analyse le champ meta et traite la logique metier
};

UI et initialisation de Cloud Recognition

Description des principales méthodes du fichier html/src/app.js.

  • Initialiser la sélection de la caméra
constructor(url = '') {
}
  • Configurer Cloud Recognition avec un Token personnalisé
setToken(token) {
}
  • Configurer Cloud Recognition avec l'environnement intégré EasyAR
useEasyAr() {
}

Traitement Cloud Recognition

Description des principales méthodes du fichier html/src/webar.js.

  • Screenshot caméra et configuration Cloud Recognition
constructor(interval, recognizeUrl, token, container) {
}
  • Ouvrir la caméra et détecter la configuration preview du video stream paysage/portrait
openCamera(constraints) {
}
  • Démarrer recognition
startRecognize(callback) {
}
  • Screenshot
captureVideo() {
}
  • Envoyer le screenshot au service Cloud Recognition pour recognition
httpPost(data) {
}

Rubriques connexes