tencent cloud

腾讯特效 SDK

动态与公告
产品动态
关于腾讯特效 SDK V3.5 版本更新公告
关于腾讯特效 SDK V3.0 版本相关接口及素材变更公告
产品简介
产品概述
产品功能
基本概念
产品优势
应用场景
购买指南
价格总览
购买流程
欠费退费说明
新手指引
Demo 体验
免费测试
License 指引
移动端 License 新增与续期
PC 端 License 新增与续期
Web端 License 新增与续期
常见问题
SDK 下载
功能说明
SDK 下载
版本历史
SDK 集成指引(无 UI)
通用集成腾讯特效
原子能力集成指引
SDK 集成指引(含 UI)
通用集成腾讯特效
直播 SDK 集成腾讯特效
TRTC SDK 集成腾讯特效
短视频 SDK 集成腾讯特效
Avatar 虚拟人集成指引
API 文档
iOS
Android
Flutter
Web
功能实践
SDK 包瘦身
SDK 集成问题排查
性能调优
效果调优
素材使用
美颜参数说明
美颜场景推荐参数
短视频企业版迁移指引
第三方推流接入美颜(Flutter)
小程序美颜特效实践
素材制作工具使用
Web 美颜特效
产品概述
快速上手
SDK 接入
API 文档
控制台指南
Demo 体验
内置素材总览
实践教程
常见问题
常见问题
通用类相关
技术类相关
License 相关
旧版文档
美颜场景推荐参数
美颜参数表
一分钟集成 TRTC
一分钟集成直播
TE SDK 政策
隐私协议
数据处理和安全协议
联系我们
文档腾讯特效 SDKWeb 美颜特效实践教程结合快直播及 WebRTC 的推流(预初始化方案)

结合快直播及 WebRTC 的推流(预初始化方案)

PDF
聚焦模式
字号
最后更新时间: 2024-07-09 16:06:24

准备工作

请阅读 Web 美颜特效 SDK 接入指南,熟悉 SDK 基本用法。
WebRTC 的推流相关请参见 结合 WebRTC 的推流,本文重点介绍采取预初始方案时代码及流程差异部分。
预初始化方案相关介绍,请参见 加载优化

开始使用

预初始化方案与常规加载方案相比,最大的差异在于初始化 SDK 时不需要指 input 或 camera 属性,即初始化时不为 SDK 指定输入数据,后续根据业务需求在适当的位置调用 initCore 接口指定输入数据。这样做的好处是将 SDK 依赖的资源提前加载,后续调用 initCore 后,SDK 的 ready 事件就会更快地触发,便于获取输出流展示等。以下为关键代码示例:

初始化SDK

...
let resourceReady = false
// ar sdk 基础配置参数
const config = {
// input: stream, // 不指定input
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);
// resourceReady 回调事件触发,意味着相关资源已加载完成,等待 initCore 提供输入
ar.on('resourceReady', () => {
resourceReady = true
})
// 调用 initCore 后会触发 ready 事件
ar.on('ready', () => {
// 获取 ar sdk 输出流数据
const arStream = await ar.getOutput();
// 处理输出流
...
})
...

用户操作触发 initCore 事件

// 此处以用户点击【开启摄像头】为例,介绍预初始化方案设置输入流的方式
function onClickStartCamera(){
let w = 1280;
let h = 720;

// 获取设备输入流
const arInputStream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: {
width: w,
height: h
}
});
if(!resourceReady){ // 此模式下,resourceReady未触发时,调用initCore无意义,业务可以做一些个性化处理
return
}
// 设置 ar sdk 输入流数据
ar.initCore({
input: arInputStream
})
}

代码示例

您可以下载 示例代码 解压后查看 AR_LEB_WEB 代码目录中的 AR_and_LEB_Preload.html 文件。

帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