Starter Deal! First 3 month from only  $9.9 /month!
Starter Deal! First 3 month from only  $9.9 /month!
Grab It Now 
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

Configuring Segmentation

The segmentation module needs to be enabled during initialization to implement virtual backgrounds. For more information, see Custom Stream or Image and Built-in Camera.


Setting the Background

The SDK allows you to blur the background or set an image as the background. You can pass in keying parameters during initialization.
const config = {
module: {
beautify: true, // Whether to enable the effect module, which offers beautification and makeup effects as well as stickers
segmentation: true // Whether to enable the segmentation module, which allows you to change the background
segmentationLevel: 0 // Switch background segmentation models supported since Versions 1.0.19
},
auth: authData, // The authentication information
input: stream, // The input stream
beautify: { // The effect parameters for initialization (optional)
whiten: 0.1,
dermabrasion: 0.3,
eye: 0.2,
chin: 0,
lift: 0.1,
shave: 0.2
},
background: {
type: 'blur' // Blur the background
}
}
const sdk = new ArSdk(
// Pass in a config object to initialize the SDK
config
)
You can also dynamically change the background.
sdk.setBackground({
type: 'image', // The background image
src: 'https://webar-static.tencent-cloud.com/assets/background/1.jpg'
})

Using Transparent Backgrounds

The SDK supports transparent backgrounds on some browsers.
sdk.setBackground({
type: 'transparent'
})
Note:
Keep the following in mind:
Segmentation is supported on both mobile and desktop browsers.
Because WebRTC does not support alpha channels, you can only use transparent backgrounds locally. Background transparency will not work after publishing.
Background transparency is supported on desktop Chrome and Firefox, but not supported on desktop or mobile Safari.
Starting from version 1.0.19 and above, switching background segmentation models is supported, with parameters: 0, 1, 2.
Level 0 has the best performance but relatively average segmentation results.
Level 1 has a moderate performance and effect.
Level 2 has the best segmentation results and the longest inference time, suitable for applications with high requirements for segmentation effects and low performance requirements.