Table of Contents

Exemplo de mini programa de reconhecimento de nuvem de imagem do wechat

Este artigo irá guiá-lo através de uma análise detalhada do código de exemplo, ajudando você a compreender e desenvolver sua própria instância com base nisso.

Para instruções de download e configuração do sample, consulte Início rápido.

Configuração de alvo de reconhecimento

No gerenciamento de reconhecimento de nuvem, faça upload de uma imagem de reconhecimento.

  • Nome da imagem de reconhecimento: Dê um nome ao alvo de reconhecimento, como "Panda".

  • Carregar imagem de reconhecimento: Selecione e faça upload de uma imagem. A imagem usada neste exemplo é:

    sample

  • Largura: Largura da imagem de reconhecimento (cm). A altura será calculada automaticamente pelo sistema com base na imagem carregada. O tamanho da imagem de reconhecimento corresponde ao tamanho do conteúdo virtual, não utilizado neste exemplo.

  • Meta: Informações adicionais, geralmente usadas para armazenar informações de conteúdo AR. Neste exemplo, usamos:

    {"modelUrl": "https://sightp-assets.sightp.com/crs-mini/xiaoxiongmao.glb", "scale": 0.4}

sample

Obtenção de alvo de reconhecimento

Ao chamar a API de reconhecimento de nuvem, após reconhecer um alvo, as informações do alvo sã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 campos completos, consulte Referência da API

Decodifique o meta usando base64 para obter as informações originais do meta.

// data são os dados retornados
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
Nota

Mini programas WeChat não possuem o método atob, que precisa ser implementado manualmente.

A implementação está no arquivo libs/atob.js no diretório de exemplo.

Explicação do código principal

  • components/easyar-cloud/easyar-cloud.js

    Métodos usando wx.createCameraContext para abrir câmera, capturar imagens e acessar reconhecimento em nuvem.

  • components/easyar-ar/easyar-ar.js

    Métodos usando xr-frame para abrir câmera, capturar imagens, acessar reconhecimento em nuvem, reproduzir vídeo e renderizar modelos.

  • components/libs/crs-client.js

    Métodos para geração de Token e acesso a reconhecimento em nuvem.

Aviso

Não use API Key e API Secret diretamente em clientes (como Web, mini programas WeChat, etc.).

Aqui é apenas para demonstração. Para uso em produção, gere o 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

O conteúdo a seguir pressupõe que você tenha habilidades básicas de desenvolvimento em HTML e JavaScript. Se você ainda não domina essas habilidades básicas, recomenda-se aprender sistematicamente primeiro para melhor entender o conteúdo subsequente.

O mecanismo XR/3D usado em mini programas WeChat é o XR-FRAME. Se não estiver familiarizado, consulte primeiro a documentação.

Usaremos a renderização de modelos 3D como exemplo para explicar o código-fonte principal no sample.

Processamento de UI e cena

Explicação do arquivo components\easyar-ar\easyar-ar.wxml.

Configuração de cena XR e marcador.

<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 URL da imagem de reconhecimento, retornado quando o reconhecimento em nuvem identifica um alvo.

Processamento de negócios

Explicação do código principal no arquivo components\easyar-ar\easyar-ar.js.

handleTick() {
    // Captura e envia para o 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)

        // Retorno 0 indica que nenhum alvo foi reconhecido
        if (res.statusCode != 0) {
            return;
        }

        const target = res.result.target;

        // Configura o marcador
        this.loadTrackingImage(target.trackingImage.replace(/[\r\n]/g, ''));

        // Detecta se é modelo ou vídeo a partir das informações do 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() {
    // Obtém 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 de origem do exemplo para o código completo.

Processamento de reconhecimento em nuvem

Explicação dos métodos principais no arquivo components/libs/crs-client.js.

Envia 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 esperado

  • Efeito de renderização do modelo

Tópicos relacionados