Table of Contents

Guide du développeur web pour la reconnaissance cloud d'images

La mise en œuvre de la reconnaissance cloud d'images côté web implique les étapes clés suivantes : capturer le flux vidéo en temps réel via le navigateur, télécharger les données d'image vers le serveur cloud pour traitement, puis recevoir et interpréter les résultats retournés par le cloud, complétant ainsi la boucle de reconnaissance d'image.

Étapes de développement

Les implémentations de traitement de caméra varient selon les navigateurs. Les exemples de code de cet article ne couvrent pas tous les problèmes de compatibilité. Il est recommandé d'effectuer des ajustements selon l'environnement réel.

Flux :

flowchart LR

A((初始化摄像头)) --> B[截取摄像头图片] --> C{调用云识别 API}
C ----> |未识别到目标| B
C ----> |识别到目标| D((业务逻辑处理))

Configuration préalable

Ajouter ces éléments dans la page HTML :

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

Dans le code JavaScript, ajouter :

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');
  • videoEl est l'élément video, lié au flux vidéo de la caméra pour la prévisualisation
  • canvasEl est l'élément canvas
  • canvasCtx est l'objet context 2d du canvas

Initialisation de 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 la caméra :
    • constraints.video à true : sélection automatique de la caméra
    • constraints.video à {facingMode: {exact: 'user'}} : caméra frontale
    • constraints.video à {facingMode: {exact: 'environment'}} : caméra arrière
Astuce

Plus de paramètres : Paramètres de configuration de la caméra.

Capture d'image depuis la caméra

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

Appel de l'API de reconnaissance cloud

// URL client-end de la bibliothèque cloud
const clientendUrl = '您云图库的 Client-end URL';
// Cloud Token de la bibliothèque cloud
const token = '这里是云图库的 Cloud Token';
// CRS AppId de la bibliothèque cloud
const appId = '这里是云图库的 CRS AppId';
// image est l'image capturée à l'étape précédente
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 des résultats
});
Astuce

Utiliser fetch, XMLHttpRequest ou axios pour les requêtes réseau.

Traitement des résultats

Si la reconnaissance réussit, l'API retourne les résultats. Si aucune cible n'est détectée, elle retourne le code d'état correspondant. Pour d'autres erreurs, elle retourne le code d'erreur et le message.

Aucune cible détectée

Si aucune cible n'est détectée, statusCode est 17 :

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

Cible détectée

Si une cible est détectée, statusCode est 0 :

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

Champs principaux :

  • targetId: ID de la cible
  • meta: Informations supplémentaires encodées en base64 (contenu 3D ou URL vidéo ajoutés lors du téléchargement)
  • name: Nom de la cible
  • active: "1" pour activé, "0" pour désactivé
Astuce

Voir Référence API pour tous les champs.

Traitement de la logique métier

Utilisez les informations dans meta pour les logiques métier ultérieures (lecture vidéo, rendu 3D, etc.).

Sujets connexes