Docs Overview/
结合 TRTC（5.x 版本）推流/

结合 TRTC（5.x 版本）推流

说明：
本教程基于 5.x TRTC Web SDK 实现，若您使用 4.x 版本 SDK，可参见 此教程。

准备工作

请阅读 Web 美颜特效 SDK 接入指南，熟悉 SDK 基本用法。
请阅读 TRTC 快速集成（Web），了解 TRTC Web SDK 基本用法，并完成基础设置。
请阅读 TRTC 快速跑通 Web Demo，并先尝试在本地项目中运行 TRTC Web Demo。

开始使用

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

由于 TRTC 的 Web Demo 项目已经做的比较完善，我们在此基础上进行少量改造即可。
在页面（PC Web 端）中引入 js 脚本：
<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>
注意：
这里是示例项目，为了方便使用 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 接口，用于更新视频流，我们可以使用自定义采集的方式，获取美颜处理过的流，传递给此接口使用。
// 获取自定义的stream
const 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 sdk
const 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 相关信息。