• 서비스
  • 가격
  • 리소스
  • 기술지원

뷰티 AR Web을 미니프로그램에 통합

준비 작업

미니프로그램 개발을 시작하는 방법에 대한 자세한 내용은 Weixin 미니프로그램 문서를 참고하십시오.
뷰티 AR Web SDK 사용 방법에 대해 알아보려면 통합 가이드를 읽어보십시오.

시작하기

1단계: 미니프로그램 백엔드에서 도메인 얼로우리스트 구성

SDK는 백엔드에 인증 및 리소스 로딩을 요청하므로 미니프로그램 생성 완료 후 미니프로그램 백엔드에서 도메인 얼로우리스트를 구성해야 합니다.
1. 미니프로그램 백엔드를 열고 개발 > 개발 관리 > 개발 설정 > 서버 도메인 이름으로 이동합니다.
2. 수정을 클릭하고 다음 도메인 이름을 구성한 후 저장합니다.
요청 도메인 이름:
https://webar.qcloud.com;
https://webar-static.tencent-cloud.com;
https://aegis.qq.com;
인증 서명 API의 URL(get-ar-sign)
downloadFile 도메인 이름:
https://webar-static.tencent-cloud.com

2단계: SDK 설치 및 npm 빌드

미니프로그램 npm 패키지에 대한 자세한 내용은 미니프로그램에서 npm 사용을 참고하십시오.
1. 설치:
npm install tencentcloud-webar
2. 빌드: DevTools 툴을 열고 상단 표시줄에서 > npm 빌드를 선택합니다.
3. app.json에서 workers 경로를 구성합니다.
"workers": "miniprogram_npm/tencentcloud-webar/worker"

3단계: 파일 가져오기

// 0.3.0 이전 버전(1개 파일) 가져오기 방법
// import "../../miniprogram_npm/tencentcloud-webar/lib.js";
// 0.3.0 이상 버전 가져오기 방법(필요에 따라 초기화할 수 있는 두 개의 파일 + 3D 모듈)
import '../../miniprogram_npm/tencentcloud-webar/lib.js';
import '../../miniprogram_npm/tencentcloud-webar/core.js';
// 필요에 따라 3d 플러그인을 초기화합니다. 3d가 필요하지 않은 경우 다음을 건너뛸 수 있습니다.
import '../../miniprogram_npm/tencentcloud-webar/lib-3d.js';
import { plugin3d } from '../../miniprogram_npm/tencentcloud-webar/plugin-3d'
// ArSdk 가져오기
import { ArSdk } from "../../miniprogram_npm/tencentcloud-webar/index.js";
주의사항
미니프로그램은 하나의 파일이 500kb를 초과할 수 없도록 요구하므로 SDK는 두 개의 js 파일을 통해 제공됩니다.
v0.3.0부터 SDK가 3D를 지원하도록 더 분할되었습니다. 필요에 따라 3D 모듈을 로딩할 수 있습니다. 가져오기 전에 SDK 버전을 확인하고 해당 가져오기 방법을 사용하십시오.

4단계: SDK 초기화

주의사항
미니프로그램에서 SDK를 초기화하기 전에 시작하기의 지침에 따라 콘솔에서 미니프로그램 APPID를 구성해야 합니다.
페이지에 camera 레이블을 삽입하여 camera를 연 다음 통합 가이드에 설명된 대로 camera 매개변수를 설정해야 합니다.
미니프로그램은 getOutput을 지원하지 않으므로 온스크린 webgl canvas를 전달해야 하며 SDK는 이미지를 이 canvas에 직접 출력합니다.
예시 코드는 다음과 같습니다.
// wxml
// 카메라를 열고 position을 통해 숨깁니다
<camera
device-position="{{'front'}}"
frame-size="large" flash="off" resolution="medium"
style="width: 750rpx; height: 134rpx;position:absolute;top:-9999px;"
/>
// sdk는 처리된 이미지를 실시간으로 canvas에 출력합니다
<canvas
type="webgl"
canvas-id="main-canvas"
id="main-canvas"
style="width: 750rpx; height: 1334rpx;">
</canvas>
// 사진을 찍어 ImageData 객체를 canvas에 그립니다
<canvas
type="2d"
canvas-id="photo-canvas"
id="photo-canvas"
style="position:absolute;width:720px;height:1280px;top:-9999px;left:-9999px;">
</canvas>
// js
/** ----- 인증 구성 ----- */

