이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
Integrating Beauty AR Web into Mini Programs

Preparations
For more information on how to get started with mini program development, see the Weixin Mini Program documentation.
Read Overview to learn about how to use the Beauty AR Web SDK.
Getting Started
Step 1. Configure the domain allowlist on the mini program backend
As the SDK internally will request the backend to perform authentication and load resources, you need to configure the domain allowlist on the mini program backend after creating the mini program.
1. Open the mini program backend and go to Development > Development Management > Development Settings > Server Domain Name.
2. Click Modify, configure the following domain names, and save them.
Request domain name:
https://webar.qcloud.com;
https://webar-static.tencent-cloud.com;
https://aegis.qq.com;
The URL of the authentication signature API (`get-ar-sign`)
downloadFile domain name:
https://webar-static.tencent-cloud.com
Step 2. Install the SDK and build the npm
For more information on the mini program npm package, see Using npm in Mini Program.
1. Install:
npm install tencentcloud-webar
2. Build:
Open the DevTools tool and select Tools > Build npm on the topbar.
3. Configure the path of workers in app.json:
"workers": "miniprogram_npm/tencentcloud-webar/worker"
Step 3. Import files
// The import method for versions earlier than 0.3.0 (one file)
// import "../../miniprogram_npm/tencentcloud-webar/lib.js";
// The import method for v0.3.0 or later (two files and the 3D module, which can be initialized as needed)
import '../../miniprogram_npm/tencentcloud-webar/lib.js';
import '../../miniprogram_npm/tencentcloud-webar/core.js';
// Initialize the 3D plugin as needed. If 3D is not needed, the following can be skipped:
import '../../miniprogram_npm/tencentcloud-webar/lib-3d.js';
import { plugin3d } from '../../miniprogram_npm/tencentcloud-webar/plugin-3d'
// Import `ArSdk`
import { ArSdk } from "../../miniprogram_npm/tencentcloud-webar/index.js";
Note
As mini programs require that a single file cannot exceed 500 KB, the SDK is provided through two JS files.
Starting from v0.3.0, the SDK is further split to support 3D, and the 3D module can be loaded as needed. Before import, check the current SDK version and select the corresponding import method.
Step 4. Initialize the SDK
Note
Before initializing the SDK in the mini program, you must configure the mini program APPID in the console as instructed in Getting Started.
You need to insert the camera label into the page to open the camera, and then set the camera parameters as detailed in Overview.
Mini programs do not support getOutput, so you need to pass in an onscreen WebGL canvas, and the SDK will directly output the image onto this canvas.
Sample code:
// wxml
// Open the camera and hide it through `position`
<camera 
  device-position="{{'front'}}" 
  frame-size="large" flash="off" resolution="medium" 
  style="width: 750rpx; height: 134rpx;position:absolute;top:-9999px;" 
/>
// The SDK outputs the processed image to the canvas in real time.
<canvas 
  type="webgl"
  canvas-id="main-canvas"
  id="main-canvas"
  style="width: 750rpx; height: 1334rpx;">
</canvas>
// Take a photo to draw the `ImageData` object onto the canvas
<canvas 
  type="2d" 
  canvas-id="photo-canvas" 
  id="photo-canvas" 
  style="position:absolute;width:720px;height:1280px;top:-9999px;left:-9999px;">
</canvas>
// js
/** ----- Authentication configuration ----- */
﻿
/**
 * `APPID` of your Tencent Cloud account
 * 
 * Go to the [Account Center](https://console.cloud.tencent.com/developer) to view the `APPID`.
 */
const APPID = ''; // Enter your own parameter
﻿
/**
 * Web LicenseKey
 * 
 * On the [**Web licenses**](https://console.cloud.tencent.com/vcube/web) page of the [RT-Cube console], create a project to get the `LicenseKey`.
 */
const LICENSE_KEY = ''; // Enter your own parameter
﻿
/**
 * The token used to calculate the signature
 * 
 * Note: Here, it is used for demo debugging only. In the production environment, keep the token on the server, and implement the signature algorithm on the server and provide it through the API for the frontend to call to pull the signature. For more information, see
 * [Signature algorithm](https://cloud.tencent.com/document/product/616/71370#.E7.AD.BE.E5.90.8D.E6.96.B9.E6.B3.95)
 */
