nhn-cd-sdk/examples/js/step3.js

import { useGlobalStore } from './store.js';
import { useEventEmitter } from './event-emitter.js';
import { STEP_RUN } from './constant.js';

const globalStore = useGlobalStore();

useEventEmitter().on('change:step', (currentStep) => {
  if (currentStep === STEP_RUN) {
    showUserData();
  }
});

/**
 * 로컬 스토어
 */
const localStore = {
  videoElement: null,
  buttonGroupElements: {},
  stepButtonGroup: {
    // 준비 중
    loading: [],
    // 대기
    ready: [],
    // 카메라 연결
    connected: [],
    // 녹화
    recoding: [],
    // 녹화 종료
    afterRecording: []
  },
  loading: false,
  // 레코더
  recorder: null,
  // 스트림
  stream: null,
  // 레코딩 데이터
  recordingData: {
    imageUri: null,
    videoUri: null,
    imageBlob: null,
    videoBlob: null
  },
  collector: null
};

window.step3Store = localStore;

/**
 * 초기화
 */
let isInit = false;

function init() {
  if (isInit) {
    return;
  }
  isInit = true;
  setElements();
  bindHandler();
  showUserData();
  showButtonGroup('loading');
  createCollector().then(() => {
    showButtonGroup('ready');
  });
}

/**
 * collector 인스턴스 생성
 * @returns Promise<any>
 */
function createCollector() {
  return new Promise((resolve) =>
    setTimeout(() => {
      resolve(true);
    }, 250)
  ).then(() => {
    // collector 생성 초기옵션
    const collectorConfig = {
      userInfo: {
        ...globalStore.getUserData()
      },
      deviceType: 'pc',
      webAuth: {
        userId: 'webAuth_user',
        token: 'webAuth_token',
        via: 'webAuth_via'
      },
      retryCount: 0,
      authRenewCount: 0,
      authRenewBeforeCallback: (webAuth) => {
        /**
         * 설정 정보 중 webAuth({ userId, token, via})` 의 일부 데이터 갱신이 필요하다면 아래와 같이 새로운 webAuth 정보로 갱신 처리한다.
         * 갱신이 불필요한 경우 Promise.resolve(webAuth)를 반환합니다.
         */
        const tokenAPI = () => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve({ token: 'webAuth_new_token', userId: 'webAuth_new_uid', via: 'new_via' });
            }, 500);
          });
        };

        return tokenAPI().then((newWebAuth) => {
          webAuth.token = newWebAuth.token;
          webAuth.userId = newWebAuth.userId;
          webAuth.via = newWebAuth.via;
        });
      }
    };

    // collector 인스턴스 생성
    globalStore.setCollector(new window.nhnCDSDK.Collector(collectorConfig));
    const collector = globalStore.getCollector();

    // 요청 실패 리스너 등록
    collector.on('api:success', (data) => {
      console.log('요청 결과 : ', data);
    });
    collector.on('api:fail', ({ resultCode, resultMessage }) => {
      console.log(`응답 데이터 에러 : ${resultCode} ${resultMessage}`);
    });
    collector.on('api:error', (error) => {
      console.log('요청 실패', error);
    });
  });
}

/**
 * element 정보 저장
 */