/**
* Tencent Cloud 계정의 APPID
*
* [계정 센터](https://console.cloud.tencent.com/developer)로 이동하여 APPID를 확인합니다
*/
const APPID = ''; // 자신의 매개변수 입력

/**
* Web LicenseKey
*
* RT-Cube 콘솔의 [Web License 관리](https://console.cloud.tencent.com/vcube/web) 페이지에서 LicenseKey를 받을 프로젝트를 생성합니다.
*/
const LICENSE_KEY = ''; // 자신의 매개변수 입력

/**
* 서명을 계산하는 데 사용되는 Token
*
* 참고: 여기서는 DEMO 디버깅에만 사용됩니다. 프로덕션 환경에서는 Token을 서버에 보관하고 서버에서 서명 알고리즘을 구현하고 API를 통해 프런트엔드가 서명을 가져오기 위해 호출하도록 제공합니다. 자세한 내용은 다음을 참고하십시오.
* [서명 알고리즘](https://cloud.tencent.com/document/product/616/71370#.E7.AD.BE.E5.90.8D.E6.96.B9.E6.B3.95)
*/
const token = ''; // 자신의 매개변수 입력

Component({
data: {
makeupList: [],
stickerList: [],
filterList: [],
recording: false
},
methods: {
async getCanvasNode(id) {
return new Promise((resolve) => {
this.createSelectorQuery()
.select(`#${id}`)
.node()
.exec((res) => {
const canvasNode = res[0].node;
resolve(canvasNode);
});
});
},
getSignature() {
const timestamp = Math.round(new Date().getTime() / 1000);
const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase();
return { signature, timestamp };
},
// 카메라 유형 초기화
async initSdkCamera() {
// 화면 canvas를 가져옵니다. sdk는 처리된 이미지를 실시간으로 canvas에 출력합니다.
const outputCanvas = await this.getCanvasNode("main-canvas");
// 인증 정보 가져오기
const auth = {
licenseKey: LICENSE_KEY,
appId: APP_ID,
authFunc: this.getSignature
};
// SDK 초기화 매개변수 구성
const config = {
auth,
camera: {
width:720,
height:1280,
},
output: outputCanvas,
// 초기 뷰티 효과(선택사항)
beautify: {
whiten: 0.1, // 브라이트닝 효과. 값 범위: 0-1
dermabrasion: 0.3, // 매끄러운 피부 효과. 값 범위: 0-1
lift: 0, // 날씬한 얼굴 효과. 값 범위: 0-1
shave: 0, // V 라인 효과. 값 범위: 0-1
eye: 0.2, // 큰 눈 효과. 값 범위: 0–1
chin: 0, // 턱 효과. 값 범위: 0–1
}
};
const ar = new ArSdk(config);
// 내장 효과 및 필터 목록은 created 콜백에서 가져올 수 있습니다
ar.on('created', () => {
// 내장된 메이크업 효과 및 스티커 목록 가져오기
ar.getEffectList({
Type: 'Preset'
}).then((res) => {
const list = res.map(item => ({
name: item.Name,
id: item.EffectId,
cover: item.CoverUrl,
url: item.Url,
label: item.Label,
type: item.PresetType,
}));
const makeupList = list.filter(item=>item.label.indexOf('메이크업')>=0)
const stickerList = list.filter(item=>item.label.indexOf('스티커')>=0)
// 효과 목록 렌더링
this.setData({
makeupList,
stickerList
});
}).catch((e) => {
console.log(e);
});
// 내장 필터
ar.getCommonFilter().then((res) => {
const list = res.map(item => ({
name: item.Name,
id: item.EffectId,
cover: item.CoverUrl,
url: item.Url,
label: item.Label,
type: item.PresetType,
}));
// 필터 목록 렌더링
this.setData({
filterList: list
});
}).catch((e) => {
console.log(e);
});
});
// ready 콜백에서 뷰티 필터 및 효과를 설정할 수 있습니다.
ar.on('ready', (e) => {
this._sdkReady = true
});

ar.on('error', (e) => {
console.log(e);
});

this.ar = ar
},
// 뷰티 필터 매개변수를 변경합니다. sdk가 ready되었는지 확인해야 합니다.
onChangeBeauty(val){
if(!this._sdkReady) return
// setBeautify를 통해 뷰티 효과를 설정할 수 있습니다. 6개의 속성이 지원됩니다. 자세한 내용은 SDK 통합 가이드를 참고하십시오.
this.ar.setBeautify({
dermabrasion: val.dermabrasion, // 매끄러운 피부 효과. 값 범위: 0–1
});
},
// 메이크업 스타일을 변경합니다. sdk가 ready되었는지 확인하십시오.
onChangeMakeup(id, intensity){
if(!this._sdkReady) return
// setEffect를 사용하여 효과를 구성합니다. setEffect의 입력 매개변수는 SDK 통합 가이드에 설명된 대로 세 가지 형식일 수 있습니다.
this.ar.setEffect([{id, intensity}]);
},
// 스티커를 변경합니다. sdk가 ready되었는지 확인하십시오.
onChangeSticker(id, intensity){
if(!this._sdkReady) return
// setEffect를 사용하여 효과를 구성합니다. setEffect의 입력 매개변수는 SDK 통합 가이드에 설명된 대로 세 가지 형식일 수 있습니다.
this.ar.setEffect([{id, intensity}]);
},
// 필터를 변경합니다. sdk가 ready되었는지 확인하십시오.
onChangeFilter(id, intensity){
if(!this._sdkReady) return
// setFilter를 사용하여 필터를 구성합니다. 두 번째 매개변수는 필터 강도를 나타냅니다. 값 범위: 0–1
this.ar.setFilter(id, 1);
}
}
})

