이미지 클라우드 인식 위챗 미니프로그램 샘플 설명

이 문서는 샘플 코드를 심층적으로 분석하여 이해를 돕고, 이를 기반으로 자신만의 인스턴스를 개발할 수 있도록 안내합니다.

샘플 다운로드 및 구성 방법은 빠른 시작을 참조하십시오.

인식 대상 설정

클라우드 인식 관리에서 인식 이미지를 업로드합니다.

• 인식 이미지 이름: 인식 대상에 이름을 지정합니다(예: "판다").

• 인식 이미지 업로드: 이미지를 선택하여 업로드합니다. 이 샘플에서 사용된 이미지는 다음과 같습니다:

  

• 너비: 인식 이미지의 너비(cm). 인식 이미지의 높이는 시스템이 업로드한 이미지를 기반으로 자동 계산됩니다. 인식 이미지 크기는 가상 콘텐츠 크기와 대응되며, 이 샘플에서는 사용되지 않습니다.

• 메타: 추가 정보로, 일반적으로 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 참조에서 확인하세요.

메타를 base64로 디코딩하여 원본 메타 정보를 가져옵니다.

// data는 반환된 데이터입니다
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

참고

위챗 미니프로그램에는 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을 직접 사용하지 마십시오.

여기서는 데모용으로만 사용되며, 실제 환경에서는 서버 측에서 토큰을 생성해야 합니다.

코드 심층 이해

클라우드 인식 개발을 보다 깊이 있게 학습하려면 샘플 소스 코드를 읽어보는 것을 강력히 권장합니다. 이를 기반으로 소스 코드를 수정하고 확장할 수 있습니다.

팁

다음 내용은 HTML 및 JavaScript 개발 능력이 어느 정도 있다는 전제하에 설명됩니다. 이러한 기본 기술을 아직 습득하지 못했다면, 후속 내용을 더 잘 이해하기 위해 관련 지식을 먼저 체계적으로 학습하는 것이 좋습니다.

위챗 미니프로그램에서 사용되는 XR/3D 엔진은 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는 인식 이미지 주소로, 클라우드 인식이 대상을 인식하면 반환됩니다.

비즈니스 처리

파일 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, ''));

        // 메타 정보에서 모델인지 비디오인지 확인
        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),
            });
        });
    });
}

예상 효과

• 샘플 홈페이지

• 모델 렌더링 효과

관련 주제

• APIKey 인증
• 이미지 클라우드 인식 소개
• 클라우드 인식 라이브러리 관리
• 클라우드 인식 빠른 시작
• 클라우드 인식 개발자 가이드
• 위챗 미니프로그램 개발 가이드
• 위챗 XR-FRAME