Table of Contents

圖像雲識別 Web 示例

本篇將帶您深入分析樣例代碼，幫助您理解並在此基礎上開發自己的實例。

sample 下載與配置說明，請參考快速入門。

識別目標設置

在雲識別管理中，上傳一張識別圖片。

  • 識別圖片名稱：給識別目標一個名稱，如 demo。
  • 上傳識別圖片：選擇並上傳一張圖片，本樣例中使用的圖片爲： https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png。
  • 寬度：識別圖的寬度（cm）。識別圖的高度將由系統根據您上傳的圖片自動計算。識別圖的大小和虛擬內容的大小對應，本樣例中未使用。
  • Meta：附加信息，一般用於存儲AR內容信息，本樣例中使用的內容爲： {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}。

crs sample

識別目標獲取

在調用雲識別 API，識別到目標後，會返回目標信息，結構如下：

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

完整字段信息查看 API 參考

將 meta 使用 base64 解碼，獲取 meta 原始信息。

// data 爲返回的數據
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

主要代碼說明

  • src/webar.js

    封裝了幾個基本的操作，如初始化攝像頭、截取圖片、調用雲識別等功能。

  • src/app.js

    封裝了界面的基本操作，如攝像頭切換、界面交互、以及 WebAR 的初始化操作。

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

    雲識別的配置，及識別成功後的業務處理。

預期效果

  • 攝像頭初始化後界面

預期效果

  • 播放視頻效果

預期效果

  • 渲染模型效果

預期效果

代碼深入理解

若您期望對雲識別開發進行更爲深入的學習，強烈建議您閱讀 sample 源碼。在此基礎上，您可以嘗試對源碼進行修改與擴展。

提示

以下內容講解基於您已具備一定程度的 HTML 與 JavaScript 開發能力這一前提條件。若您尚未掌握這些基礎技能，建議先系統學習相關知識，以便更好地理解後續內容。

我們將以 TokenThreeJsExample （渲染3D模型）爲例，介紹 sample 中主要的源碼說明。

業務處理

文件 TokenThreeJsExample/asset/js/app.js 主要方法說明。

  • 初始化 App 對象
// 使用雲識別的 Client-end URL 初始化 App 對象
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • 設置雲識別相關信息
// 設置雲識別庫 AppId 與 token，與 app.useEasyAr() 只能選一個使用
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // 雲別庫的 CRS AppId
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // APIKey + APISecret 生成的 Token
});

// 如果使用 EasyAR 提供的集成環境
// app.useEasyAr();
  • 業務邏輯處理
app.callback = (msg) => {
    // msg 爲識別到目標的信息
    // 解析其中的 meta 字段，處理業務邏輯
};

UI 及初始化雲識別

文件 html/src/app.js　主要方法說明。

  • 初始化攝像頭選擇
constructor(url = '') {
}
  • 使用自定義 Token 配置雲別識
setToken(token) {
}
  • 使用 EasyAR 集成環境配置雲別識
useEasyAr() {
}

雲識別處理

文件 html/src/webar.js 主要方法說明。

  • 攝像頭截圖與雲識別配置
constructor(interval, recognizeUrl, token, container) {
}
  • 打開攝像頭，檢測設置橫/豎屏視頻流預覽
openCamera(constraints) {
}
  • 開啓識別
startRecognize(callback) {
}
  • 截圖
captureVideo() {
}
  • 發送截圖到雲識別服務識別
httpPost(data) {
}

相關主題