画像クラウド認識 Web 開発者ガイド

Web 端末で画像クラウド認識を実装する主要なプロセスは以下のコアステップを含みます：まずブラウザでカメラを呼び出しリアルタイム映像をキャプチャし、その後収集した画像データをクラウドサーバーにアップロードして認識処理を行い、最終的にクラウドから返された結果を受信・解析し、画像認識のクローズドループを完了します。

Development steps

異なるブラウザはカメラ処理の実装に差異があります。本サンプルコードは全てのブラウザ互換性問題をカバーしておらず、実際の環境に基づいて調整することを推奨します。

フローは以下の通りです：

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