const token = ''; // Enter your own parameter
﻿
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 };
        },
        // Initialize the camera type    
        async initSdkCamera() {
            // Get the onscreen canvas. The SDK will output the processed image to the canvas in real time.
            const outputCanvas = await this.getCanvasNode("main-canvas");
            // Get the authentication information
            const auth = {
                licenseKey: LICENSE_KEY,
                appId: APP_ID,
                authFunc: this.getSignature
            };
            // Construct SDK initialization parameters
            const config = {
                auth,
                camera: {
                    width:720,
                    height:1280,
                },
                output: outputCanvas,
                // Initial beauty effects (optional)
                beautify: {
                    whiten: 0.1, // The brightening effect. Value range: 0–1.
                    dermabrasion: 0.3, // The smooth skin effect. Value range: 0–1.
                    lift: 0, // The slim face effect. Value range: 0–1.
                    shave: 0, // The V shape effect. Value range: 0–1.
                    eye: 0.2, // The big eyes effect. Value range: 0–1.
                    chin: 0, // The chin effect. Value range: 0–1.
                }
            };
            const ar = new ArSdk(config);
            // The list of built-in effects and filters can be obtained in the `created` callback.
            ar.on('created', () => {
                // Get the list of built-in makeup effects and stickers
                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('makeup')>=0)
                    const stickerList = list.filter(item=>item.label.indexOf('sticker')>=0)
                    // Render the list of effects
                    this.setData({
                        makeupList,
                        stickerList
                    });
                }).catch((e) => {
                    console.log(e);
                });
                // Built-in filters
                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,
                    }));
                    // Render the list of filters
                    this.setData({
                        filterList: list
                    });
                }).catch((e) => {
                    console.log(e);
                });
            });
            // You can set beauty filters and effects in the `ready` callback.
            ar.on('ready', (e) => {
                this._sdkReady = true
            });
﻿
            ar.on('error', (e) => {
                console.log(e);
            });
﻿
            this.ar = ar
        },
        // Change the beauty filter parameters. Make sure the SDK is ready.
        onChangeBeauty(val){
            if(!this._sdkReady) return
            // You can set beauty effects through `setBeautify`. Six attributes are supported. For more information, see the SDK integration guide.
            this.ar.setBeautify({
                dermabrasion: val.dermabrasion, // The smooth skin effect. Value range: 0–1.
            });
        },
        // Change the makeup style. Make sure the SDK is ready.
        onChangeMakeup(id, intensity){
            if(!this._sdkReady) return
            // Use `setEffect` to configure the effect. Its input parameters can be in three formats as described in the SDK integration guide.
            this.ar.setEffect([{id, intensity}]);
        },
        // Change the sticker. Make sure the SDK is ready.
        onChangeSticker(id, intensity){
            if(!this._sdkReady) return
            // Use `setEffect` to configure the effect. Its input parameters can be in three formats as described in the SDK integration guide.
            this.ar.setEffect([{id, intensity}]);
        },
        // Change the filter. Make sure the SDK is ready.
        onChangeFilter(id, intensity){
            if(!this._sdkReady) return
            // Use `setFilter` to configure the filter. The second parameter indicates the filter strength. Value range: 0–1.
            this.ar.setFilter(id, 1);
        }
    }
})
Step 5. Implement the photo capturing and recording features
Sample code:
Camera
Recording
The SDK will return an object containing the width, height, and buffer data, and you can draw the data on the preset 2D canvas (in the above code, id is photo-canvas.) on your page and export it as an image file.
async takePhoto() {
    const {uint8ArrayData, width, height} = this.ar.takePhoto(); // The `takePhoto` method returns the buffer data of the current image.
    const photoCanvasNode = await this.getCanvasNode('photo-canvas');
    photoCanvasNode.width = parseInt(width);
    photoCanvasNode.height = parseInt(height);
    const ctx = photoCanvasNode.getContext('2d');
    // Create the `ImageData` object with the data returned by the SDK
    const imageData = photoCanvasNode.createImageData(uint8ArrayData, width, height);
    // Draw the `ImageData` object onto the canvas
    ctx.putImageData(imageData,0,0,0,0,width,height);
    // Save the canvas as a local image
    wx.canvasToTempFilePath({
        canvas: photoCanvasNode,
        x: 0,
        y: 0,
        width: width,
        height: height,
        destWidth: width,
        destHeight: height,
        success: (res) => {
            // Save the photo
            wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath
            });
        }
    })
}
Component({
    methods: {
        // Start recording
        startRecord() {
            this.setData({
                recording: true
            });
            this.ar.startRecord()
        }
        // Stop recording
        async stopRecord() {
            const res = await this.ar.stopRecord();
            // Save the recording
            wx.saveVideoToPhotosAlbum({
                filePath: res.tempFilePath
            });
            this.setData({
                recording: false
            });
        }
    }
})
When the mini program is switched to the background or the screen is locked, stopRecord needs to be called to stop recording, and the SDK can be started again when the page is opened again.
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();
}
Sample Code
You can download the sample code, decompress it, and view the ar-miniprogram code directory.
Preparations
Getting Started
Sample Code