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 Segmentation/

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.