뷰티 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 코드 디렉터리를 볼 수 있습니다.
준비 작업
시작하기
예시 코드