产品动态
关于腾讯特效 SDK V3.5 版本更新公告
关于腾讯特效 SDK V3.0 版本相关接口及素材变更公告
https://webar.qcloud.com;https://webar-static.tencent-cloud.com;https://aegis.qq.com;以及上述签名接口（get-ar-sign）的地址
https://webar-static.tencent-cloud.com
npm install tencentcloud-webar
"workers": "miniprogram_npm/tencentcloud-webar/worker"
// 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'// 导入 ArSdkimport { ArSdk } from "../../miniprogram_npm/tencentcloud-webar/index.js";
// wxml//打开相机<cameradevice-position="{{'front'}}"frame-size="large" flash="off" resolution="medium"style="width: 750rpx; height: 134rpx;position:absolute;top:-9999px;"/>//sdk 将处理完的画面实时输出到此 canvas 上<canvastype="webgl"canvas-id="main-canvas"id="main-canvas"style="width: 750rpx; height: 1334rpx;"></canvas>//拍照将 ImageData 对象绘制到此 canvas 上<canvastype="2d"canvas-id="photo-canvas"id="photo-canvas"style="position:absolute;width:720px;height:1280px;top:-9999px;left:-9999px;"></canvas>// jsComponent({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 = sdksdk.setBeautify({whiten: 0.2});sdk.on('created', () => {// 可以在回调中处理业务逻辑，详见[参数与方法]()})}}})
string 类型的图片链接。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});}})}})
Component({methods: {// 开始录像startRecord() {this.sdk.startRecord()}// 结束录像async stopRecord() {const res = await this.sdk.stopRecord();// 保存录像到本地wx.saveVideoToPhotosAlbum({filePath: res.tempFilePath})}}})
文档反馈