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

相關主題