圖像雲識別 Web 開發者指南

在 Web 端實現圖像雲識別的關鍵流程涵蓋以下幾個核心環節：首先通過瀏覽器調用攝像頭捕獲即時畫面，隨後將採集到的圖像數據上傳至雲端伺服器進行識別處理，最終接收並解析雲端返回的結果，完成整個圖像識別閉環。

開發步驟

不同瀏覽器對攝像頭處理的實現存在差異，本文示例程式碼未涵蓋所有瀏覽器相容性問題，建議根據實際環境進行調整。

流程如下：

flowchart LR

A((初始化攝像頭)) --> B[截取攝像頭圖片] --> C{調用雲識別 API}
C ----> |未識別到目標| B
C ----> |識別到目標| D((業務邏輯處理))

前置設定

在 html 頁面中添加以下元素：

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

在 js 程式碼中添加以下內容，獲取必需的物件：

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');

videoEl 為 video 元素，將攝像頭影片流綁定到 video 上即時預覽
canvasEl 為 canvas 元素
canvasCtx 為 canvas 的 context 2d 物件

初始化攝像頭

const constraints = {
    audio: false,
    video: true,
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    videoEl.srcObject = stream;
    videoEl.play();
}).catch((err) => {
    console.error(err);
    alert('開啟攝像頭錯誤');
});

攝像頭參數設定
- constraints.video 為 true，自動選擇攝像頭
- constraints.video 為 {facingMode: {exact: 'user'}}，使用前置攝像頭
- constraints.video 為 {facingMode: {exact: 'environment'}}，使用後置攝像頭

提示

更多攝像頭參數，參考攝像頭設定參數。

截取攝像頭圖片

canvasCtx.drawImage(videoEl, 0, 0, videoEl.offsetWidth, videoEl.offsetWidth);
const image = canvasElement.toDataURL('image/jpeg', 0.8).split('base64,').pop();

調用雲識別 API

// 雲圖庫的 Client-end URL
const clientendUrl = '您雲圖庫的 Client-end URL';
// 雲圖庫的 Cloud Token
const token = '這裡是雲圖庫的 Cloud Token';
// 雲圖庫的 CRS AppId
const appId = '這裡是雲圖庫的 CRS AppId';
// image 為上一步驟中截取的圖片
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: 識別結果處理
});

提示

發送網路請求可以使用 fetch、XMLHttpRequest 或 axois 函式庫等。

識別結果處理

雲識別服務 API 接收到請求後，若成功識別到目標則返回識別結果；若未識別到目標，則返回未識別到狀態碼；若是其它錯誤，返回對應錯誤碼及提示資訊。

未識別到目標

如果未識別到目標，statusCode 為 17，返回結果如下：

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

識別到目標

如果識別到目標，statusCode 為 0，返回結果如下：

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

主要欄位說明：

targetId: 目標 id
meta: base64 編碼的附加資訊，在上傳識別圖時添加的 3D 內容或影片 URL 等內容
name: 目標名稱
active: "1" 為啟用狀態，"0" 為停用狀態

提示

完整欄位資訊查看 API 參考

業務邏輯處理

您可以使用 meta 中的資訊處理後續業務邏輯，如播放影片，渲染 3D 模型等。

Table of Contents