Table of Contents

Image cloud recognition web example

This article will guide you through 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 the Quick Start.

Identify target settings

In cloud recognition management, upload a recognition 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 example is: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Width: The width of the recognition image (cm). The height of the recognition image will be automatically calculated by the system based on the image you uploaded. The size of the recognition image corresponds to the size of the virtual content, which is not used in this example.
  • Meta: Additional information, generally used to store AR content information. The content used in this example is: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Identify target acquisition

When calling the cloud recognition API, after identifying the target, the 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

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

  • src/webar.js

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

  • src/app.js

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

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

    Configuration for cloud recognition and business processing after successful recognition.

Expected effect

  • Interface after camera initialization

Expected effect

  • Video playback effect

Expected effect

  • Model rendering effect

Expected effect

Code deep understanding

If you wish to delve deeper into cloud recognition development, we strongly recommend reading the sample source code. Based on this, you can attempt to modify and extend 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 fundamentals, we suggest systematically learning relevant knowledge first to better understand subsequent content.

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

Business processing

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

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

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

Ui and initialize cloud recognition

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

  • 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 descriptions.

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