小程序端接入

小程序端接入需要自备小程序，详细请参见 微信小程序文档。 
接入小程序项目
步骤1：配置域名白名单
SDK 内部会请求后台进行鉴权和资源加载，需要在小程序后台配置域名白名单。
1. 进入 小程序后台，进入 开发 > 开发管理 > 开发设置 > 服务器域名。
2. 单击修改，配置以下域名并保存。
请求域名：
https://webar.qcloud.com;
https://webar-static.tencent-cloud.com;
https://aegis.qq.com;
以及上述签名接口（get-ar-sign）的地址
downloadFile 域名：
https://webar-static.tencent-cloud.com
步骤2：安装并构建 npm
1. 安装：
npm install tencentcloud-webar
2. 单击开发者工具菜单 > 工具 > 构建 npm。
3. 在 app.json 中配置 workers 路径：
"workers": "miniprogram_npm/tencentcloud-webar/worker"
步骤3：引入文件
// 0.3.0之前版本引用方式（1个文件）
// import "../../miniprogram_npm/tencentcloud-webar/lib.js";
// 0.3.0及之后版本引用方式（2个文件 + 按需初始化3d模块）
import '../../miniprogram_npm/tencentcloud-webar/lib.js';
import '../../miniprogram_npm/tencentcloud-webar/core.js';
// 按需初始化3d插件，如果不需要3d则可以不引用
import '../../miniprogram_npm/tencentcloud-webar/lib-3d.js';
import { plugin3d } from '../../miniprogram_npm/tencentcloud-webar/plugin-3d'
// 导入 ArSdk
import { ArSdk } from "../../miniprogram_npm/tencentcloud-webar/index.js";
注意
小程序有单文件不超过 500kb 的限制，因此 SDK 分为多个 js 文件提供。
0.3.0版本之后，对 SDK 进行了进一步的拆分，新增3D支持，针对3D模块提供按需加载方式，导入前请确认当前使用的 SDK 版本信息，选择对应的导入方式。
步骤4：初始化实例
// wxml
//打开相机
<camera 
    device-position="{{'front'}}" 
    frame-size="large" flash="off" resolution="medium" 
    style="width: 750rpx; height: 134rpx;position:absolute;top:-9999px;" 
/>
//sdk 将处理完的画面实时输出到此 canvas 上
<canvas 
    type="webgl"
    canvas-id="main-canvas"
    id="main-canvas"
    style="width: 750rpx; height: 1334rpx;">
</canvas>
//拍照将 ImageData 对象绘制到此 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);
                    });
            });
        },
﻿
        // 初始化相机类型    
        async initSdkCamera() {
            // 获取在屏的 canvas，sdk 会将处理完的画面实时输出到 canvas 上
            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 // 0.3.0之后版本写法，按需初始化3d模块，如不需要3d模块，可以省略此参数。
            });
            this.sdk = sdk
            sdk.setBeautify({
                whiten: 0.2
            });
            sdk.on('created', () => {
                // 可以在回调中处理业务逻辑，详见[参数与方法]()
            })
        }
    }
})
注意
小程序初始化 SDK 前须在控制台配置小程序 APPID。
由于小程序的特性与 Web 不同，因此小程序支持的 input 参数目前只有 string 类型的图片链接。
相机配置与 Web 相同，input 参数不传，直接设置 camera 参数，前提是页面中必须插入 camera 标签。
小程序不支持 getOutput，需要自行传入一个在屏的 WEBGL canvas，SDK 直接输出到此 canvas。
拍照与录像
小程序端支持拍照和录像功能。
拍照
录像
SDK 会返回包含宽高和 buffer 数据的对象，用户可以通过自己页面内的 2d canvas 绘制此数据并导出为图片文件。
Component({
    ...
    async takePhoto() {
        const {uint8ArrayData, width, height} = this.sdk.takePhoto(); // takePhoto 方法返回当前画面的 buffer 数据
        const photoCanvasNode = await this.getCanvasNode('photo-canvas');
        photoCanvasNode.width = parseInt(width);
        photoCanvasNode.height = parseInt(height);
        const ctx = photoCanvasNode.getContext('2d');
        // 用 sdk 返回的数据创建 ImageData 对象
        const imageData = photoCanvasNode.createImageData(uint8ArrayData, width, height);
        // 将 ImageData 对象绘制到 canvas 上
        ctx.putImageData(imageData,0,0,0,0,width,height);
        // 将 canvas 保存为本地图片
        wx.canvasToTempFilePath({
            canvas: photoCanvasNode,
            x: 0,
            y: 0,
            width: width,
            height: height,
            destWidth: width,
            destHeight: height,
            success: (res) => {
                // 保存照片到本地
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath
                });
            }
        })
    }
})
注意
 当小程序切换后台或检测到手机锁屏时，需要调用 stopRecord 停止录像，否则可能出错。
Component({
    methods: {
        // 开始录像
        startRecord() {
            this.sdk.startRecord()
        }
        // 结束录像
        async stopRecord() {
            const res = await this.sdk.stopRecord();
            // 保存录像到本地
            wx.saveVideoToPhotosAlbum({
                filePath: res.tempFilePath
            })
        }
    }
})
﻿
接入小程序项目
拍照与录像