Table of Contents

Exemple de reconnaissance d'images dans le cloud Web

Ce guide vous aidera à analyser en profondeur l'exemple de code, afin de comprendre et de développer vos propres applications basées sur celui-ci.

Pour les instructions de téléchargement et de configuration de l'exemple, veuillez consulter Démarrage rapide.

Configuration de la cible de reconnaissance

Dans la gestion de la reconnaissance dans le cloud, chargez une image de reconnaissance.

  • Nom de l'image de reconnaissance : Donnez un nom à la cible de reconnaissance, par exemple demo.
  • Charger l'image de reconnaissance : Sélectionnez et téléversez une image. L'image utilisée dans cet exemple est : https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Largeur : La largeur de l'image de reconnaissance (cm). La hauteur sera automatiquement calculée par le système en fonction de l'image que vous avez téléversée. La taille de l'image de reconnaissance correspond à la taille du contenu virtuel, non utilisée dans cet exemple.
  • Meta : Informations supplémentaires, généralement utilisées pour stocker les informations du contenu AR. Dans cet exemple, le contenu utilisé est : {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Obtention de la cible de reconnaissance

Lors de l'appel à l'API de reconnaissance dans le cloud, après la reconnaissance d'une cible, les informations de la cible sont renvoyé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

Consultez les informations complètes des champs dans Référence API

Décodez le meta en base64 pour obtenir les informations meta originales.

// data correspond aux données renvoyées
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

Explication du code principal

  • src/webar.js

    Encapsule plusieurs opérations de base, telles que l'initialisation de la caméra, la capture d'images, l'appel à la reconnaissance dans le cloud, etc.

  • src/app.js

    Encapsule les opérations de base de l'interface, telles que la commutation de la caméra, les interactions avec l'interface et les opérations d'initialisation de WebAR.

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

    La configuration de la reconnaissance dans le cloud et le traitement métier après une reconnaissance réussie.

Effet attendu

  • Interface après l'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 vos connaissances sur le développement de la reconnaissance dans le cloud, nous vous recommandons vivement de lire le code source de l'exemple. Sur cette base, vous pouvez essayer de modifier et d'étendre le code source.

Astuce

Le contenu suivant suppose que vous possédez déjà certaines compétences en développement HTML et JavaScript. Si vous ne maîtrisez pas encore ces compétences de base, nous vous recommandons d'apprendre systématiquement les connaissances pertinentes pour mieux comprendre la suite.

Nous prendrons TokenThreeJsExample (rendu 3D) comme exemple pour présenter les principales explications du code source dans l'exemple.

Traitement des affaires

Explication des principales méthodes du fichier TokenThreeJsExample/asset/js/app.js.

  • Initialisation de l'objet App
// Initialiser l'objet App avec l'URL client-end de reconnaissance cloud
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Configuration des informations liées à la reconnaissance cloud
// Définir l'AppId et le token de la bibliothèque de reconnaissance cloud. Ne peut être utilisé qu'à la place de app.useEasyAr()
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId de la bibliothèque de reconnaissance cloud
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token généré à partir d'APIKey + APISecret
});

// Si vous utilisez l'environnement intégré fourni par EasyAR
// app.useEasyAr();
  • Traitement de la logique métier
app.callback = (msg) => {
    // msg contient les informations sur la cible reconnue
    // Analyser le champ meta pour traiter la logique métier
};

UI et initialisation de la reconnaissance cloud

Fichier html/src/app.js : principales méthodes expliquées.

  • Initialisation de la sélection de la caméra
constructor(url = '') {
}
  • Configuration de la reconnaissance cloud avec un token personnalisé
setToken(token) {
}
  • Configuration de la reconnaissance cloud avec l'environnement intégré EasyAR
useEasyAr() {
}

Traitement de reconnaissance cloud

Fichier html/src/webar.js principales méthodes expliquées.

  • Capture de la caméra et configuration de la reconnaissance cloud
constructor(interval, recognizeUrl, token, container) {
}
  • Ouvrir la caméra, détecter et configurer le flux vidéo en mode paysage/portrait
openCamera(constraints) {
}
  • Démarrer la reconnaissance
startRecognize(callback) {
}
  • Capture d'écran
captureVideo() {
}
  • Envoyer la capture au service de reconnaissance cloud
httpPost(data) {
}

Sujets associés