Пример мини-программы WeChat для облачного распознавания изображений
В этом разделе мы проведем углубленный анализ образца кода, чтобы помочь вам понять его и разработать на его основе собственный пример.
Загрузку и инструкции по настройке образца см. в разделе Быстрый старт.
Настройка цели распознавания
В разделе управления облачным распознаванием загрузите изображение для распознавания.
Название изображения для распознавания: присвойте цели распознавания имя, например, «панда».
Загрузка изображения для распознавания: выберите и загрузите изображение. В этом примере используется изображение:
Ширина: ширина изображения для распознавания (см). Высота изображения будет рассчитана системой автоматически на основе загруженного вами изображения. Размер изображения для распознавания соответствует размеру виртуального контента. В этом примере не используется.
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
Методы генерации токена и доступа к облачному распознаванию.
Предупреждение
Не используйте API Key и API Secret напрямую на клиентской стороне (например, в Web, мини-программах WeChat и т.д.).
Здесь это используется только для демонстрации. В рабочей среде генерируйте токен на стороне сервера.
Глубокое понимание кода
Если вы хотите глубже изучить разработку облачного распознавания, настоятельно рекомендуем прочитать исходный код образца. На его основе вы можете попробовать изменить и расширить код.
Совет
Следующее объяснение предполагает, что у вас уже есть базовые навыки разработки на HTML и JavaScript. Если вы еще не освоили эти основы, рекомендуется сначала систематически изучить соответствующие знания для лучшего понимания последующего материала.
Движок XR/3D, используемый в мини-программах WeChat, - это XR-FRAME. Если вы с ним не знакомы, сначала ознакомьтесь с документацией.
Мы рассмотрим рендеринг 3D-модели в качестве примера и опишем основные фрагменты кода в образце.
Обработка UI и сцены
Описание файла components\easyar-ar\easyar-ar.wxml.
Настройка сцены XR и маркера.
<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;
// Установить маркер
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),
});
});
});
}
Ожидаемый результат
- Главная страница примера
- Эффект рендеринга модели