内置摄像头

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
停止当前摄像头视频以及音频设备
-
-