腾讯特效 SDK 结合 TRTC（5.x 版本）推流

一、准备工作

·请阅读 Web 美颜特效 SDK 接入指南，熟悉 SDK 基本用法。

·请阅读 TRTC 快速集成(Web)，了解 TRTC Web SDK 基本用法，并完成基础设置。

·请阅读 TRTC 快速跑通 Web Demo，并先尝试在本地项目中运行 TRTC Web Demo。

二、步骤1：Web 美颜特效 SDK 引入

在页面（PC Web 端）中引入 js 脚本：

注意：这里是示例项目，为了方便使用 script 标签方式引入，你也可以参见接入指南中的方法，用 npm 包的方式引入。

三、步骤2：理解 TRTC 流初始化逻辑

1. 在 TRTC 的 Demo 项目里，查看 TRTC 进房过程，进房后，TRTC 通过 startLocalVideo 和 startLocalAudio 方法对本地设备进行采集，创建流对象并发布到房前房间中：

const trtc = TRTC.create();await trtc.enterRoom({ roomId: 8888, sdkAppId, userId, userSig });// 采集默认麦克风并发布await trtc.startLocalAudio();// 采集cameraList的摄像头并发布await trtc.startLocalVideo({ view: document.getElementById("localVideo"), // 在 id 为 localVideo 的元素中预览视频});

以上为最基本的采集本地音视频流并发布到指定房间中的方式。

2. TRTC 提供了 updateLocalVideo 接口，用于更新视频流，我们可以使用自定义采集的方式，获取美颜处理过的流，传递给此接口使用。

// 获取自定义的streamconst stream = await ar.getOutput();// 更新 trtc 的视频流await trtc.updateLocalVideo({ option: { videoTrack: mediaStream.getVideoTracks()[0] },});

3. 为了获取经过美颜处理的自定义流，我们需要先初始化 Web 美颜特效 SDK。

四、步骤3：初始化 Web 美颜特效 SDK

示例代码如下：

const { ArSdk } = window.AR/** —– 鉴权配置 —– *//** * 腾讯云账号 APPID * * 进入[腾讯云账号中心](https://console.cloud.tencent.com/developer) 即可查看 APPID */const APPID = ''; // 此处请填写你自己的参数/** * Web LicenseKey * * 登录音视频终端 SDK 控制台的[Web License 管理](https://console.cloud.tencent.com/vcube/web)，创建项目即可获得 LicenseKey */const LICENSE_KEY = ''; // 此处请填写你自己的参数/** * 计算签名用的密钥 Token * * 注意：此处仅用于 DEMO 调试，正式环境中请将 Token 保管在服务端，签名方法迁移到服务端实现，通过接口提供，前端调用拉取签名，参考 * [签名方法](https://cloud.tencent.com/document/product/616/71370#.E7.AD.BE.E5.90.8D.E6.96.B9.E6.B3.95) */const token = ''; // 此处请填写你自己的参数/** ———————– *//** * 定义获取签名方法 * * 注意：此处方案仅适用于 DEMO 调试，正式环境中签名方法推荐在服务端实现，通过接口提供，前端调用拉取签名 * 如： * async function () { * return fetch('http://xxx.com/get-ar-sign').then(res => res.json()); * }; */const getSignature = function () { const timestamp = Math.round(new Date().getTime() / 1000); const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase(); return { signature, timestamp };};// 获取 trtc 未处理过的的视频流const arInputStream = new MediaStream([trtc.getVideoTrack()]);// ar sdk 基础配置参数const config = { input: arInputStream, auth: { licenseKey: LICENSE_KEY, appId: APPID, authFunc: getSignature }, // 初始美颜效果（可选参数） beautify: { whiten: 0.1, // 美白 0-1 dermabrasion: 0.5, // 磨皮 0-1 lift: 0.3, // 瘦脸 0-1 shave: 0, // 削脸 0-1 eye: 0, // 大眼 0-1 chin: 0, // 下巴 0-1 }}// config 传入 ar sdkconst ar = new ArSdk(config);// created回调里可以获取内置特效与滤镜列表进行界面展示ar.on('created', () => { // 获取内置美妆、贴纸 ar.getEffectList({ Type: 'Preset' }).then((res) => { const list = res.map(item => ({ name: item.Name, id: item.EffectId, cover: item.CoverUrl, url: item.Url, label: item.Label, type: item.PresetType, })); const makeupList = list.filter(item=>item.label.indexOf('美妆')>=0) const stickerList = list.filter(item=>item.label.indexOf('贴纸')>=0) }).catch((e) => { console.log(e); }); // 获取内置滤镜 ar.getCommonFilter().then((res) => { const filterList = res.map(item => ({ name: item.Name, id: item.EffectId, cover: item.CoverUrl, url: item.Url, label: item.Label, type: item.PresetType, })); }).catch((e) => { console.log(e); });});ar.on('ready', (e) => { // 在 ready 回调里及该事件之后，可使用下述接口来设置相应的美颜特效 // ar.setBeautify() 设置美颜 // ar.setEffect() 设置美妆、贴纸 // ar.setFilter() 设置滤镜 // 更新 trtc 的视频流 const mediaStream = await ar.getOutput(); await trtc.updateLocalVideo({ option: { videoTrack: mediaStream.getVideoTracks()[0] }, });});ar.on('error', (e) => { console.log(e);});

上述代码对 Web 美颜特效 SDK 进行了初始化配置，美颜 SDK 的输入为 TRTC 对象 getVideoTrack 接口获取的未处理过的视频流。

五、步骤4：更新 TRTC 的流

Web 美颜特效 SDK 初始化完成后就可以使用getOutput方法获取输出的流，再调用 TRTC 实例的 updateLocalVideo 接口，更新本地流并发布到房间中。

const mediaStream = await ar.getOutput();// 更新 trtc 的视频流await trtc.updateLocalVideo({ option: { videoTrack: mediaStream.getVideoTracks()[0] },});

六、步骤5：运行 Demo，体验效果

注意：示例项目需你自行启动本机 Web 服务，并保证通过指定端口号可访问到 HTML 文件（示例代码位于 TRTC_Web(5.x) 文件夹，运行quick-demo-js/index.html）。

你在进入房间后，等待短暂的美颜初始化后，便可以查看到实际的美颜效果，成功后可以新开浏览器标签页进入刚才创建的房间模拟其他人加入房间的效果。

七、示例代码

你可以下载示例代码解压后查看，美颜相关的主要改动部分在 TRTC_Web(5.x) 文件夹，quick-demo-js/index.html 和 quick-demo-js/js/index.js中。请提前申请好 TRTC 密钥及 Web 美颜特效 License 相关信息。