腾讯特效SDK小程序端接入_音视频解决方案_同尘科技

小程序端接入需要自备小程序，详细请参见 微信小程序文档。

接入小程序拍摄场景

步骤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'// 导入 ArSdkimport { ArSdk } from "../../miniprogram_npm/tencentcloud-webar/index.js";

注意小程序有单文件不超过 500kb 的限制，因此 SDK 分为多个 js 文件提供。0.3.0版本之后，对 SDK 进行了进一步的拆分，新增3D支持，针对3D模块提供按需加载方式，导入前请确认当前使用的 SDK 版本信息，选择对应的导入方式。

步骤4：初始化实例

// wxml//打开相机//sdk 将处理完的画面实时输出到此 canvas 上//拍照将 ImageData 对象绘制到此 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 = sdk            sdk.setBeautify({                whiten: 0.2            });            sdk.on('created', () => {                // 可以在回调中处理业务逻辑，详见[参数与方法]()            })        }    }})

注意小程序初始化 SDK 前须在控制台配置小程序 APPID。由于小程序的特性与 Web 不同，因此小程序支持的 input 参数目前只有string类型的图片链接。相机配置与 Web 相同，input 参数不传，直接设置 camera 参数，前提是页面中必须插入 camera 标签。小程序不支持 getOutput，需要自行传入一个在屏的 WEBGL canvas，SDK 直接输出到此 canvas。

步骤5：拍照与录像

小程序端支持拍照和录像功能。拍照录像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            })        }    }})

接入小程序直播场景

小程序直播接入美颜特效 SDK 流程与小程序拍摄场景不同，详情请参考 结合云直播的小程序推流美颜。

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案