# tencentcloud-webar

> [English](#documentation) | [简体中文](#文档) # Documentation The main function of this SDK is to provide you with fast and secure access to [Web AR Face Filters](https://trtc.io/document/50099?platform=web&product=beautyar), and to use all features.

Latest version **2.0.3** (published 2026-06-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install tencentcloud-webar
pnpm add tencentcloud-webar
yarn add tencentcloud-webar
bun add tencentcloud-webar
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2026-06-29 |
| First published | 2022-04-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 25.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | shirlyyang |
| Maintainers | shirlyyang, sevenyzhang |

## Links

- npm: https://www.npmjs.com/package/tencentcloud-webar
- npm.io page: https://npm.io/package/tencentcloud-webar

## Dependencies (3)

- [mp4box](https://npm.io/package/mp4box.md) ^0.5.4
- [mp4-muxer](https://npm.io/package/mp4-muxer.md) ^5.2.2
- [detect-gpu](https://npm.io/package/detect-gpu.md) ^5.0.14

## Recent versions

- 2.0.3 (latest) — 2026-06-29
- 2.0.3-15 (beta) — 2026-08-24
- 2.0.3-dev.16 (dev) — 2026-07-06
- 1.0.30 (v1-latest) — 2026-06-25
- 1.0.30-1 (v1-beta) — 2026-06-15
- 1.0.28-9 (v1-beta-wecode) — 2026-04-16
- 1.0.24-13 (v1-beta-21) — 2026-02-05
- 2.0.2-alpha.0 (alpha) — 2025-12-15
- 2.0.3-dev.15 — 2026-07-06
- 2.0.3-14 — 2026-06-29
- 2.0.3-dev.14 — 2026-06-29
- 2.0.3-dev.13 — 2026-06-29
- 2.0.3-dev.12 — 2026-06-29
- 2.0.3-13 — 2026-06-24
- 1.0.30-0 — 2026-06-08
- … 542 more at https://npm.io/package/tencentcloud-webar/versions

## README

[English](#documentation) | [简体中文](#文档)
# Documentation
The main function of this SDK is to provide you with fast and secure access to [Web AR Face Filters](https://trtc.io/document/50099?platform=web&product=beautyar), and to use all features.

## Process Description
The SDK implements a concise and non-invasive interface for access. You only need to initialize the instance and add the rendering node to your page to quickly achieve **Web Beauty Effects** functionality.
![Process Diagram](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/8ae0c951bbf611ed9e14525400088f3a.png)

## Installation
This SDK provides SDKs for the Web and WeChat Mini Programs using npm packages.

```
npm install tencentcloud-webar
```

## SDK Integration
We provide two initialization methods: Built-in Camera and Custom Stream.
- [Built-in Camera and Player](https://trtc.io/document/50101?platform=web&product=beautyar): Utilizes built-in camera and player encapsulation, with simple and rapid invocation.
- [Custom Stream Integration](https://trtc.io/document/50102?platform=web&product=beautyar): Suitable for scenarios where there is a need to maintain media streams or require higher flexibility and controllability.

## Setting Beauty and Effects
All materials of the SDK are compatible with both WeChat Mini Program and Web, with consistent calling methods. For details, please refer to [Setting Beauty and Effects](https://trtc.io/document/54291?platform=web&product=beautyar).

## Using Portrait Segmentation (Virtual Background)
Achieve virtual background effects with portrait segmentation capability. For details, please refer to [Using Portrait Segmentation (Virtual Background)](https://trtc.io/document/50105?platform=web&product=beautyar).

## Using Animoji and Virtual Avatars
Animoji expressions and VR virtual avatar functions. For details, please refer to [Using Expressions and Virtual Avatars](https://trtc.io/document/51231?platform=web&product=beautyar).

## Parameter and Method Description
Refer to the [API Documentation](https://trtc.io/document/50106?platform=web&product=beautyar).

## Compatibility

| Browser   | Supported Platforms |
| -----     | ---                 |
| Chrome    | Desktop, Android, iOS |
| Safari    | Desktop, Android, iOS |
| FireFox   | Desktop, Android, iOS |
| QQ webview | Android |
| WeChat webview | Android/iOS WeChat 8.0.16 and above |
| WeChat Mini Program | Android/iOS WeChat 8.0.16 and above |

For more platform compatibility information, please refer to [Product Overview - Web](https://trtc.io/document/60216?platform=web&product=beautyar).

## Code Examples
Please refer to [Quick Start](https://trtc.io/document/53939?platform=web&product=beautyar).


# 文档
本 SDK 主要功能在于提供给您快速、安全地接入 [Web 美颜特效](https://cloud.tencent.com/document/product/616/71399)，并使用所有功能。

## 流程说明
SDK 实现了简洁低侵入性的接口提供接入，您只需要初始化实例，将渲染节点添加到自己的页面即可快速实现 **Web 美颜特效**功能。
![流程图](https://qcloudimg.tencent-cloud.cn/raw/13289a5bcf4b36ab2bc77b42390ea9ac.png)


## 安装
本SDK使用npm包提供Web端与微信小程序的SDK。

```
npm install tencentcloud-webar
```

## 接入 SDK
本 SDK 在微信小程序和 Web 端的初始化方式略有差异。
- 小程序接入请参见 [小程序端接入](https://cloud.tencent.com/document/product/616/75675)。
- Web 端我们提供了内置 Camera 与自定义流两种初始化方式。
    - [内置相机与播放器](https://cloud.tencent.com/document/product/616/75678)：使用了内置的摄像头与播放器封装，调用简单迅速。
    - [自定义流接入](https://cloud.tencent.com/document/product/616/75679)：适用于有自己维护媒体流的需求或者要求更高的灵活性与可控性的场景。

## 设置美颜和特效
SDK 的所有素材均兼容微信小程序端与 Web 端，调用方式一致，详情可参见 [设置美颜和特效](https://cloud.tencent.com/document/product/616/75680)。
## 使用人像分割（虚拟背景）
借助人像分割能力实现虚拟背景效果，详情可参见 [使用人像分割（虚拟背景）](https://cloud.tencent.com/document/product/616/76112)。
## 使用表情和虚拟形象
Animoji 表情和 VR 虚拟形象功能，详情可参见 [使用表情和虚拟形象](https://cloud.tencent.com/document/product/616/80796)。

## 参数与方法说明
参见 [API文档](https://cloud.tencent.com/document/product/616/75676)。

## 兼容性

| 浏览器   | 支持平台 |
| -----   | --- |
| Chrome  | 桌面端、Android、iOS |
| Safari  | 桌面端、Android、iOS |
| FireFox | 桌面端、Android、iOS |
| QQ webview | Android |
| 微信 webview | Android/iOS 微信8.0.16以上|
| 微信小程序  | Android/iOS 微信8.0.16以及上|

更多平台兼容相关信息，请参考 [产品概述 - Web 端](https://cloud.tencent.com/document/product/616/11209)

## 代码实例
请参见 [快速上手](https://cloud.tencent.com/document/product/616/71371)。

---
_Source: https://npm.io/package/tencentcloud-webar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
