画像クラウド認識 WeChat ミニプログラムサンプルの説明
本記事では sample コードを深く分析し、理解したうえで独自の例を開発できるようにします。
sample のダウンロードと設定については、Quick Startを参照してください。
認識ターゲット設定
クラウド認識管理で、認識画像を 1 枚アップロードします。
認識画像名：認識ターゲットに名前を付けます。例：「Panda」。
認識画像をアップロード：画像を選択してアップロードします。本 sample で使用する画像は次のとおりです。
幅：認識画像の幅（cm）。認識画像の高さは、アップロードした画像に基づいてシステムが自動計算します。認識画像のサイズは仮想コンテンツのサイズに対応しますが、本 sample では使用しません。
Meta: 追加情報。通常は AR コンテンツ情報の保存に使用します。本 sample で使用する内容：
{"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}
認識ターゲットの取得
クラウド認識 API を呼び出してターゲットを認識すると、次の構造でターゲット情報が返されます。
{
"statusCode" : 0,
"result" : {
"target" : {
"targetId" : "375a4c2e********915ebc93c400",
"meta" : "eyJtb2RlbFVybCI6ICJhc3NldC9tb2RlbC90cmV4X3YzLmZieCIsICJzY2FsZSI6IDAuMDJ9",
"name" : "demo",
"trackingImage": "/9j/4AAQSkZJRgABAQ************/9k=",
"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));
注記
WeChat ミニプログラムには atob メソッドがないため、自分で実装する必要があります。
実装方法はサンプルディレクトリの libs/atob.js ファイルにあります。
主要コードの説明
components/easyar-cloud/easyar-cloud.js
wx.createCameraContextを使用してカメラを開く、画像をキャプチャする、クラウド認識にアクセスするなどのメソッド。components/easyar-ar/easyar-ar.js
xr-frame を使用してカメラを開く、画像をキャプチャする、クラウド認識にアクセスする、動画再生と template レンダリングを行うなどのメソッド。
components/libs/crs-client.js
Token 生成およびクラウド認識アクセスなどのメソッド。
警告
クライアント（Web、WeChat ミニプログラムなど）アプリケーションで API Key と API Secret を直接使用しないでください。
ここではデモ用途のみです。本番環境ではサーバー側で Token を生成してください。
コードの深い理解
クラウド認識開発をさらに深く学びたい場合は、sample ソースコードを読むことを強く推奨します。そのうえで、ソースコードの修正や拡張を試すことができます。
ヒント
以下の説明は、一定レベルの HTML と JavaScript 開発能力があることを前提としています。これらの基礎をまだ習得していない場合は、後続内容をよりよく理解するため、関連知識を体系的に学ぶことを推奨します。
WeChat ミニプログラムで使用する XR/3D エンジンは XR-FRAME です。詳しくない場合は、まずドキュメントを参照することを推奨します。
3D モデルのレンダリングを例に、sample 内の主要なソースコードを説明します。
UI およびシーン処理
ファイル components\easyar-ar\easyar-ar.wxml の説明。
XR シーンおよび Marker 設定。
<xr-scene ar-system="modes:Marker" id="xr-scene" bind:ready="handleReady" bind:ar-ready="handleARReady" bind:tick="handleTick">
<xr-node>
<xr-ar-tracker wx:if="{{markerImg != ''}}" mode="Marker" src="{{markerImg}}" id="arTracker"></xr-ar-tracker>
<xr-camera id="camera" node-id="camera" position="0.8 2.2 -5" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
</xr-node>
<xr-shadow id="shadow-root"></xr-shadow>
<xr-node node-id="lights">
<xr-light type="ambient" color="1 1 1" intensity="2" />
<xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="1" />
</xr-node>
</xr-scene>
ヒント
markerImg は認識画像のアドレスで、クラウド認識がターゲットを認識したときに返されます。
ビジネス処理
ファイル components\easyar-ar\easyar-ar.js の主要コード説明。
handleTick() {
// スクリーンショットを取得してクラウド認識サービスへ送信
this.capture().then(base64 => this.crsClient.searchByBase64(base64.split('base64,').pop())).then(res => {
// クラウド認識が返した結果
console.info(res)
// 0 が返る場合はターゲットが認識されていないことを示す
if (res.statusCode != 0) {
return;
}
const target = res.result.target;
// marker を設定
this.loadTrackingImage(target.trackingImage.replace(/[\r\n]/g, ''));
// meta 情報からモデルか動画かを判定
try {
const setting = JSON.parse(atob(target.meta));
if (setting.modelUrl) {
this.loadModel(target.targetId, setting);
} else if (setting.videoUrl) {
this.loadVideo(target.targetId, setting);
}
} catch (e) {
console.error(e);
}
}).catch(err => {
console.info(err)
});
},
capture() {
// カメラ画像を取得
const opt = { type: 'jpg', quality: this.properties.config.jpegQuality };
if (this.scene.share.captureToDataURLAsync) {
return this.scene.share.captureToDataURLAsync(opt);
}
return Promise.resolve(this.scene.share.captureToDataURL(opt));
},
ヒント
完全なコードはサンプルソースファイルを参照してください。
クラウド認識処理
ファイル components/libs/crs-client.js の主要メソッド説明。
画像の base64 データをクラウド認識サービス API に送信します。
searchByBase64(img) {
const params = {
image: img,
notracking: 'false',
appId: this.config.crsAppId,
};
return this.queryToken().then(token => {
return new Promise((resolve, reject) => {
wx.request({
url: `${this.config.clientEndUrl}/search`,
method: 'POST',
data: params,
header: {
'Authorization': token,
'content-type': 'application/json'
},
success: res => resolve(res.data),
fail: err => reject(err),
});
});
});
}
期待される効果
- サンプルホームページ
- モデルレンダリング効果