5단계: 사진 캡처 및 녹화 기능 구현

예시 코드는 다음과 같습니다.
카메라
레코딩
SDK는 너비, 높이 및 buffer 데이터를 포함하는 객체를 반환하며 페이지의 사전 설정된 2d canvas(위 코드에서 id는 photo-canvas)에 데이터를 그리고 이미지 파일로 내보낼 수 있습니다.
async takePhoto() {
const {uint8ArrayData, width, height} = this.ar.takePhoto(); // takePhoto 메소드는 현재 이미지의 buffer 데이터를 반환합니다
const photoCanvasNode = await this.getCanvasNode('photo-canvas');
photoCanvasNode.width = parseInt(width);
photoCanvasNode.height = parseInt(height);
const ctx = photoCanvasNode.getContext('2d');
// sdk에서 반환한 데이터로 ImageData 객체를 생성합니다
const imageData = photoCanvasNode.createImageData(uint8ArrayData, width, height);
// canvas에 ImageData 객체를 그립니다
ctx.putImageData(imageData,0,0,0,0,width,height);
// canvas를 로컬 이미지로 저장
wx.canvasToTempFilePath({
canvas: photoCanvasNode,
x: 0,
y: 0,
width: width,
height: height,
destWidth: width,
destHeight: height,
success: (res) => {
// 사진 저장
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath
});
}
})
}
Component({
methods: {
// 레코딩 시작
startRecord() {
this.setData({
recording: true
});
this.ar.startRecord()
}
// 레코딩 중지
async stopRecord() {
const res = await this.ar.stopRecord();
// 레코딩 저장
wx.saveVideoToPhotosAlbum({
filePath: res.tempFilePath
});
this.setData({
recording: false
});
}
}
})
미니프로그램이 백그라운드로 전환되거나 화면이 잠긴 경우 stopRecord를 호출하여 레코딩을 중지하고 다시 페이지를 열면 SDK를 다시 시작할 수 있습니다.
onShow() {
this.ar && this.ar.start();
},
onHide() {
this.ar && this.ar.stop();
},
async onUnload() {
try {
this.ar && this.ar.stop();
if (this.data.recording) {
await this.ar.stopRecord({
destroy: true,
});
}
} catch (e) {
}
this.ar && this.ar.destroy();
}

예시 코드

예시 코드를 다운로드하고 압축을 푼 후 ar-miniprogram 코드 디렉터리를 볼 수 있습니다.