tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Effect SDK
    Documentation
    Download PDF

    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
                  })
              }
          }
      })
      
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy