Table of Contents

Cloud image recognition web example

This article will provide an in-depth analysis of the sample code to help you understand and develop your own examples based on it.

For sample download and configuration instructions, please refer to Quick start.

Target recognition settings

In cloud recognition management, upload an identification image.

  • Recognition image name: Give the recognition target a name, such as demo.
  • Upload recognition image: Select and upload an image. The image used in this sample is: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Width: The width of the recognition image (cm). The height will be automatically calculated by the system based on your uploaded image. The size of the recognition image corresponds to the size of the virtual content, which is not used in this sample.
  • Meta: Additional information, usually used to store AR content information. The content used in this sample is: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Recognition target acquisition

After calling the cloud recognition API and recognizing the target, target information will be returned with the following structure:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "meta" : "eyJtb2RlbFVybCI6ICJhc3NldC9tb2RlbC90cmV4X3YzLmZieCIsICJzY2FsZSI6IDAuMDJ9",
      "name" : "demo",
      "modified" : 1746609056804
    }
  },
  "date" : "2026-01-05T05:50:36.484Z",
  "timestamp" : 1767592236484
}
Tip

View complete field information in API reference

Decode the meta using base64 to obtain the original meta information.

// data is the returned data
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

Main code description

  • src/webar.js

    Encapsulates several basic operations such as initializing the camera, capturing images, and calling cloud recognition functions.

  • src/app.js

    Encapsulates basic interface operations such as camera switching, interface interaction, and WebAR initialization.

  • TokenVideoExample/asset/js/app.js and TokenThreeJsExample/asset/js/app.js

    Cloud recognition configuration and business processing after successful recognition.

Expected effect

  • Interface after camera initialization

Expected effect

  • Video playback effect

Expected effect

  • Model rendering effect

Expected effect

In-depth code understanding

If you wish to gain a deeper understanding of cloud recognition development, it is strongly recommended to read the sample source code. Based on this, you can try modifying and extending the source code.

Tip

The following explanation assumes you have a certain level of HTML and JavaScript development skills. If you have not yet mastered these basic skills, it is recommended to systematically learn relevant knowledge first to better understand the subsequent content.

We will use TokenThreeJsExample (rendering 3D models) as an example to introduce the main source code explanations in the sample.

Business processing

File TokenThreeJsExample/asset/js/app.js main method description.

  • Initialize App object
// Initialize App object using client-end URL for cloud recognition
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Set cloud recognition information
// Set cloud recognition library AppId and token. Cannot be used simultaneously with app.useEasyAr()
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId of cloud recognition library
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Token generated from APIKey + APISecret
});

// If using EasyAR's integrated environment
// app.useEasyAr();
  • Business logic processing
app.callback = (msg) => {
    // msg is the information of the recognized target
    // Parse its meta field to handle business logic
};

UI and cloud recognition initialization

File html/src/app.js main method descriptions.

  • Initialize camera selection
constructor(url = '') {
}
  • Configure cloud-recognition using custom token
setToken(token) {
}
  • Configure cloud-recognition using EasyAR integrated environment
useEasyAr() {
}

Cloud recognition processing

File html/src/webar.js main method description.

  • Camera screenshot and cloud recognition configuration
constructor(interval, recognizeUrl, token, container) {
}
  • Open camera, detect and set landscape/portrait video stream preview
openCamera(constraints) {
}
  • Start recognize
startRecognize(callback) {
}
  • Capture screenshot
captureVideo() {
}
  • Send screenshot to cloud recognition service for identification
httpPost(data) {
}