产品动态
关于腾讯特效 SDK V3.5 版本更新公告
关于腾讯特效 SDK V3.0 版本相关接口及素材变更公告
npm install tencentcloud-webar
import { ArSdk } from 'tencentcloud-webar';
<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script><script>// Receive ArSdk class from window.ARconst { ArSdk } = window.AR;......</script>
// 获取鉴权参数const authData = {licenseKey: 'xxxxxxxxx',appId: 'xxx',authFunc: authFunc // 详见「License 配置与使用 - 签名方法」};const config = {module: { // 0.2.0版本新增beautify: true, // 是否启用美颜模块，启用后可以使用美颜、美妆、贴纸等功能segmentation: true // 是否启用人像分割模块，启用后可以使用背景功能segmentationLevel: 0 // 可选值：0 | 1 | 2 ，数值越高，分割效果越好，资源占用越大，对设备硬件要求越高},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,// 更多美颜参数设置请参考「API 文档」},// 更多参数设置请参考「API 文档」}const sdk = new ArSdk(// 传入一个 config 对象用于初始化 sdkconfig)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)})
cameraReady 回调中获取播放器，此时 SDK 尚未开始资源加载和检测的初始化，仅能展示原始画面。sdk.on('cameraReady', async () => {// 初始化一个SDK的player，其中my-dom-id表示您需要放置播放器的容器idconst player = await sdk.initLocalPlayer('my-dom-id')// 直接播放await player.play()})
sdk.on('ready', async () => {// 初始化一个SDK的player，其中my-dom-id表示您需要放置播放器的容器idconst player = await sdk.initLocalPlayer('my-dom-id')// 直接播放await player.play()})
sdk.getOutput() 方法，方便用户使用。方法名 | 说明 | 入参 | 返回值 |
play | 播放 | - | Promise; |
pause | 暂停（流不会停止，可恢复） | - | - |
stop | 停止（会把流也停止） | - | - |
mute | 静音 | - | - |
unmute | 取消静音 | - | - |
setMirror | 设置镜像 | true|false | - |
getVideoElement | 获取内置 video 对象 | - | HTMLVideoElement |
destroy | 销毁 | - | - |
camera.muteVideo 后，此时禁用了设备视频流，此时 localPlayer 即使再调用 play 也相当于处于停止播放状态。camera.unmuteVideo 后，重新启用了视频流，此时 localPlayer 会默认自动恢复播放状态。
因此启用 camera 配置情况下您无须再手动控制 localPlayer 的状态，管理好 camera 设备状态即可。const output = await sdk.getOutput()
MediaStream 类型。audio 轨道则保持不变。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.switchDevice('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.switchDevice('video', 'your-device-id')})
camera 提供了以下方法调用：方法名 | 说明 | 入参 | 返回值 |
getDevices | 获取当前所有设备列表 | - | Promise<Array<MediaDeviceInfo>> |
switchDevice | 切换设备 | type:string, deviceId:string | Promise |
muteAudio | 静音当前摄像头流 | - | - |
unmuteAudio | 恢复静音 | - | - |
muteVideo | 禁用当前摄像头流内画面，此时流仍存在只是视频轨道已禁用 | - | - |
unmuteVideo | 启用当前摄像头流内画面 | - | - |
stopVideo | 停止当前摄像头设备，视频流会停止（音频流还存在） | - | - |
restartVideo | 重启当前摄像头，在 stopVideo 之后使用 | - | Promise |
stop | 停止当前摄像头视频以及音频设备 | - | - |
文档反馈