function setElements() {
  const buttonConnect = document.querySelector('#uid_camera_connect');
  const buttonStart = document.querySelector('#uid_record_start');
  const buttonEnd = document.querySelector('#uid_record_end');
  const buttonSendVoiceData = document.querySelector('#uid_send_voice');
  const buttonSendSnapshotData = document.querySelector('#uid_send_snapshot');
  const buttonReset = document.querySelector('#uid_run_ui_reset');
  const buttonRevokeToken = document.querySelector('#uid_revoke_token');
  const configLoadingMsg = document.querySelector('#uid_step3_config_loading');

  localStore.videoElement = document.querySelector('#uid_local_video');
  localStore.resultElement = document.querySelector('#uid_record_result');
  localStore.endTestElement = document.querySelector('#uid_end_test_btn');
  localStore.buttonGroupElements.connect = buttonConnect;
  localStore.buttonGroupElements.start = buttonStart;
  localStore.buttonGroupElements.end = buttonEnd;
  localStore.buttonGroupElements.sendVoiceData = buttonSendVoiceData;
  localStore.buttonGroupElements.sendSnapshotData = buttonSendSnapshotData;
  localStore.buttonGroupElements.reset = buttonReset;
  localStore.buttonGroupElements.revokeToken = buttonRevokeToken;
  localStore.buttonGroupElements.configLoadingMsg = configLoadingMsg;

  localStore.stepButtonGroup.loading = [configLoadingMsg];
  localStore.stepButtonGroup.ready = [buttonConnect];
  localStore.stepButtonGroup.connected = [buttonStart];
  localStore.stepButtonGroup.recoding = [buttonEnd];
  localStore.stepButtonGroup.afterRecording = [buttonSendVoiceData, buttonSendSnapshotData, buttonReset, buttonRevokeToken];
}

/**
 * 상태별 버튼 그룹 노출 제어
 * @param {string} groupName
 */
function showButtonGroup(groupName) {
  if (localStore.stepButtonGroup[groupName]) {
    Object.values(localStore.buttonGroupElements).forEach((button) => {
      button.style.display = 'none';
    });
    Object.values(localStore.stepButtonGroup[groupName]).forEach((button) => {
      button.style.display = 'inline-block';
    });
  }
}

/**
 * 이벤트 바인딩
 */
function bindHandler() {
  // 시험 종료
  localStore.endTestElement.addEventListener('click', function () {
    globalStore.getCommunicator().endTest();
    globalStore.prevStep();
  });
  // 카메라 연결
  localStore.buttonGroupElements.connect.addEventListener('click', connectHandler);
  // 녹화 시작
  localStore.buttonGroupElements.start.addEventListener('click', recodingHandler);
  // 녹화 저장
  localStore.buttonGroupElements.end.addEventListener('click', afterRecodingHandler);
  // 음성 데이터 전송
  localStore.buttonGroupElements.sendVoiceData.addEventListener('click', sendVoiceHandler);
  // 스냅샷 데이터 전송
  localStore.buttonGroupElements.sendSnapshotData.addEventListener('click', sendSnapshotHandler);
  //  UI 초기화
  localStore.buttonGroupElements.reset.addEventListener('click', resetHandler);
  // 초기화
  localStore.buttonGroupElements.revokeToken.addEventListener('click', revokeAccessTokenHandler);
}

/**
 * API 결과 노출
 * @param {string} apiName
 * @param {Object} data
 */
function renderAPIResult(apiName, data) {
  const container = document.querySelector('#uid_step_run_api_result');
  let renderData = '';
  if (data) {
    renderData = JSON.stringify(data, null, '   ');
  }
  let html = '';
  if (apiName) {
    html = `<h4>${apiName}</h4>`;
  }
  container.innerHTML = `${html}${renderData}`;
}

/**
 * 카메라 연결
 */
function connectHandler() {
  window.navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: true }).then((stream) => {
    localStore.stream = stream;
    localStore.videoElement.srcObject = stream;
    showButtonGroup('connected');
  });
}

/**
 * 녹화 시작
 */
function recodingHandler() {
  if (!localStore.recorder) {
    localStore.recorder = window.RecordRTC(localStore.stream, {
      type: 'audio',
      mimeType: 'audio/wav',
      disableLogs: true
    });
  }
  localStore.resultElement.innerHTML = '';
  localStore.recorder.startRecording();
  showButtonGroup('recoding');
}

/**
 * 녹화 저장
 */
function afterRecodingHandler() {
  const { recorder } = localStore;
  recorder.stopRecording(() => {
    const blob = recorder.getBlob();
    if (blob) {
      const URL = window.webkitURL || window.URL;
      const videoUri = URL.createObjectURL(blob);
      const canvas = createSnapshotCanvas();
      const imageUri = canvas.toDataURL('image/jpg');

      canvas.toBlob((canvasBlob) => {
        localStore.recordingData = {
          imageUri: imageUri,
          videoUri: videoUri,
          videoBlob: blob,
          imageBlob: canvasBlob
        };

        renderResult();
        showButtonGroup('afterRecording');
      });
    }
  });
}

