腾讯特效SDK内置相机_音视频解决方案_同尘科技

腾讯特效SDK 2年前 (2023-06-14) 浏览 85

SDK 提供了内置相机,如开发者需要快速调起摄像头,或对摄像头有较多交互控制,推荐使用内置相机方式。

步骤1:引入 SDK

import { ArSdk } from 'tencentcloud-webar';// SDK 类

如果项目无需编译,则可以直接以如下方式引用:

    // 从 window.AR 上获取 ArSdk 类    const { ArSdk } = window.AR;    ......

步骤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>
switchDevice 切换设备 type:string, deviceId:string Promise
muteAudio 静音当前摄像头流
unmuteAudio 恢复静音
muteVideo 禁用当前摄像头流内画面,此时流仍存在只是视频轨道已禁用
unmuteVideo 启用当前摄像头流内画面
stopVideo 停止当前摄像头设备,视频流会停止(音频流还存在)
restartVideo 重启当前摄像头,在 stopVideo 之后使用 Promise
stop 停止当前摄像头视频以及音频设备



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

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

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

阿里云解决方案也看看?: 点击对比阿里云的解决方案

- 0人点赞 -

发表点评 (0条)

not found

暂无评论,你要说点什么吗?