画像クラウド認識 Web サンプル
この記事では、サンプルコードの詳細な分析を行い、理解を深め、独自のインスタンスを開発するための基礎を提供します。
サンプルのダウンロードと設定手順については、クイックスタートを参照してください。
認識対象の設定
クラウド認識管理で、認識画像をアップロードします。
- 認識画像名：認識対象に名前を付けます（例：demo）。
- 認識画像のアップロード：画像を選択してアップロードします。本サンプルで使用する画像は：
https://www.easyar.cn/assets/images/webar/xiaoxiongmao.pngです。 - 幅：認識画像の幅（cm）。認識画像の高さは、アップロードした画像に基づいてシステムが自動計算します。認識画像のサイズは仮想コンテンツのサイズに対応しますが、本サンプルでは使用されていません。
- Meta：追加情報。通常ARコンテンツ情報の保存に使用されます。本サンプルでは以下の内容を使用：
{"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}。
認識対象の取得
クラウド認識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
クラウド認識の設定、および認識成功後のビジネス処理。
期待される効果
- カメラ初期化後のインターフェイス
- 動画再生効果
- モデルレンダリング効果
コードの深い理解
クラウド認識開発についてより深く学びたい場合は、サンプルソースコードを読むことを強くお勧めします。これを基に、ソースコードの変更と拡張を試みることができます。
ヒント
以下の内容は、HTMLとJavaScriptの開発スキルがある程度あることを前提としています。これらの基本スキルをまだ習得していない場合は、関連知識を体系的に学ぶことをお勧めします。
TokenThreeJsExample（3Dモデルレンダリング）を例に、サンプルの主なソースコード説明を紹介します。
ビジネス処理
ファイル 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 = '') {
}
- カスタムトークンを使用したクラウド認識の設定
setToken(token) {
}
- EasyAR統合環境を使用したクラウド認識の設定
useEasyAr() {
}
クラウド認識処理
ファイル html/src/webar.js の主要メソッド説明。
- カメラのスクリーンショットとクラウド認識設定
constructor(interval, recognizeUrl, token, container) {
}
- カメラを起動し、横/縦画面のビデオストリームプレビューを設定
openCamera(constraints) {
}
- 認識を開始
startRecognize(callback) {
}
- スクリーンショット撮影
captureVideo() {
}
- スクリーンショットをクラウド認識サービスに送信
httpPost(data) {
}