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. 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
const config = {
auth: {
licenseKey: LICENSE_KEY,
appId: APPID,
authFunc: getSignature
},
beautify: {
whiten: 0.1,
dermabrasion: 0.5,
lift: 0.3,
shave: 0,
eye: 0,
chin: 0,
……
},
language: 'en'
}
const ar = new ArSdk(config);
ar.on('resourceReady', () => {
resourceReady = true
})
ar.on('ready', () => {
const arStream = await ar.getOutput();
...
})
...
Triggering the initCore
event with a user operation
function onClickStartCamera(){
let w = 1280;
let h = 720;
const arInputStream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: {
width: w,
height: h
}
});
if(!resourceReady){
return
}
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.
Was this page helpful?