tencent cloud

// 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 (optional))
import '../../miniprogram_npm/tencentcloud-webar/lib.js';
import '../../miniprogram_npm/tencentcloud-webar/core.js';
// Initialize the 3D plugin (optional)
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";

// wxml
// Open the camera and hide it by setting `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 and 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 ----- */

/**
 * Your Tencent Cloud account's APPID
 * 
 * You can view your APPID in the [Account Center](https://console.cloud.tencent.com/developer).
 */
const APPID = ''; // Enter your APPID

/**
 * Web LicenseKey
 * 
 * On the [Web Licenses](https://console.cloud.tencent.com/vcube/web) page of the RT-Cube console, create a project, and a `LicenseKey` will be automatically generated.
 */
const LICENSE_KEY = ''; // Enter the license key of your project

/**
 * The token used to calculate the signature
 * 
 * Note: The sample code is for demo debugging only. In the production environment, save the token and calculate the signature on the server. Provide the signature when the frontend calls an API to request it. 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 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 };
        },
        // 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 effects. 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);
        }
    }
})