/**
 * 레코딩 결과 노출
 */
function renderResult() {
  const { imageUri, videoUri } = localStore.recordingData;
  localStore.resultElement.innerHTML = `
    <h3>레코딩 결과</h3>
    <img src="${imageUri}" width="100" height="80" alt="snapshot" />
    <video src="${videoUri}" controls width="300" height="80" />
  `;
}

/**
 * 스냅샷 캔버스 생성
 * @returns HTMLCanvasElement
 */
function createSnapshotCanvas() {
  const canvas = document.createElement('canvas');
  canvas.width = 640;
  canvas.height = 480;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(localStore.videoElement, 0, 0, canvas.width, canvas.height);
  return canvas;
}

/**
 * 음성 데이터 전송
 */
function sendVoiceHandler() {
  const collector = globalStore.getCollector();
  if (!collector) {
    console.error('collector 인스턴스가 존재하지 않음');
    return;
  }
  const { imageBlob, videoBlob } = localStore.recordingData;
  if (!imageBlob || !videoBlob) {
    console.error('저장된 데이터 없음');
    return;
  }

  const formData = new FormData();
  formData.set(
    'file',
    new File([videoBlob], 'cam-voice.wav', {
      type: 'audio/wav'
    })
  );
  const query = { reqTime: Math.floor(Date.now() / 1000) };

  // collector API 호출
  collector
    .fetchVoiceDetect(formData, query)
    .then((res) => {
      renderAPIResult('음성 데이터 전송', res);
    })
    .catch((err) => {
      const { stack, message } = err;
      let result = { message, stack };
      if (err?.header?.isSuccessful === false) {
        result = { ...err };
      }
      renderAPIResult('음성 데이터 전송', result);
    });
}

/**
 * 스냅샷 데이터 전송
 */
function sendSnapshotHandler() {
  const collector = globalStore.getCollector();
  if (!collector) {
    console.error('collector 인스턴스가 존재하지 않음');
    return;
  }
  const { imageBlob, videoBlob } = localStore.recordingData;
  if (!imageBlob || !videoBlob) {
    console.error('저장된 데이터 없음');
    return;
  }

  const data = new FormData();
  data.append('file', new File([imageBlob], 'cam-snapshot.jpg', { type: 'image/jpeg' }));
  const query = {
    reqTime: Math.floor(Date.now() / 1000),
    camLocation: 'front'
  };

  // collector API 호출
  collector
    .fetchBehaviorDetect(data, query)
    .then((res) => {
      renderAPIResult('스냅샷 데이터 전송', res);
    })
    .catch((err) => {
      const { stack, message } = err;
      let result = { message, stack };
      if (err?.header?.isSuccessful === false) {
        result = { ...err };
      }
      renderAPIResult('스냅샷 데이터 전송', result);
    });
}

/**
 * UI 초기화
 */
function resetHandler() {
  localStore.recordingData = {
    imageUri: null,
    videoUri: null,
    imageBlob: null,
    videoBlob: null
  };
  localStore.resultElement.innerHTML = '';
  localStore.videoElement.srcObject = null;
  showButtonGroup('ready');
  renderAPIResult(null);
}

/**
 * access token 초기화
 */
function revokeAccessTokenHandler() {
  const collector = globalStore.getCollector();
  if (!collector) {
    console.error('collector 인스턴스가 존재하지 않음');
    return;
  }
  // collector API 호출
  collector
    .revokeAccessToken()
    .then((res) => {
      renderAPIResult('access token 초기화', res);
    })
    .catch((err) => {
      const { stack, message } = err;
      let result = { message, stack };
      if (err?.header?.isSuccessful === false) {
        result = { ...err };
      }
      renderAPIResult('access token 초기화', result);
    });
}

/**
 * 유저 정보, api base url 노출
 */
function showUserData() {
  document.querySelector('#uid_user_info_preview_step3').innerHTML = JSON.stringify(globalStore.getUserData());
}

export default {
  init
};