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

准备工作

请阅读 Web 美颜特效 SDK 接入指南，熟悉 SDK 基本用法。请阅读云直播 入门文档 以及 WebRTC 推流，了解 WebRTC 推流工具基本用法，并完成直播基础设置。

开始使用

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

在需要直播推流的页面（PC Web 端）中引入 js 脚本：

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

步骤2：WebRTC 推流资源引入

在需要直播推流的页面（PC Web 端）中引入 js 脚本：

注意请在 HTML 的 body 部分引入上述脚本，如果在 head 部分引入会报错。

步骤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 };};
let w = 720;let h = 480;
// 获取输入流const stream = await navigator.mediaDevices.getUserMedia({    audio: true,    video: { width: w, height: h }})
// ar sdk 基础配置参数const config = {    input: stream,    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)        // 渲染美妆、贴纸列表视图        renderMakeupList(makeupList);        renderStickerList(stickerList);
    }).catch((e) => {        console.log(e);    });    // 内置滤镜    ar.getCommonFilter().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,        }));
        // 渲染滤镜列表视图        renderFilterList(list);
    }).catch((e) => {        console.log(e);    });});
ar.on('ready', async (e) => {
    // 在 ready 回调里及该事件之后，可使用三种方法来设置美颜特效：setBeautify/setEffect/setFilter
    // 例如使用range input（滑动控件）设置美颜效果    $('#dermabrasion_range_input').change((e) => {        ar.setBeautify({            dermabrasion: e.target.value, // 磨皮 0-1        });    });
    // 通过created回调中创建的美妆、贴纸列表交互设置效果(setEffect的输入参数支持三种格式，详见SDK接入指南)    $('#makeup_list li').click(() => {        ar.setEffect([{id: effect.id, intensity: 1}]);    });    $('#sticker_list li').click(() => {        ar.setEffect([{id: effect.id, intensity: 1}]);    });
    // 通过created回调中创建的滤镜列表交互设置滤镜效果(setFilter第二个参数1表示强度，详见SDK接入指南）    ar.setFilter(filterList[0].id, 1);    $('#filter_list li').click(() => {        ar.setFilter(filter.id, 1);    });
    // 获取ar sdk 输出的流在下一步中进行 WebRTC 推流    const arStream = await ar.getOutput();
});
ar.on('error', (e) => {    console.log(e);});

更细致的 UI 控制用法您可以通过下载文末提供的代码包来进一步查看。

步骤4：开始推流

完成上一步之后，在 SDK ready 回调中获取输出流即可进行 WebRTC 推流，示例代码如下：

let livePusher = new TXLivePusher()// 设置直播推流基础参数 beginlet DOMAIN = '您的推流域名'let AppName = '您的appName' let StreamName = '您的streamName'let txSecret = '您的txSecret'let txTime = '您的txTime'// 设置直播推流基础参数 end
let pushUrl = `webrtc://${DOMAIN}/${AppName}/${StreamName}?txSecret=${txSecret}&txTime=${txTime}`
// 可选：设置预览界面元素livePusher.setRenderView('id_local_video');// 捕获流内容livePusher.startCustomCapture(arStream);// 立刻开始推流，您也可以通过其他函数来控制推流时机livePusher.startPush(pushUrl)

其中 txSecret 和 txTime 都需要计算，为了方便您也可以通过直播控制台的 地址生成器 快速生成这些参数和推流 URL，具体请参见 地址生成器。
推流（startPush）成功后，您应该就能看到应用了美颜特效的直播流的效果了。

步骤5：查看效果

注意示例项目需您自行启动本机 Web 服务，并保证通过端口号可访问到 HTML 文件。若您有一个已备案成功的播放域名，可参考 直播播放 查看实际的播放效果。若您无播放域名，可在直播控制台的 流管理 中预览当前流的画面。

代码示例

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

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

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

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

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