腾讯特效SDK结合 TRTC 的小程序推流_音视频解决方案_同尘科技

本文档指导您使用 TRTC 接入 Web 美颜特效，并使用相关功能。

准备工作

小程序开发入门请参见 微信小程序文档。请阅读 Web 美颜特效 SDK 接入指南，熟悉 SDK 基本用法。请阅读 TRTC 小程序文档，了解 TRTC WX SDK 基本用法，并完成基础设置。

环境要求

由于微信开发者工具不支持原生组件（即 live-pusher 和 live-player 标签），需要在真机上进行运行体验。使用 live-pusher 标签进行直播美颜，微信版本需大于等于 8.0.31，否则无法开启美颜。

前提条件

注意：您已 注册腾讯云 账号，并完成 实名认证。开通小程序类目与推拉流标签权限（如不开通则无法正常使用）。 关于 TRTC 使用详情，请查阅 此文档。符合类目要求的小程序，需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限，如下图所示：

开始使用

步骤一：小程序后台配置域名白名单

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

步骤二：安装并构建 npm

小程序 npm 相关请参见 小程序使用 npm。1. 安装：注意：webar 从 1.0.18 版本开始支持此推流方案，请保证 webar 版本大于 1.0.18。关于 trtc-wx-sdk 具体使用，请阅读 此文档。

npm install tencentcloud-webar@1.0.18

npm install trtc-wx-sdk

2. 构建： 打开小程序开发者工具，顶部菜单选择工具 > 构建 npm。3. 在 app.json 中配置 workers 路径：

"workers": "miniprogram_npm/tencentcloud-webar/worker"

步骤三：引入文件

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";// 导入 trtc sdkimport TRTC from "trtc-wx-sdk";

注意：小程序有单文件不超过500kb的限制，因此 SDK 分为两个 js 文件提供。

步骤四：初始化 SDK

注意：小程序初始化 SDK 前须在控制台配置小程序 APPID，请参见 快速上手。需在页面中插入 live-pusher 标签来打开相机并开启推流，然后设置 live-pusher 参数，参数配置详情请参见 此文档。直播模式下，ArSdk 实例化时需将原有 camera 参数替换为 live 参数。

live: {  pusherContext: LivePusherContext,  fps: 'low' | 'high', // 默认low，仅 mode 为 custom 时生效，开启高帧的情况下，部分设备性能无法支持，建议根据设备性能进行差异化设置。  mode: 'custom' | 'native', // 默认custom，可使用除虚拟背景外全部 Arsdk 功能， native模式使用微信底层功能实现了虚拟背景，但 Arsdk 原有功能将无法使用。}

步骤五：使用 custom 模式设置美颜

注意：mode 为 custom 时，live-pusher 标签必须要设置enableVideoCustomRender="{{true}}"，live-pusher 其他自带功能将失效。mode 为 custom 时，需要设置样式宽高来决定摄像头画面大小。宽度的最大设置为720，将默认值设置为0，并在后续调用 ArSdk.getRealSize(720)方法进行设置。建议将宽高总是设置为ArSdk.getRealSize(720)，在720P的情况下，iOS 的画面效果较好。

getRealSize(width: number, resolution?: '9:16' | '3:4' ): {width:number, height:number}

ArSdk.getRealSize将根据宽度及分辨率，返回符合 Android 及 iOS 规范的 width，height 参数，将此值设置到 live-pusher 样式上即可。mode 为 custom 时，需要自行传入一个在屏的 webgl canvas，SDK 直接输出画面到此 canvas 上，且此 canvas 的宽高比例必须和摄像头画面的分辨率一致（iOS 为9:16，Android 为3:4），否则会出现黑边。示例代码如下：

// wxml      // jsasync initWebAR() {  // live-pusher样式的宽高必须使用此方法设置，否则 Android 可能会出现花屏  const { width, height } = ArSdk.getRealSize(720);   this.setData({ width, height });  const pusherContext = wx.createLivePusherContext("pusher");  this.data.pusherContext = pusherContext;  const canvas = await this.getCanvasNode("main-canvas");  const sdk = new ArSdk({    live: { // 重要！！直播方案中，必须使用live代替camera参数      pusherContext,      fps: 'low',      mode: 'custom',    },    output: canvas,    loading: {      enable: false,    },    beautify: _beauty, // 默认自带一点美颜    auth: {      licenseKey: LICENSE_KEY,      appId: APP_ID,      authFunc,    },    language: app.globalData.language,    plugin3d,  });},initTrtc() {  this.TRTC = new TRTC(this);  const pusherConfig = {    beautyLevel: 9,  };  this.setData({    pusher: this.TRTC.createPusher(pusherConfig),  });  this.bindEvent();  this.enterRoom();},onLoad(options) {  this.initWebAR();  this.initTrtc();},// ...

步骤六：使用 native 模式设置虚拟背景

注意：mode 为 native 时, live-pusher 标签必须要设置custom-effect="{{true}}"，enableVideoCustomRender="{{false}}"，且 live-pusher 其他自带功能均可使用，故可配合skin-whiteness、skin-smoothness、face-thinness、eye-bigness等预设参数进行美颜。mode 为 native 时，目前仅可使用虚拟背景功能，后续将支持滤镜等其他功能。背景图片格式仅支持 png 格式，且图片 url 需加入微信小程序请求域名白名单。示例代码如下：

// wxml;// jsasync initWebAR() {  const pusherContext = wx.createLivePusherContext("pusher");  this.data.pusherContext = pusherContext;  const sdk = new ArSdk({    live: {      // 重要！！直播方案中，必须使用live代替camera参数      pusherContext,      mode: "native",    },    auth: {      licenseKey: LICENSE_KEY,      appId: APP_ID,      authFunc,    },    // 无需其他参数  });  sdk.on("ready", (_) => {    sdk.setBackground({      type: "image",      src: "https://monitor-1258344699.cos.ap-guangzhou.myqcloud.com/tree-1611056_1280.png"    });  });}initTrtc() {  // 同 custom 模式}

代码示例

您可以下载 示例代码 解压后查看trtc代码目录。

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

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

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

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