Descrição do exemplo de reconhecimento de imagens em nuvem para Mini Programs do WeChat
Este artigo guiará você por uma análise aprofundada do código sample, ajudando a compreendê-lo e a desenvolver seus próprios exemplos com base nele.
Para baixar e configurar o sample, consulte Quick Start.
Configuração do alvo de reconhecimento
Na gestão de reconhecimento em nuvem, carregue uma imagem de reconhecimento.
Nome da imagem de reconhecimento: dê um nome ao alvo de reconhecimento, por exemplo "Panda".
Carregar imagem de reconhecimento: selecione e carregue uma imagem. A imagem usada neste sample é:
Largura: largura da imagem de reconhecimento (cm). A altura da imagem será calculada automaticamente pelo sistema com base na imagem carregada. O tamanho da imagem de reconhecimento corresponde ao tamanho do conteúdo virtual; este sample não o usa.
Meta: informações adicionais, geralmente usadas para armazenar informações de conteúdo AR. O conteúdo usado neste sample é:
{"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}
Obtenção do alvo de reconhecimento
Após chamar a API de reconhecimento em nuvem e reconhecer o alvo, as informações do alvo serão retornadas com a seguinte estrutura:
{
"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
}
Dica
Para informações completas dos campos, consulte a API Reference
Decodifique meta usando base64 para obter as informações meta originais.
// data são os dados retornados
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
Nota
Nos Mini Programs do WeChat não existe o método atob, portanto é necessário implementá-lo.
A implementação está no arquivo libs/atob.js no diretório do exemplo.
Descrição do código principal
components/easyar-cloud/easyar-cloud.js
Métodos para usar
wx.createCameraContextpara abrir a câmera, capturar imagens e acessar o reconhecimento em nuvem.components/easyar-ar/easyar-ar.js
Métodos para usar xr-frame para abrir a câmera, capturar imagens, acessar o reconhecimento em nuvem, reproduzir vídeo e renderizar templates.
components/libs/crs-client.js
Métodos de geração de Token e acesso ao reconhecimento em nuvem.
Aviso
Não use API Key e API Secret diretamente em aplicações cliente (como Web, Mini Programs do WeChat etc.).
Isto é apenas para demonstração. Em produção, gere Token no servidor.
Compreensão aprofundada do código
Se você deseja aprender mais profundamente sobre desenvolvimento de reconhecimento em nuvem, é altamente recomendável ler o código-fonte do sample. Com base nisso, você pode tentar modificar e estender o código-fonte.
Dica
A explicação a seguir pressupõe que você já tenha certo nível de habilidades de desenvolvimento em HTML e JavaScript. Se ainda não domina esses fundamentos, recomenda-se estudar sistematicamente o conhecimento relacionado para compreender melhor o conteúdo posterior.
O motor XR/3D usado nos Mini Programs do WeChat é XR-FRAME. Se você não estiver familiarizado, consulte primeiro a documentação.
Usaremos a renderização de um modelo 3D como exemplo para apresentar as principais explicações do código-fonte no sample.
UI e processamento de cena
Descrição do arquivo components\easyar-ar\easyar-ar.wxml.
Configuração da cena XR e do 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>
Dica
markerImg é o endereço da imagem de reconhecimento, retornado quando o reconhecimento em nuvem identifica um alvo.
Processamento de negócio
Descrição do código principal do arquivo components\easyar-ar\easyar-ar.js.
handleTick() {
// Capturar a imagem e enviá-la ao serviço de reconhecimento em nuvem
this.capture().then(base64 => this.crsClient.searchByBase64(base64.split('base64,').pop())).then(res => {
// Resultado retornado pelo reconhecimento em nuvem
console.info(res)
// Retornar 0 indica que nenhum alvo foi reconhecido
if (res.statusCode != 0) {
return;
}
const target = res.result.target;
// Configurar marker
this.loadTrackingImage(target.trackingImage.replace(/[\r\n]/g, ''));
// Detectar pelas informações meta se é modelo ou vídeo
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() {
// Obter imagem da câmera
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));
},
Dica
Consulte o arquivo-fonte do exemplo para ver o código completo.
Processamento de reconhecimento em nuvem
Descrição dos principais métodos do arquivo components/libs/crs-client.js.
Enviar dados base64 da imagem para a API do serviço de reconhecimento em nuvem.
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),
});
});
});
}
Efeito esperado
- Página inicial do exemplo
- Efeito de renderização do modelo