画像クラウド認識 WeChat ミニプログラムサンプル説明
この記事では、サンプルコードを詳細に分析し、理解を深め、独自のインスタンスを開発するための基礎を提供します。
sample のダウンロードと設定手順については、クイックスタートを参照してください。
認識ターゲットの設定
クラウド認識管理で、認識画像をアップロードします。
認識画像名：認識ターゲットに名前を付けます（例：「パンダ」）。
認識画像のアップロード：画像を選択してアップロードします。このサンプルで使用する画像は次のとおりです：
幅：認識画像の幅（cm）。認識画像の高さは、アップロードされた画像に基づいてシステムが自動的に計算します。認識画像のサイズは仮想コンテンツのサイズに対応しますが、このサンプルでは使用されていません。
Meta：追加情報。通常、ARコンテンツ情報を保存するために使用されます。このサンプルで使用されるコンテンツ：
{"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 を使用してカメラを開き、スクリーンショットを撮り、クラウド認識にアクセスし、ビデオを再生し、テンプレートをレンダリングする方法など。
components/libs/crs-client.js
Token の生成とクラウド認識へのアクセス方法など。
警告
API Key と API Secret をクライアント（Web、WeChat ミニプログラムなど）で直接使用しないでください。
ここではデモンストレーション目的のみで使用しています。本番環境で使用する場合は、サーバー側で Token を生成してください。
コードの詳細な理解
クラウド認識の開発についてより深く学びたい場合は、サンプルのソースコードを読むことを強くお勧めします。これを基に、ソースコードの変更と拡張を試みることができます。
ヒント
以下の内容は、HTML と JavaScript の開発スキルがある程度あることを前提としています。これらの基本スキルをまだ習得していない場合は、後続の内容をよりよく理解するために、関連知識を体系的に学ぶことをお勧めします。
WeChat ミニプログラムで使用される XR/3D エンジンは XR-FRAME です。慣れていない場合は、まずドキュメントを参照することをお勧めします。
3D モデルのレンダリングを例として、サンプルの主なソースコードの説明を紹介します。
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 は認識画像の URL です。クラウド認識がターゲットを認識すると返されます。
ビジネスロジックの処理
ファイル 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),
});
});
});
}
期待される効果
- サンプルホームページ
- モデルレンダリング効果