画像クラウド認識 Web サンプル
この記事では、サンプルコードを詳しく分析し、理解したうえで独自の例を開発できるようにします。
sample のダウンロードと設定説明については、クイックスタートを参照してください。
認識ターゲット設定
クラウド認識管理で、認識画像をアップロードします。
- 認識画像名: 認識ターゲットに demo などの名前を付けます。
- 認識画像をアップロード: 画像を選択してアップロードします。この sample で使用する画像は次のとおりです。
https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png。 - 幅: 認識画像の幅 (cm)。認識画像の高さは、アップロードした画像に基づいてシステムが自動計算します。認識画像のサイズは仮想コンテンツのサイズに対応しますが、この sample では使用していません。
- Meta: 追加情報。一般に AR コンテンツ情報の保存に使用されます。この sample で使用する内容は次のとおりです:
{"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
クラウド認識の設定、および認識成功後の業務処理。
期待される効果
- カメラ初期化後の画面
- 動画再生効果
- モデルレンダリング効果
コードをさらに理解する
クラウド認識開発についてさらに深く学びたい場合は、sample ソースコードを読むことを強くお勧めします。そのうえで、ソースコードの変更や拡張を試すことができます。
ヒント
以下の説明は、ある程度の HTML と JavaScript 開発能力をすでに備えていることを前提としています。これらの基礎スキルをまだ習得していない場合は、後続内容をよりよく理解するため、まず関連知識を体系的に学ぶことをお勧めします。
TokenThreeJsExample (3D モデルのレンダリング) を例に、sample 内の主なソースコード説明を紹介します。
ビジネス処理
The main methods in TokenThreeJsExample/asset/js/app.js are described below.
- App オブジェクトを初期化
// クラウド認識の Client-end URL で App オブジェクトを初期化
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
- cloud recognition 関連情報を設定
// クラウド認識ライブラリの AppId と token を設定します。app.useEasyAr() とはどちらか一方のみ使用できます
app.setToken({
'crsAppId': 'f7ff4977......9984ef8068c', // クラウド認識ライブラリの CRS AppId
'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // APIKey + APISecret から生成した Token
});
// EasyAR が提供する統合環境を使用する場合
// app.useEasyAr();
- ビジネスロジックを処理
app.callback = (msg) => {
// msg は認識された target の情報です
// その中の meta フィールドを解析し、ビジネスロジックを処理
};
UI および Cloud Recognition の初期化
ファイル html/src/app.js の主なメソッドの説明。
- カメラ選択を初期化
constructor(url = '') {
}
- カスタム Token を使用して Cloud Recognition を設定
setToken(token) {
}
- EasyAR 統合環境を使用して Cloud Recognition を設定
useEasyAr() {
}
Cloud Recognition 処理
ファイル html/src/webar.js の主なメソッド説明。
- カメラ screenshot と Cloud Recognition 設定
constructor(interval, recognizeUrl, token, container) {
}
- カメラを開き、横/縦画面 video stream preview の設定を検出
openCamera(constraints) {
}
- recognition を開始
startRecognize(callback) {
}
- screenshot
captureVideo() {
}
- screenshot を Cloud Recognition サービスへ送信して recognition
httpPost(data) {
}