Table of Contents

Guide développeur Web image cloud recognition

Le processus clé pour implémenter image cloud recognition côté Web comprend plusieurs étapes centrales : appeler d'abord la caméra via le navigateur pour capturer une image en temps réel, puis téléverser les données d'image collectées vers le serveur cloud pour le traitement recognition, et enfin recevoir et analyser le résultat renvoyé par le cloud pour terminer la boucle image recognition.

Étapes de développement

L'implémentation du traitement de la caméra diffère selon les navigateurs. Le code d'exemple de cet article ne couvre pas tous les problèmes de compatibilité des navigateurs ; il est recommandé de l'ajuster selon l'environnement réel.

Le flux est le suivant :

flowchart LR

A((Initialiser la caméra)) --> B[Capturer l'image de la caméra] --> C{Appeler la cloud recognition API}
C ----> |Target non reconnu| B
C ----> |Target reconnu| D((Traitement de la logique métier))

Paramétrage préalable

Ajoutez les éléments suivants à la page html :

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

Ajoutez le contenu suivant au code js afin d'obtenir les objets nécessaires :

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');
  • videoEl est l'élément video; liez le flux vidéo de la caméra à video pour une preview en temps réel
  • canvasEl est l'élément canvas
  • canvasCtx est l'objet context 2d du canvas

Initialiser la caméra

const constraints = {
    audio: false,
    video: true,
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    videoEl.srcObject = stream;
    videoEl.play();
}).catch((err) => {
    console.error(err);
    alert('打开摄像头错误');
});
  • Paramètres de caméra
    • constraints.video vaut true, sélection automatique de la caméra
    • constraints.video vaut {facingMode: {exact: 'user'}}, utilisation de la caméra avant
    • constraints.video vaut {facingMode: {exact: 'environment'}}, utilisation de la caméra arrière
Astuce

Pour plus de paramètres de caméra, consultez paramètres de configuration de caméra.

Capturer l'image de la caméra

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

Appeler la cloud recognition API

// Client-end URL de la bibliotheque d images cloud
const clientendUrl = '您云图库的 Client-end URL';
// Cloud Token de la bibliotheque d images cloud
const token = '这里是云图库的 Cloud Token';
// CRS AppId de la bibliotheque d images cloud
const appId = '这里是云图库的 CRS AppId';
// image est l image capturee a l etape precedente
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: traitement du resultat de reconnaissance
});
Astuce

Les requêtes réseau peuvent être envoyées avec fetch, XMLHttpRequest, la bibliothèque axois, etc.

Traitement du résultat recognition

Après réception de la requête par la cloud recognition service API, si le target est reconnu avec succès, le résultat recognition est renvoyé ; si le target n'est pas reconnu, le status code non reconnu est renvoyé ; pour les autres erreurs, le error code correspondant et un message sont renvoyés.

Target non reconnu

Si aucun target n'est reconnu, statusCode vaut 17, et le résultat renvoyé est le suivant :

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

Target reconnu

Si le target est reconnu, statusCode vaut 0, et le résultat renvoyé est le suivant :

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

Description des principaux fields :

  • targetId: id du target
  • meta: informations supplémentaires encodées en base64, comme du contenu 3D ou une URL vidéo ajoutés lors du téléversement de l'image recognition
  • name: nom du target
  • active: "1" indique l'état activé, "0" indique l'état désactivé
Astuce

Pour les informations complètes sur les fields, consultez API reference

Traitement de la logique métier

Vous pouvez utiliser les informations dans meta pour traiter la logique métier suivante, par exemple lire une vidéo, rendre un modèle 3D, etc.

Rubriques connexes