Table of Contents

Web-Beispiel für Bild-Cloud-Erkennung

Dieser Artikel führt Sie durch eine detaillierte Analyse des Beispielcodes und hilft Ihnen, ihn zu verstehen und darauf basierend eigene Beispiele zu entwickeln.

Informationen zum Download und zur Konfiguration des sample finden Sie unter Schnellstart.

Erkennungsziel einrichten

Laden Sie in der Cloud-Erkennungsverwaltung ein Erkennungsbild hoch.

  • Name des Erkennungsbilds: Geben Sie dem Erkennungsziel einen Namen, z. B. demo.
  • Erkennungsbild hochladen: Wählen Sie ein Bild aus und laden Sie es hoch. Das in diesem sample verwendete Bild ist: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Breite: Breite des Erkennungsbilds (cm). Die Höhe des Erkennungsbilds wird vom System automatisch anhand des hochgeladenen Bildes berechnet. Die Größe des Erkennungsbilds entspricht der Größe des virtuellen Inhalts und wird in diesem sample nicht verwendet.
  • Meta: Zusatzinformationen, die allgemein zum Speichern von AR-Inhaltsinformationen verwendet werden. Der in diesem sample verwendete Inhalt ist: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Erkennungsziel abrufen

Nach dem Aufruf der Cloud-Erkennungs-API und der Erkennung eines Ziels werden Zielinformationen mit der folgenden Struktur zurückgegeben:

{
  "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 in der API-Referenz

Dekodieren Sie meta mit base64, um die ursprünglichen meta-Informationen zu erhalten.

// data 为返回的数据
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

Beschreibung des Hauptcodes

  • src/webar.js

    Kapselt mehrere grundlegende Operationen, z. B. Kamerainitialisierung, Bilderfassung und Aufruf der Cloud-Erkennung.

  • src/app.js

    Kapselt grundlegende Oberflächenoperationen, z. B. Kamerawechsel, Oberflächeninteraktion und WebAR-Initialisierung.

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

    Konfiguration der Cloud-Erkennung und Geschäftsverarbeitung nach erfolgreicher Erkennung.

Erwarteter Effekt

  • Oberfläche nach Kamerainitialisierung

Erwarteter Effekt

  • Effekt der Videowiedergabe

Erwarteter Effekt

  • Effekt des Modellrenderings

Erwarteter Effekt

Vertieftes Codeverständnis

Wenn Sie die Entwicklung der Cloud-Erkennung vertiefen möchten, wird dringend empfohlen, den sample-Quellcode zu lesen. Darauf aufbauend können Sie versuchen, den Quellcode zu ändern und zu erweitern.

Tipp

Die folgende Erklärung setzt voraus, dass Sie bereits über gewisse HTML- und JavaScript-Entwicklungsfähigkeiten verfügen. Wenn Sie diese Grundlagen noch nicht beherrschen, wird empfohlen, zunächst die entsprechenden Kenntnisse systematisch zu lernen, um die folgenden Inhalte besser zu verstehen.

Wir verwenden TokenThreeJsExample (Rendering von 3D-Modellen) als Beispiel, um den Hauptquellcode im sample vorzustellen.

Geschäftslogik

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

  • App-Objekt initialisieren
// 使用云识别的 Client-end URL 初始化 App 对象
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Informationen zu cloud recognition festlegen
// 设置云识别库 AppId 与 token，与 app.useEasyAr() 只能选一个使用
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // 云别库的 CRS AppId
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // APIKey + APISecret 生成的 Token
});

// 如果使用 EasyAR 提供的集成环境
// app.useEasyAr();
  • Geschäftslogik verarbeiten
app.callback = (msg) => {
    // msg 为识别到目标的信息
    // 解析其中的 meta 字段，处理业务逻辑
};

UI und Initialisierung der Cloud-Erkennung

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

  • Kameraauswahl initialisieren
constructor(url = '') {
}
  • Cloud-Erkennung mit einem benutzerdefinierten Token konfigurieren
setToken(token) {
}
  • Cloud-Erkennung mit der integrierten EasyAR-Umgebung konfigurieren
useEasyAr() {
}

Cloud Recognition-Verarbeitung

Beschreibung der Hauptmethoden der Datei html/src/webar.js.

  • Kamera-Screenshot und Cloud Recognition-Konfiguration
constructor(interval, recognizeUrl, token, container) {
}
  • Kamera öffnen und Einstellungen für landscape/portrait-video stream preview erkennen
openCamera(constraints) {
}
  • recognition starten
startRecognize(callback) {
}
  • Screenshot
captureVideo() {
}
  • Screenshot zur recognition an den Cloud Recognition-Dienst senden
httpPost(data) {
}

Verwandte Themen