tencent cloud

文档反馈

结合 WebRTC 的推流(预初始化方案)

最后更新时间: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 文件。
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持