image cloud recognition Web 開発者ガイド

Web で image cloud recognition を実装するための主要な流れは、いくつかの中心的な手順で構成されます。まずブラウザーからカメラを呼び出してリアルタイム画像を取得し、次に取得した画像データを cloud server にアップロードして recognition 処理を行い、最後に cloud から返された結果を受信して解析し、image recognition の一連の処理を完了します。

開発手順

カメラ処理の実装はブラウザーによって異なります。この記事のサンプルコードはすべてのブラウザー互換性問題を網羅していないため、実際の環境に合わせて調整することをお勧めします。

フローは次のとおりです:

flowchart LR

A((カメラ初期化)) --> B[カメラ画像を切り出す] --> C{cloud recognition API を呼び出す}
C ----> |target が認識されない| B
C ----> |target が認識された| 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 stream を video にバインドしてリアルタイム preview を行います
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();

cloud recognition 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 ライブラリなどを使用できます。

recognition 結果処理

cloud recognition service API がリクエストを受け取った後、target の認識に成功した場合は recognition 結果を返します。target が認識されなかった場合は未認識の status code を返し、その他のエラーの場合は対応する error code とメッセージを返します。

target が認識されない

target が認識されなかった場合、statusCode は 17 で、返される結果は次のとおりです:

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

target が認識された

target が認識された場合、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
}

主な fields の説明:

targetId: target id
meta: base64 エンコードされた追加情報。recognition 画像をアップロードするときに追加した 3D コンテンツや video URL など
name: target 名
active: "1" は有効状態、"0" は無効状態

ヒント

fields の完全な情報については、API reference を参照してください

ビジネスロジック処理

meta 内の情報を使用して、動画再生、3D モデルのレンダリングなど、後続のビジネスロジックを処理できます。

Table of Contents