Table of Contents

Bild-Cloud-Erkennung Web-Entwicklerhandbuch

Die Schlüsselprozesse zur Implementierung der Bild-Cloud-Erkennung auf der Webseite umfassen die folgenden Kernschritte: Zuerst wird die Kamera über den Browser aufgerufen, um Echtzeitbilder zu erfassen, dann werden die erfassten Bilddaten zur Erkennungsverarbeitung an den Cloud-Server hochgeladen und schließlich werden die von der Cloud zurückgegebenen Ergebnisse empfangen und analysiert, um den gesamten Bilderkennungsprozess abzuschließen.

Entwicklungsschritte

Verschiedene Browser implementieren die Kamerabehandlung unterschiedlich. Der Beispielcode in diesem Artikel deckt nicht alle Browser-Kompatibilitätsprobleme ab. Es wird empfohlen, Anpassungen basierend auf der tatsächlichen Umgebung vorzunehmen.

Ablauf wie folgt:

flowchart LR

A((Kamera initialisieren)) --> B[Kamerabild aufnehmen] --> C{Cloud-Erkennungs-API aufrufen}
C ----> |Ziel nicht erkannt| B
C ----> |Ziel erkannt| D((Geschäftslogikverarbeitung))

Vorbereitende Einstellungen

Fügen Sie die folgenden Elemente in die HTML-Seite ein:

<video id="video"></video>
<canvas id="canvas"></canvas>

Fügen Sie im JS-Code Folgendes hinzu, um die erforderlichen Objekte abzurufen:

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');
  • videoEl ist das video-Element, das den Kamerastream zur Echtzeitvorschau bindet
  • canvasEl ist das canvas-Element
  • canvasCtx ist das Context 2D-Objekt des canvas

Kamera initialisieren

const constraints = {
    audio: false,
    video: true,
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    videoEl.srcObject = stream;
    videoEl.play();
}).catch((err) => {
    console.error(err);
    alert('Fehler beim Öffnen der Kamera');
});
  • Kameraparameter-Einstellungen
    • constraints.video ist true, automatische Kamerawahl
    • constraints.video ist {facingMode: {exact: 'user'}}, Frontkamera verwenden
    • constraints.video ist {facingMode: {exact: 'environment'}}, Rückkamera verwenden
Tipp

Weitere Kameraparameter finden Sie unter Kameraeinstellungsparameter.

Kamerabild aufnehmen

canvasCtx.drawImage(videoEl, 0, 0, videoEl.offsetWidth, videoEl.offsetWidth);
const image = canvasElement.toDataURL('image/jpeg', 0.8).split('base64,').pop();

Cloud-Erkennungs-API aufrufen

// Client-end URL der Cloud-Bibliothek
const clientendUrl = 'Ihre Client-end URL der Cloud-Bibliothek';
// Cloud Token der Cloud-Bibliothek
const token = 'Hier ist das Cloud Token der Cloud-Bibliothek';
// CRS AppId der Cloud-Bibliothek
const appId = 'Hier ist die CRS AppId der Cloud-Bibliothek';
// image ist das im vorherigen Schritt aufgenommene Bild
const image = '/9j/4AAQSkZJRgABAQ......';

fetch(`${clientendUrl}/search`, {
    method: 'POST',
    body: `{ "image": "${image}", "appId": "${appId}", "notracking": true }`,
    headers: {
        'Content-Type': 'application/json;Charset=UTF-8',
        'Authorization': token
    }
}).then(res => res.json()).then(data => {
    console.info(data);
    // TODO: Erkennungsergebnis verarbeiten
});
Tipp

Zum Senden von Netzwerkanfragen können fetch, XMLHttpRequest oder Bibliotheken wie axios verwendet werden.

Erkennungsergebnis verarbeiten

Wenn die Cloud-Erkennungsdienst-API eine Anfrage empfängt, gibt sie bei erfolgreicher Erkennung das Erkennungsergebnis zurück. Wenn kein Ziel erkannt wird, gibt sie den Statuscode für nicht erkannt zurück. Bei anderen Fehlern werden der entsprechende Fehlercode und Hinweise zurückgegeben.

Ziel nicht erkannt

Wenn kein Ziel erkannt wird, ist statusCode 17. Das Rückgaberesultat lautet wie folgt:

{
  "statusCode" : 17,
  "result" : {
    "message" : "No result: there is no matching."
  },
  "date" : "2026-01-05T05:49:02.651Z",
  "timestamp" : 1767592142651
}

Ziel erkannt

Wenn ein Ziel erkannt wird, ist statusCode 0. Das Rückgaberesultat lautet wie folgt:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "allowSimilar" : "0",
      "detectableDistinctiveness" : 1,
      "detectableFeatureCount" : 3,
      "type" : "ImageTarget",
      "trackableDistinctiveness" : 0,
      "detectableFeatureDistribution" : 1,
      "trackableFeatureCount" : 3,
      "detectableRate" : 2,
      "trackableFeatureDistribution" : 1,
      "size" : "1",
      "trackablePatchContrast" : 0,
      "meta" : "eyJ2aWRlb1VybCI6Im********pL0Vhc3lBUi1NZWdhLm1wNCJ9",
      "grade" : "2",
      "trackablePatchAmbiguity" : 3,
      "name" : "Mega video",
      "appKey" : "f7ff497********f8068c",
      "trackableRate" : 2,
      "active" : "1",
      "date" : "1746609056804",
      "modified" : 1746609056804
    }
  },
  "date" : "2026-01-05T05:50:36.484Z",
  "timestamp" : 1767592236484
}

Hauptfelderklärung:

  • targetId: Ziel-ID
  • meta: Base64-codierte Zusatzinformationen, wie z.B. 3D-Inhalte oder Video-URLs, die beim Hochladen des Erkennungsbildes hinzugefügt wurden
  • name: Zielname
  • active: "1" für aktivierten Zustand, "0" für deaktivierten Zustand
Tipp

Vollständige Feldinformationen finden Sie unter API-Referenz

Geschäftslogikverarbeitung

Sie können die Informationen in meta verwenden, um nachfolgende Geschäftslogiken zu verarbeiten, wie z.B. das Abspielen von Videos, das Rendern von 3D-Modellen usw.

Verwandte Themen