Table of Contents

Web-Entwicklerhandbuch für image cloud recognition

Der zentrale Ablauf zur Implementierung von image cloud recognition im Web umfasst mehrere Kernschritte: Zuerst ruft der Browser die Kamera auf, um ein Echtzeitbild zu erfassen, danach werden die erfassten Bilddaten zur recognition-Verarbeitung auf den cloud server hochgeladen, und schließlich wird das von der cloud zurückgegebene Ergebnis empfangen und ausgewertet, um den gesamten image recognition-Ablauf abzuschließen.

Entwicklungsschritte

Die Implementierung der Kameraverarbeitung unterscheidet sich je nach Browser. Der Beispielcode in diesem Artikel deckt nicht alle Browser-Kompatibilitätsprobleme ab; passen Sie ihn daher entsprechend der tatsächlichen Umgebung an.

Der Ablauf ist wie folgt:

flowchart LR

A((Kamera initialisieren)) --> B[Kamerabild erfassen] --> C{cloud recognition API aufrufen}
C ----> |Target nicht erkannt| B
C ----> |Target erkannt| D((Geschäftslogik verarbeiten))

Vorbereitung

Fügen Sie der html-Seite die folgenden Elemente hinzu:

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

Fügen Sie dem js-Code den folgenden Inhalt hinzu, um die benötigten Objekte zu erhalten:

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');
  • videoEl ist das video-Element; der Kameravideostream wird an video gebunden, um eine Echtzeit-preview anzuzeigen
  • canvasEl ist das canvas-Element
  • canvasCtx ist das context 2d-Objekt von 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('打开摄像头错误');
});
  • Einstellung der Kameraparameter
    • constraints.video ist true: Kamera automatisch auswählen
    • 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 erfassen

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

cloud recognition API aufrufen

// 云图库的 Client-end URL
const clientendUrl = '您云图库的 Client-end URL';
// 云图库的 Cloud Token
const token = '这里是云图库的 Cloud Token';
// 云图库的 CRS AppId
const appId = '这里是云图库的 CRS AppId';
// image 为上一步骤中截取的图片
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: 识别结果处理
});
Tipp

Für Netzwerkanfragen können fetch, XMLHttpRequest oder die Bibliothek axois verwendet werden.

Verarbeitung des recognition-Ergebnisses

Nachdem die cloud recognition service API die Anfrage empfangen hat, gibt sie bei erfolgreicher Erkennung des target das recognition-Ergebnis zurück; wenn kein target erkannt wird, wird der Statuscode für nicht erkannt zurückgegeben; bei anderen Fehlern werden der entsprechende Fehlercode und eine Meldung zurückgegeben.

Target nicht erkannt

Wenn kein target erkannt wird, ist statusCode 17, und das zurückgegebene Ergebnis lautet:

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

Target erkannt

Wenn ein target erkannt wird, ist statusCode 0, und das zurückgegebene Ergebnis lautet:

{
  "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
}

Beschreibung der wichtigsten fields:

  • targetId: id des target
  • meta: base64-codierte Zusatzinformationen, z. B. 3D-Inhalte oder video URL, die beim Hochladen des recognition-Bildes hinzugefügt wurden
  • name: Name des target
  • active: "1" bedeutet aktiviert, "0" bedeutet deaktiviert
Tipp

Vollständige field-Informationen finden Sie in der API reference

Verarbeitung der Geschäftslogik

Sie können die Informationen in meta verwenden, um nachfolgende Geschäftslogik zu verarbeiten, z. B. Video abspielen oder 3D-Modelle rendern.

Verwandte Themen