腾讯特效SDK内置相机_音视频解决方案_同尘科技
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折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠
阿里云解决方案也看看?: 点击对比阿里云的解决方案
暂无评论,你要说点什么吗?