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, 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";

// 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);
        }
    }
})