Docs Overview/
Beauty AR/
Web/
Get Started/
Integration/
内置摄像头/

内置摄像头

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