please select
Beauty AR
  • Overview
  • Web
    • Quick Start
    • Integration
      • Overview
      • Built-in Camera
      • Custom Stream
      • Loading Optimization
      • Configuring Effects
      • Configuring Segmentation
      • Configuring Animojis and Virtual Avatars
    • API Document
    • Release Notes
    • Best Practices
      • Publishing over WebRTC
      • Publishing over WebRTC (Preinitialization)
      • Publishing Using TRTC
    • FAQs
  • Android
    • Integration
      • Integrating SDK
      • Integrating TEBeautyKit
    • API Document
    • Release Notes
    • Best Practices
      • Reducing SDK Size
      • Effect Parameters
    • Advanced Capabilities
      • Gesture Recognition
      • Face Recognition
      • Virtual Background
    • Material Production
      • Beauty AR Studio Introduction
    • FAQs
  • IOS
    • Integration
      • Integrating SDK
      • Integrating TEBeautyKit
    • API Document
    • Release Notes
    • Best Practices
      • Reducing SDK Size
      • Effect Parameters
    • Advanced Capabilities
      • Gesture Recognition
      • Face Recognition
      • Virtual Background
    • Material Production
      • Beauty AR Studio Introduction
    • FAQs
  • Flutter
    • Integration
    • API Document
    • Material Production
      • Beauty AR Studio Introduction
  • Overview
    • Overview
  • Activate the Service
  • Pricing
  • Free Trial
    • Web
    • Mobile
Beauty AR
Docs Overview/
Beauty AR/
Web/
Integration/
Configuring Animojis and Virtual Avatars/

Configuring Animojis and Virtual Avatars

The Tencent Effect SDK supports animojis and VR virtual avatars starting from v0.3.0.

Checking Support

Animojis and VR virtual avatars rely on a WebGL2 environment. The SDK offers a static method for you to check whether a browser supports the capability.
import {ArSdk} from 'tencentcloud-webar'
if (ArSdk.isAvatarSupported()) {
    // Initialize the feature

} else {
    alert('This browser does not support virtual avatars')
    // Hide the feature
}

Animojis

Getting models

After initialization, you can get the built-in models. Currently, the SDK offers four built-in animoji models.
const avatarARList = await sdk.getAvatarList('AR')
Note:
Configuring animojis and virtual avatars will automatically remove other effects such as makeup and stickers, and vice versa.

Setting a model

After you get the list of built-in models, you can select one by specifying the EffectId parameter.
ar.setAvatar({
  mode: 'AR', // Set the mode to `VR`
  effectId: avatarARList[0].EffectId// Pass in the built-in ID
}, () => {
  // success callback

});

Customizing a model

If you need to customize a model, feel free to contact us.

VR Virtual Avatars

Getting models

The list of built-in models can be obtained after the SDK is initialized. Currently, the SDK offers 10 virtual avatars.
const avatarVRList = await sdk.getAvatarList('VR')

Setting a scene


ar.setAvatar({
  mode: 'VR', // Set `mode` to `VR` 
  effectId: avatarVRList[0].EffectId, // Pass in the built-in ID
  backgroundUrl: 'https://webar-static.tencent-cloud.com/assets/background/1.jpg',
}, () => {
    // success callback


});
Note:
To set a VR scene, you need to set the background image URL, or the black background will be used by default.

Customizing a model

You can quickly customize a virtual avatar in two ways and directly use it in the SDK.
Option 1. readyplayer.me
Option 2. Vroid
With either option, you need to upload the exported model to CDN and use the URL to set the SDK.
ar.setAvatar({
  mode: 'VR', // Set `mode` to `VR` 
  url: 'https://xxxx.glb', // Pass in the built-in ID
  backgroundUrl: 'https://webar-static.tencent-cloud.com/assets/background/1.jpg',
}, () => {
    // success callback

});
Currently, a custom model can be either in GLB or VRM format.