tencent cloud

Integration into Mini Program
Download PDF
Last updated:2023-04-21 15:36:13
Integration into Mini Program
Last updated: 2023-04-21 15:36:13
Download PDF
For how to develop a Mini Program, see Weixin Mini Program documentation.

Integrating the SDK

Step 1. Configure a domain allowlist

As the SDK will request the backend to perform authentication and load resources, you need to configure a domain allowlist on the Mini Program backend.
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 names:
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 and build the npm package

1. Install:
npm install tencentcloud-webar
2. Open Weixin DevTools 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 the 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 (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";
Note
Because Mini Program has a 500 KB limit for file size, the SDK is provided as multiple JS files.
Starting from v0.3.0, the SDK is further split to support 3D. The 3D module can be loaded as needed. Before import, check your SDK version and use the corresponding import method.

Step 4. Initialize an instance

// wxml
//Open the camera
<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
Component({
    methods: {
        async getCanvasNode(id) {
            return new Promise((resolve) => {
                this.createSelectorQuery()
                    .select(`#${id}`)
                    .node()
                    .exec((res) => {
                        const canvasNode = res[0].node;
                        resolve(canvasNode);
                    });
            });
        },

        // 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");
            const sdk = new ArSdk({
                camera: {
                    width:720,
                    height:1280,
                },
                output: outputCanvas,
                loading: {
                    enable: false,
                },
                auth: {
                    licenseKey: LICENSE_KEY,
                    appId: APP_ID,
                    authFunc: authFunc
                },
                plugin3d: plugin3d // You can ignore this parameter (only available in v0.3.0 and later versions) if you don't need the 3D module.
            });
            this.sdk = sdk
            sdk.setBeautify({
                whiten: 0.2
            });
            sdk.on('created', () => {
                // You can add your business logic in this callback. For details, see "Parameters and APIs".
            })
        }
    }
})
Note
Before initializing the SDK, you need to configure the Mini Program APPID in the RT-Cube console
Unlike web, for Mini Programs, the input parameter must be an image URL string.
Camera configuration is the same as that for web. Pass in the camera parameters instead of input. Make sure you have already inserted a camera tag in your page.
Mini Program does not support getOutput, so you need to pass in an onscreen WebGL canvas. The SDK will output images onto this canvas.

Photo Taking and Shooting

The SDK works for both photo taking and shooting in a Mini Program.
Photo
Shooting
The SDK will return an object containing the width, height, and buffer data. You can draw the data onto the 2D canvas on your page and export it as an image file.
Component({
    ...
    async takePhoto() {
        const {uint8ArrayData, width, height} = this.sdk.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 an `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
                });
            }
        })
    }
})
Note
When the Mini Program is switched to the background or the screen is locked, call stopRecord to stop shooting. If you don't do this, an error may occur.
Component({
    methods: {
        // Start shooting
        startRecord() {
            this.sdk.startRecord()
        }
        // Stop shooting
        async stopRecord() {
            const res = await this.sdk.stopRecord();
            // Save the video
            wx.saveVideoToPhotosAlbum({
                filePath: res.tempFilePath
            })
        }
    }
})

Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback