Image cloud recognition web developer guide

The key process for implementing image cloud recognition on the web includes the following core steps: first capture real-time images by invoking the camera through the browser, then upload the collected image data to the cloud server for recognition processing, and finally receive and parse the results returned by the cloud to complete the entire image recognition loop.

Development steps

Different browsers have varying implementations for camera handling. The example code in this article does not cover all browser compatibility issues; it is recommended to make adjustments based on the actual environment.

The process is as follows:

flowchart LR

A((Initialize camera)) --> B[Capture camera image] --> C{Call cloud recognition API}
C ----> |No target recognized| B
C ----> |Target recognized| D((Business logic processing))

Prerequisite setup

Add the following elements to the HTML page:

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

Add the following content in JavaScript code to obtain necessary objects:

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');

videoEl is the video element, which binds the camera video stream to video for real-time preview
canvasEl is the canvas element
canvasCtx is the context 2d object of canvas

Initialize camera

const constraints = {
    audio: false,
    video: true,
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    videoEl.srcObject = stream;
    videoEl.play();
}).catch((err) => {
    console.error(err);
    alert('Error opening camera');
});

Camera parameter settings
- constraints.video as true: automatically selects camera
- constraints.video as {facingMode: {exact: 'user'}}: uses front-facing camera
- constraints.video as {facingMode: {exact: 'environment'}}: uses rear-facing camera

Tip

For more camera parameters, refer to Camera settings parameters.

Capture camera image

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

Call cloud recognition API

// Client-end URL of cloud image library
const clientendUrl = 'Your cloud image library Client-end URL';
// Cloud Token of cloud image library
const token = 'Cloud Token of cloud image library';
// CRS AppId of cloud image library
const appId = 'CRS AppId of cloud image library';
// image is the image captured in the previous step
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: Recognition result processing
});

Tip

For sending network requests, you can use fetch, XMLHttpRequest, axois library, etc.

Recognition result processing

After receiving the request, the cloud recognition service API returns recognition results if the target is successfully recognized; returns a no-recognition status code if no target is recognized; and returns corresponding error codes and prompt information for other errors.

No target recognized

If no target is recognized, statusCode is 17, and the return result is as follows:

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

Target recognized

If the target is recognized, statusCode is 0, and the return result is as follows:

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

Key field descriptions:

targetId: target id
meta: base64 encoded additional information, such as 3D content or video URL added when uploading the recognition image
name: target name
active: "1" indicates enabled status, "0" indicates disabled status

Tip

View complete field information in API reference

Business logic processing

You can use the information in meta to handle subsequent business logic, such as playing videos, rendering 3D models, etc.

Table of Contents