// 인증 매개변수 가져오기
const authData = {
 licenseKey: 'xxxxxxxxx',
 appId: 'xxx',
 authFunc: authFunc // 자세한 내용은 「License 구성 및 사용 - 서명」 참고
};
// SDK 입력 스트림
const stream = await navigator.mediaDevices.getUserMedia({
 audio: true,
 video: { width: w, height: h }
})

const config = {
 module: { // 0.2.0의 새로운 기능
     beautify: true, // 스티커는 물론 뷰티 및 메이크업 효과를 제공하는 효과 모듈 활성화 여부
     segmentation: true // 배경을 변경할 수 있는 키잉 모듈 활성화 여부
 },
 auth: authData, // 인증 매개변수
 input: stream, // input 스트림
 beautify: { // 초기화를 위한 효과 매개변수(선택 사항)
     whiten: 0.1,
     dermabrasion: 0.3,
     eye: 0.2,
     chin: 0,
     lift: 0.1,
     shave: 0.2
 }
}
const sdk = new ArSdk(
 // sdk를 초기화하기 위해 config 객체 전달
 config
)

const config = {
 auth: authData, // 인증 매개변수
 input: 'https://xxx.png', // input 스트림
}
const sdk = new ArSdk(
 // sdk를 초기화하기 위해 config 객체 전달
 config
)

// created 콜백에 효과 및 필터 목록을 표시할 수 있습니다. 자세한 내용은 「SDK 통합 - 매개변수 및 API」 참고
sdk.on('created', () => {
 // 내장 메이크업 효과 가져오기
 sdk.getEffectList({
     Type: 'Preset',
     Label: '메이크업',
 }).then(res => {
     effectList = res
 });
 // 내장 필터 가져오기
 sdk.getCommonFilter().then(res => {
     filterList = res
 })
})

// ready 콜백에서 setBeautify/setEffect/setFilter 호출
// 자세한 내용은 「SDK 통합 - 뷰티 효과 및 효과 구성」 참고
sdk.on('ready', () => {
 // 뷰티 효과 구성
 sdk.setBeautify({
     whiten: 0.2
 });
 // 특수 효과 구성
 sdk.setEffect({
     id: effectList[0].EffectId,
     intensity: 0.7
 });
 // 필터 구성
 sdk.setFilter(filterList[0].EffectId, 0.5)
})

sdk.on('cameraReady', async () => {
  // cameraReady 콜백에서 출력 스트림을 가져와 비디오 이미지를 더 빨리 표시할 수 있습니다. 그러나 이 시점에서 초기화 매개변수가 적용되지 않았기 때문에 얻은 출력 스트림은 원래 스트림과 동일합니다.
  // 가능한 한 빨리 비디오 이미지를 표시하고 싶지만 표시되는 순간 비디오에 뷰티 효과를 적용할 필요가 없는 경우 이 방법을 선택할 수 있습니다.
  // 뷰티 효과가 작동하기 시작한 후에는 stream을 업데이트할 필요가 없습니다.
  const output = await ar.getOutput();
  // video를 사용하여 출력 스트림을 미리보기
  const video = document.createElement('video')
  video.setAttribute('playsinline', '');
  video.setAttribute('autoplay', '');
  video.srcObject = output
  document.body.appendChild(video)
  video.play()
})

sdk.on('ready', async () => {
  // ready 콜백에서 출력 스트림을 가져오면 초기화 뷰티 효과 매개변수가 이 시점에서 적용되었기 때문에 얻은 output stream에 뷰티 효과가 표시됩니다.
  // ready 콜백은 cameraReady보다 늦게 발생합니다. 비디오가 표시되는 순간 효과를 보여주길 원하지만 가능한 한 빨리 표시되기를 기대하지 않는 경우 output 스트림을 ready 상태로 가져올 수 있습니다.
  const output = await ar.getOutput();
  // video를 사용하여 출력 스트림 미리보기
  const video = document.createElement('video')
  video.setAttribute('playsinline', '');
  video.setAttribute('autoplay', '');
  video.srcObject = output
  document.body.appendChild(video)
  video.play()
})