videorecorder 만들기

// 프론트엔드 상에서 async랑 await를 쓰려면 regenerator-runtime을 설치해야함.
// 아니면 프로미스를 쓰면됨.
// ex) navigator.mediaDevices.getUserMedia(constraints).then(function(stream){}).catch(function(err){});
import 'regenerator-runtime';
import '../scss/styles.scss';

console.log('main');

const startBtn = document.getElementById('startBtn');
const video = document.getElementById('preview');

let stream;
let recorder;
let videoFile;

const handleDownload = () => {
  const a = document.createElement('a');
  a.href = videoFile;
  // download는 url을 저장하게 해줌.
  a.download = 'MyRecording.webm';
  document.body.appendChild(a);
  a.click();
};

const handleStop = () => {
  startBtn.innerText = 'Download Recording';
  startBtn.removeEventListener('click', handleStop);
  startBtn.addEventListener('click', handleDownload);
  // stop 함수는 종료후 ondataavailable가 실행되게 만들어짐.
  recorder.stop();
};

const handleStart = async () => {
  startBtn.innerText = 'Stop Recording';
  startBtn.removeEventListener('click', handleStart);
  startBtn.addEventListener('click', handleStop);

  // MediaRecorder는 말 그대로 녹화해줄 수 있게 도와줌.
  recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
  // ondataavailable는 이벤트 핸들러
  recorder.ondataavailable = (e) => {
    // createObjectURL은 브라우저 메모리에서만 가능한 URL을 만들어줌.
    // 웹사이트 상에 존재하는 URL처럼 보이지만 실제로는 없음.
    // 파일을 가리키고 있는 url이라고 생각하면 됨.
    // 브라우저가 그 파일에 접근할 수 있는 url을 주는거.
    videoFile = URL.createObjectURL(event.data);
    video.srcObject = null;
    video.src = videoFile;
    video.loop = true;
    video.play();
  };
  recorder.start();
};

const init = async () => {
  // 사용자의 navigator에서 카메라와 오디오를 가져다줌.
  stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
  });
  // 비디오 미리보기 기능 구현.
  // srcObject는 MediaStream, MediaSource, Blob, File을 실행할때 video에 주는 무언가를 의미
  // url은 src, (MediaStream, MediaSource, Blob, File)은 srcObejct
  video.srcObject = stream;
  video.play();
};

init();

startBtn.addEventListener('click', handleStart);