Описание примера облачного распознавания изображений для мини-программы WeChat
В этой статье подробно разбирается sample-код, чтобы помочь вам понять его и на этой основе разработать собственные примеры.
Описание скачивания и настройки sample см. в Quick Start.
Настройка цели распознавания
В управлении облачным распознаванием загрузите изображение для распознавания.
Имя изображения распознавания: задайте имя цели распознавания, например «Panda».
Загрузка изображения распознавания: выберите и загрузите изображение. В этом sample используется следующее изображение:
Ширина: ширина изображения распознавания (см). Высота изображения будет автоматически вычислена системой на основе загруженного изображения. Размер изображения распознавания соответствует размеру виртуального контента; в этом 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 Reference
Декодируйте 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 для открытия камеры, захвата изображений, доступа к облачному распознаванию, воспроизведения видео и рендеринга templates.
components/libs/crs-client.js
Методы генерации Token и доступа к облачному распознаванию.
Предупреждение
Не используйте API Key и API Secret напрямую в клиентских приложениях (например, Web, мини-программах WeChat и т. д.).
Здесь это используется только для демонстрации. В production генерируйте Token на сервере.
Углубленное понимание кода
Если вы хотите глубже изучить разработку облачного распознавания, настоятельно рекомендуется прочитать исходный код sample. На этой основе можно попробовать изменить и расширить исходный код.
Совет
Дальнейшее объяснение предполагает, что у вас уже есть определенные навыки разработки на HTML и JavaScript. Если вы еще не освоили эти основы, рекомендуется сначала системно изучить соответствующие знания, чтобы лучше понимать последующий материал.
XR/3D-движок, используемый в мини-программах WeChat, — 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),
});
});
});
}
Ожидаемый эффект
- Главная страница примера
- Эффект рендеринга модели