이미지 클라우드 인식 WeChat Mini Program 샘플 설명
이 문서는 sample 코드를 심층적으로 분석하여 이해를 돕고, 이를 바탕으로 자체 예제를 개발할 수 있도록 안내합니다.
sample 다운로드 및 구성 설명은 Quick Start를 참조하십시오.
인식 타겟 설정
클라우드 인식 관리에서 인식 이미지 업로드를 수행합니다.
인식 이미지 이름: 인식 타겟에 이름을 지정합니다. 예: "Panda".
인식 이미지 업로드: 이미지를 선택하고 업로드합니다. 이 sample에서 사용하는 이미지는 다음과 같습니다.
너비: 인식 이미지의 너비(cm). 인식 이미지의 높이는 업로드한 이미지에 따라 시스템이 자동으로 계산합니다. 인식 이미지의 크기는 가상 콘텐츠 크기와 대응되지만, 이 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를 참조하십시오
base64로 meta를 디코딩하여 원본 meta 정보를 가져옵니다.
// data는 반환된 데이터
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));
참고
WeChat Mini Program에는 atob 메서드가 없으므로 직접 구현해야 합니다.
구현 방법은 예제 디렉터리의 libs/atob.js 파일에 있습니다.
주요 코드 설명
components/easyar-cloud/easyar-cloud.js
wx.createCameraContext를 사용하여 카메라 열기, 이미지 캡처 및 클라우드 인식 접근 등을 수행하는 메서드.components/easyar-ar/easyar-ar.js
xr-frame을 사용하여 카메라 열기, 이미지 캡처, 클라우드 인식 접근, 비디오 재생 및 template 렌더링 등을 수행하는 메서드.
components/libs/crs-client.js
Token 생성 및 클라우드 인식 접근 등의 메서드.
경고
클라이언트(예: Web, WeChat Mini Program 등) 애플리케이션에서 API Key와 API Secret을 직접 사용하지 마십시오.
여기서는 데모 용도로만 사용합니다. 프로덕션 환경에서는 서버에서 Token을 생성하십시오.
코드 심층 이해
클라우드 인식 개발을 더 깊이 학습하려면 sample 소스 코드를 읽는 것을 강력히 권장합니다. 이를 바탕으로 소스 코드를 수정하고 확장해 볼 수 있습니다.
팁
다음 설명은 사용자가 일정 수준의 HTML 및 JavaScript 개발 능력을 갖추고 있다는 전제하에 진행됩니다. 아직 이러한 기본 기술을 익히지 않았다면 후속 내용을 더 잘 이해할 수 있도록 관련 지식을 체계적으로 학습하는 것을 권장합니다.
WeChat Mini Program에서 사용하는 XR/3D 엔진은 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),
});
});
});
}
예상 효과
- 예제 홈 페이지
- 모델 렌더링 효과