tencent cloud

文档反馈

内置相机

最后更新时间:2023-03-28 16:37:22
    SDK 提供了内置相机,如开发者需要快速调起摄像头,或对摄像头有较多交互控制,推荐使用内置相机方式。

    步骤1:引入 SDK

    import { ArSdk } from 'tencentcloud-webar';// SDK 类
    如果项目无需编译,则可以直接以如下方式引用:
    <script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>

    步骤2:初始化实例

    接下来初始化一个 SDK 实例用于显示:
    // 获取鉴权参数
    const authData = {
    licenseKey: 'xxxxxxxxx',
    appId: 'xxx',
    authFunc: authFunc // 详见「License 配置与使用 - 签名方法」
    };
    
    const config = {
    module: { // 0.2.0版本新增
    beautify: true, // 是否启用美颜模块,启用后可以使用美颜、美妆、贴纸等功能
    segmentation: true // 是否启用人像分割模块,启用后可以使用背景功能
    },
    auth: authData, // 鉴权参数
    camera: { // 传camera配置调起内置相机
    width: 1280,
    height: 720
    },
    beautify: { // 初始化美颜参数(可选)
    whiten: 0.1,
    dermabrasion: 0.3,
    eye: 0.2,
    chin: 0,
    lift: 0.1,
    shave: 0.2
    }
    }
    const sdk = new ArSdk(
    // 传入一个 config 对象用于初始化 sdk
    config
    )
    
    let effectList = [];
    let filterList = [];
    
    sdk.on('created', () => {
    // 在 created 回调中可拉取特效和滤镜列表供页面展示,详见「SDK接入 - 参数与方法」
    sdk.getEffectList({
    Type: 'Preset',
    Label: '美妆',
    }).then(res => {
    effectList = res
    });
    sdk.getCommonFilter().then(res => {
    filterList = res
    })
    })
    
    // 在 ready 回调中调用 setBeautify/setEffect/setFilter 等渲染方法
    // 详情可参见「SDK接入 - 设置美颜和特效」
    sdk.on('ready', () => {
    // 设置美颜
    sdk.setBeautify({
    whiten: 0.2
    });
    // 设置特效
    sdk.setEffect({
    id: effectList[0].EffectId,
    intensity: 0.7
    });
    // 设置滤镜
    sdk.setFilter(filterList[0].EffectId, 0.5)
    })
    注意
    由于美颜检测和人像分割均有一定的加载耗时和资源消耗,初始化配置中提供了模块配置以供选择需要的功能,关闭的模块将不会进行预加载和初始化。
    config 中的 camera 参数表示将由 SDK 来采集当前设备的摄像头媒体流作为输入。当设置了 camera 参数,SDK 还提供一系列基础设备管理方法,详情请参见 设备控制

    步骤3:播放流

    SDK 提供了一个快速在页面预览输出效果的播放器,可用于本地预览效果场景,不同的回调事件中获取的 player 有些许差别,适用于不同的场景,根据自身业务需求选择一种处理方式即可。
    如果对画面展示的时效性有需求,可以在 cameraReady 回调中获取播放器,此时 SDK 尚未开始资源加载和检测的初始化,仅能展示原始画面。
    sdk.on('cameraReady', async () => {
    // 初始化一个SDK的player,其中my-dom-id表示您需要放置播放器的容器id
    const player = await sdk.initLocalPlayer('my-dom-id')
    // 直接播放
    await player.play()
    })
    如果需要检测初始化完成,且美颜生效之后再播放,则可以在 ready 回调获取播放器。
    sdk.on('ready', async () => {
    // 初始化一个SDK的player,其中my-dom-id表示您需要放置播放器的容器id
    const player = await sdk.initLocalPlayer('my-dom-id')
    // 直接播放
    await player.play()
    })
    注意
    initLocalPlayer 获取到的播放器默认静音,如果取消静音则可能产生回声。
    获取到的 player,内部封装了 sdk.getOutput() 方法,方便用户使用。
    SDK initLocalPlayer 后,其 player 对象封装了一些常用接口,支持以下方法:
    方法名
    说明
    入参
    返回值
    play
    播放
    -
    Promise;
    pause
    暂停(流不会停止,可恢复)
    -
    -
    stop
    停止(会把流也停止)
    -
    -
    mute
    静音
    -
    -
    unmute
    取消静音
    -
    -
    setMirror
    设置镜像
    true|false
    -
    getVideoElement
    获取内置 video 对象
    -
    HTMLVideoElement
    destroy
    销毁
    -
    -
    注意
    播放器会默认跟随 camera 设备控制 的变化。您可以简单理解为 camera 的设备控制是总开关,而 localPlayer 的播放控制是一个子开关;例如:
    调用 camera.muteVideo 后,此时禁用了设备视频流,此时 localPlayer 即使再调用 play 也相当于处于停止播放状态。
    调用 camera.unmuteVideo 后,重新启用了视频流,此时 localPlayer 会默认自动恢复播放状态。 因此启用 camera 配置情况下您无须再手动控制 localPlayer 的状态,管理好 camera 设备状态即可。

    步骤4:获取输出

    如有推流相关需求,可使用 getOutput 方法获取输出的媒体流。 拿到输出的 MediaStream 之后,可以结合第三方 SDK(如 TRTC Web SDK,快直播 Web SDK)进行推流等后续处理。
    const output = await sdk.getOutput()
    注意
    使用内置相机初始化时,getOutput 输出的媒体流均为 MediaStream 类型。
    输出的媒体流中 video 轨道是 ArSdk 实时处理的,如有 audio 轨道则保持不变。
    getOutput 方法是异步方法,会等到sdk执行完一系列初始化工作并且可以生成流之后返回。
    getOutput 方法支持传入一个 FPS 参数,表示设置输出的帧率为 FPS(例如15),不传则默认取输入流的帧率。
    推流等具体操作参见 结合 TRTC 推流结合 WebRTC 推流

    步骤5:设置美颜和特效

    SDK 的所有素材均兼容微信小程序端与 Web 端,调用方式一致,详情请参见 设置美颜和特效

    步骤6:设备控制

    如果您需要进行摄像头的启停等操作,可通过 sdk.camera 实例来实现,示例代码如下:
    const output = await sdk.getOutput()
    // todo 这里省略若干业务逻辑
    // ...
    
    // getOutput之后sdk.camera已经初始化完毕了可以直接取
    const cameraApi = sdk.camera
    
    // 获取当前设备列表
    const devices = await cameraApi.getDevices()
    console.log(devices)
    // 禁用视频轨道
    // cameraApi.muteVideo()
    // 启用视频轨道
    // cameraApi.unmuteVideo()
    // 如果有多个摄像头可以根据设备id切换
    // await cameraApi.switchDevices('video', 'your-device-id')
    如果需要在第一时间取到 sdk.camera,可以在初始化时,cameraReady 事件中获取:
    // todo 这里省略若干初始化参数
    // ...
    const sdk = new ArSdk(
    config
    )
    
    let cameraApi;
    sdk.on('cameraReady', async () => {
    cameraApi = sdk.camera
    // 获取当前设备列表
    const devices = await cameraApi.getDevices()
    console.log(devices)
    // 禁用视频轨道
    // cameraApi.muteVideo()
    // 启用视频轨道
    // cameraApi.unmuteVideo()
    // 如果有多个摄像头可以根据设备id切换
    // await cameraApi.switchDevices('video', 'your-device-id')
    })
    为了方便设备控制,内置的 camera 提供了以下方法调用:
    方法名
    说明
    入参
    返回值
    getDevices
    获取当前所有设备列表
    -
    Promise<Array<MediaDeviceInfo>>
    switchDevice
    切换设备
    type:string, deviceId:string
    Promise
    muteAudio
    静音当前摄像头流
    -
    -
    unmuteAudio
    恢复静音
    -
    -
    muteVideo
    禁用当前摄像头流内画面,此时流仍存在只是视频轨道已禁用
    -
    -
    unmuteVideo
    启用当前摄像头流内画面
    -
    -
    stopVideo
    停止当前摄像头设备,视频流会停止(音频流还存在)
    -
    -
    restartVideo
    重启当前摄像头,在 stopVideo 之后使用
    -
    Promise
    stop
    停止当前摄像头视频以及音频设备
    -
    -
    
    联系我们

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

    技术支持

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

    7x24 电话支持