Table of Contents

Bild-cloud-erkennung web-beispiel

Diese analyse führt sie durch die beispielcode-analyse, um ihnen zu helfen, zu verstehen und darauf aufbauend ihre eigenen instanzen zu entwickeln.

Anweisungen zum herunterladen und konfigurieren des samples finden sie unter schnellstart.

Erkennungsziele einrichten

Laden sie in der cloud-erkennungsverwaltung ein erkennungsbild hoch.

  • Erkennungsbildname: Geben sie dem erkennungsziel einen namen, z. b. demo.
  • Erkennungsbild hochladen: Wählen sie ein bild aus und laden sie es hoch. In diesem beispiel wird das bild verwendet: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Breite: Die breite des erkennungsbildes (cm). Die höhe des erkennungsbildes wird automatisch vom system basierend auf dem hochgeladenen bild berechnet. Die größe des erkennungsbildes entspricht der größe des virtuellen inhalts, die in diesem beispiel nicht verwendet wird.
  • Meta: Zusätzliche informationen, die normalerweise zur speicherung von ar-inhalten verwendet werden. In diesem beispiel wird der inhalt verwendet: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Erkennungsziele abrufen

Beim aufruf der cloud-erkennungs-api wird nach der erkennung des ziels die zielinformation zurückgegeben. Die struktur lautet wie folgt:

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

Vollständige feldinformationen finden sie unter API-referenz

Dekodieren sie meta mit base64, um die ursprünglichen meta-informationen abzurufen.

// data sind die zurückgegebenen daten
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

Hauptcode-erklärung

  • src/webar.js

    Kapselt mehrere grundlegende operationen, wie die initialisierung der kamera, das aufnehmen von bildern und den aufruf der cloud-erkennung.

  • src/app.js

    Kapselt die grundlegenden operationen der oberfläche, wie kameraumschaltung, oberflächeninteraktion und die initialisierungsoperation von webar.

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

    Die konfiguration der cloud-erkennung und die geschäftsverarbeitung nach erfolgreicher erkennung.

Erwartete effekte

  • Oberfläche nach initialisierung der kamera

Erwarteter effekt

  • Videowiedergabe-effekt

Erwarteter effekt

  • Rendering-modell-effekt

Erwarteter effekt

Tiefgreifendes code-verständnis

Wenn sie eine tiefergehende entwicklung der cloud-erkennung anstreben, wird dringend empfohlen, den sample-quellcode zu lesen. Auf dieser basis können sie versuchen, den quellcode zu ändern und zu erweitern.

Tipp

Die folgenden erklärungen basieren auf der voraussetzung, dass sie bereits über grundkenntnisse in html- und javascript-entwicklung verfügen. Wenn sie diese grundfertigkeiten noch nicht beherrschen, wird empfohlen, sich zunächst systematisch mit den relevanten kenntnissen vertraut zu machen, um die folgenden inhalte besser zu verstehen.

Wir stellen tokenthreejsexample (rendering des 3d-modells) als beispiel vor, um die hauptquellcode-erklärung im sample zu erläutern.

Geschäftsverarbeitung

Datei TokenThreeJsExample/asset/js/app.js Hauptmethodenbeschreibung.

  • Initialisierung des App-Objekts
// Initialisiert das App-Objekt mit der Client-end URL für Cloud-Erkennung
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Festlegen von Cloud-Erkennungsinformationen
// Legt die Cloud-Erkennungsbibliothek AppId und token fest. Kann nur alternativ zu app.useEasyAr() verwendet werden.
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId der Erkennungsbibliothek
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token, generiert aus APIKey + APISecret
});

// Bei Verwendung der von EasyAR bereitgestellten integrierten Umgebung
// app.useEasyAr();
  • Verarbeitung der Geschäftslogik
app.callback = (msg) => {
    // msg enthält Informationen zum erkannten Ziel
    // Verarbeite das darin enthaltene 'meta'-Feld für die Geschäftslogik
};

UI und Initialisierung der Cloud-Erkennung

Datei html/src/app.js Hauptmethoden-Beschreibung.

  • Initialisierung der Kameraauswahl
constructor(url = '') {
}
  • Konfiguration der Cloud-Erkennung mit benutzerdefiniertem Token
setToken(token) {
}
  • Konfiguration der Cloud-Erkennung mit EasyAR-Integrationsumgebung
useEasyAr() {
}

Cloud-Erkennungsverarbeitung

Datei html/src/webar.js Hauptmethoden beschreibung.

  • Kamera-screenshot und Cloud-Erkennungskonfiguration
constructor(interval, recognizeUrl, token, container) {
}
  • Kamera öffnen, Quer-/Hochformat-Videostream-Vorschau einrichten
openCamera(constraints) {
}
  • Erkennung starten
startRecognize(callback) {
}
  • Screenshot erstellen
captureVideo() {
}
  • Screenshot zur Erkennung an Cloud-Dienst senden
httpPost(data) {
}

Verwandte themen