To use the keying feature, you need to enable the keying module when initializing the SDK. For details, see Custom Stream or Image and Built-in Camera.
This feature is only available in the web SDK.
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 keying module, which allows you to change the background
},
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'
})
The SDK supports transparent backgrounds on some browsers.
sdk.setBackground({
type: 'transparent'
})
Note:Please pay attention to the following:
- Keying 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.
Was this page helpful?