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

Publishing over WebRTC (Preinitialization)

Preparations

Read Overview to learn about how to use the Beauty AR Web SDK.
For more information on WebRTC publishing, see Publishing over WebRTC. This document describes the differences in the code and process when the preinitialization scheme is used.
For more information on the preinitialization scheme, see Loading Optimization.

Getting Started

The preinitialization scheme differs from the general loading scheme mainly in that you don't need to specify the input or camera attribute when initializing the SDK; that is, instead of specifying the input data for the SDK during initialization, you later call the initCore API to specify the data at an appropriate location based on your needs. In this way, the resources depended on by the SDK are loaded in advance, and the ready event of the SDK will be triggered more quickly after initCore is later called, making it easier to get and display the output stream. Below is the key sample code:

Initializing SDK

...
let resourceReady = false
// Basic configuration parameters of the Beauty AR SDK
const config = {
// input: stream, // Do not specify `input`.
auth: {
licenseKey: LICENSE_KEY,
appId: APPID,
authFunc: getSignature
},
// Initial beauty effects (optional parameters)
beautify: {
whiten: 0.1, // The brightening effect. Value range: 0–1.
dermabrasion: 0.5, // The smooth skin effect. Value range: 0–1.
lift: 0.3, // The slim face effect. Value range: 0–1.
shave: 0, // The V shape effect. Value range: 0–1.
eye: 0, // The big eyes effect. Value range: 0–1.
chin: 0, // The chin shaping effect. Value range: 0–1.
……
},
language: 'en'
}

// Pass in `ar sdk` for `config`.
const ar = new ArSdk(config);
// If the `resourceReady` callback event is triggered, the resources have been completely loaded, and you need to wait for `initCore` to provide input.
ar.on('resourceReady', () => {
resourceReady = true
})
// The `ready` event will be triggered after `initCore` is called.
ar.on('ready', () => {
// Get the output stream data of the Beauty AR SDK
const arStream = await ar.getOutput();
// Process the output stream
...
})
...

Triggering the initCore event with a user operation

// The following describes how to set the input stream for the preinitialization scheme with an example in which the user turns on the camera.
function onClickStartCamera(){
let w = 1280;
let h = 720;

// Get the device's input stream
const arInputStream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: {
width: w,
height: h
}
});
if(!resourceReady){ // In this mode, calling `initCore` will have no effect if `resourceReady` is not triggered, and you can do some customization.
return
}
// Set the input stream data of the Beauty AR SDK
ar.initCore({
input: arInputStream
})
}

Sample Code

You can download the sample code, decompress it, and view the AR_and_LEB_Preload.html file in the AR_LEB_WEB code directory.