Custom Stream

// Get the authentication information
const authData = {
 licenseKey: 'xxxxxxxxx',
 appId: 'xxx',
 authFunc: authFunc // For details, see “Configuring and Using a License - Signature”
};
// The input stream
const stream = await navigator.mediaDevices.getUserMedia({
 audio: true,
 video: { width: w, height: h }
})

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
 }
}
const sdk = new ArSdk(
 // Pass in a config object to initialize the SDK
 config
)

const config = {
 auth: authData, // The authentication information
 input: 'https://xxx.png', // The input stream
}
const sdk = new ArSdk(
 // Pass in a config object to initialize the SDK
 config
)

// You can display the effect and filter list in the `created` callback. For details, see “SDK Integration - Parameters and APIs”.
sdk.on('created', () => {
 // Get the built-in makeup effects
 sdk.getEffectList({
     Type: 'Preset',
     Label: 'Makeup',
 }).then(res => {
     effectList = res
 });
 // Get the built-in filters
 sdk.getCommonFilter().then(res => {
     filterList = res
 })
})

// Call `setBeautify`, `setEffect`, or `setFilter` in the `ready` callback
// For details, see “SDK Integration - Configuring Effects”
sdk.on('ready', () => {
 // Configure beautification effects
 sdk.setBeautify({
     whiten: 0.2
 });
 // Configure special effects
 sdk.setEffect({
     id: effectList[0].EffectId,
     intensity: 0.7
 });
 // Configure filters
 sdk.setFilter(filterList[0].EffectId, 0.5)
})

sdk.on('cameraReady', async () => {
  // By getting the output stream in the `cameraReady` callback, you can display a video image sooner. However, because the initialization parameters have not taken effect at this point, the output stream obtained will be the same as the original stream.
  // You can choose this method if you want to display a video image as soon as possible but do not need to apply effects to the video the moment it is displayed.
  // You don’t need to update the stream after the effects start to work.
  const output = await ar.getOutput();
  // Use `video` to preview the output stream
  const video = document.createElement('video')
  video.setAttribute('playsinline', '');
  video.setAttribute('autoplay', '');
  video.srcObject = output
  document.body.appendChild(video)
  video.play()
})

sdk.on('ready', async () => {
  // If you get the output stream in the `ready` callback, because the initialization parameters have taken effect at this point, the output stream obtained will show effects.
  // The `ready` callback occurs later than `cameraReady`. You can get the output stream in `ready` if you want your video to show effects the moment it is displayed but do not expect it to be displayed as soon as possible.
  const output = await ar.getOutput();
  // Use `video` to preview the output stream
  const video = document.createElement('video')
  video.setAttribute('playsinline', '');
  video.setAttribute('autoplay', '');
  video.srcObject = output
  document.body.appendChild(video)
  video.play()
})