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 footage by calling 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 sample code in this article does not cover all browser compatibility issues. It is recommended to adjust according to 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 detected| B
C ----> |Target detected| D((Business logic processing))

Prerequisites

Add the following elements to the HTML page:

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

Add the following content to the JavaScript code to obtain the 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 2D context object of canvas.

Initialize the 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 is true, automatically select the camera
- constraints.video is {facingMode: {exact: 'user'}}, use the front camera
- constraints.video is {facingMode: {exact: 'environment'}}, use the rear 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 the cloud recognition API

// The client-end URL of the cloud image library
const clientendUrl = 'Your cloud image library client-end URL';
// The cloud token of the cloud image library
const token = 'Here is the cloud token of the cloud image library';
// The CRS AppId of the cloud image library
const appId = 'Here is the CRS AppId of the cloud image library';
// image is the picture 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: Process the recognition results
});

Tip

You can use fetch, XMLHttpRequest, or libraries like axois to send network requests.

Process the recognition result

After receiving the request, the cloud recognition service API returns the recognition result if the target is successfully recognized. If no target is recognized, it returns the unrecognized status code. For other errors, it returns the corresponding error code and prompt information.

No target detected

If no target is detected, statusCode is 17, and the returned result is as follows:

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

Target detected

If a target is detected, statusCode is 0, and the response 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 target image
name: target name
active: "1" indicates enabled status, "0" indicates disabled status

Tip

For complete field information, refer to 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