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>
    // 从 window.AR 上获取 ArSdk 类
    const { ArSdk } = window.AR;
    ......
</script>

// 获取鉴权参数
const authData = {
 licenseKey: 'xxxxxxxxx',
 appId: 'xxx',
 authFunc: authFunc // 详见「License 配置与使用 - 签名方法」
};
// 输入SDK的流
const stream = await navigator.mediaDevices.getUserMedia({
 audio: true,
 video: { width: w, height: h }
})

const config = {
 module: { // 0.2.0版本新增
     beautify: true, // 是否启用美颜模块，启用后可以使用美颜、美妆、贴纸等功能
     segmentation: true, // 是否启用人像分割模块，启用后可以使用背景功能
     segmentationLevel: 0 // 可选值：0 | 1 | 2 ，数值越高，分割效果越好，资源占用越大，对设备硬件要求越高
 },
 auth: authData, // 鉴权参数
 input: stream, // input传输入流
 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 对象用于初始化 sdk
 config
)

const config = {
 auth: authData, // 鉴权参数
 input: 'https://xxx.png', // input传输入流，也支持 image 及 video 标签
}
const sdk = new ArSdk(
 // 传入一个 config 对象用于初始化 sdk
 config
)

// 在 created 回调中可拉取特效和滤镜列表供页面展示，详见「SDK接入 - 参数与方法」
sdk.on('created', () => {
 // 获取内置美妆
 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)
})

sdk.on('cameraReady', async () => {
  // 在 cameraReady 回调中可以更早地获取输出画面，此时初始化传入的美颜参数还未生效，同输入画面
  // 适用于需要尽早地展示画面，但不要求画面一出现就有美颜的场景
  // 后续美颜生效后无需更新stream，SDK内部已处理
  const output = await ar.getOutput();
  // 使用video播放输出的媒体流，预览效果
  const video = document.createElement('video')
  video.setAttribute('playsinline', '');
  video.setAttribute('autoplay', '');
  video.srcObject = output
  document.body.appendChild(video)
  video.play()
})

sdk.on('ready', async () => {
  // 在 ready 回调中获取输出画面，此时初始化传入的美颜参数已生效，获取的 output stream 已带美颜效果
  // 区别上述 cameraReady 中获取 output，此回调执行时机稍晚一些，适用于画面一展示就要有美颜的场景，但不要求尽早地展示画面的场景
  const output = await ar.getOutput();
  // 使用video播放输出的媒体流，预览效果
  const video = document.createElement('video')
  video.setAttribute('playsinline', '');
  video.setAttribute('autoplay', '');
  video.srcObject = output
  document.body.appendChild(video)
  video.play()
})