Video Recorder

1. Video Recorder

 - 버튼을 누르면 영상촬영이 되는 기능 구현

 - recorder.js파일 만들고 웹팩 entry에 알아서 만들고 업로드에 버튼 만들거임

 - 버튼을 누르면 유저의 카메라에 접근 권한이 생기고 유저에게 녹화된 영상을 미리보기 해주고 그걸 저장까지 되게 해야 함

 - https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

MediaDevices: getUserMedia() method - Web APIs | MDN

 - navigator.mediaDevices.getUserMedia()은 시작되는데까지 시간이 걸림

   - 카메라와 마이크의 사용 여부를 기다려야 하기 때문

 - getUserMedia()을 호출하면 데이터 stream을 불러옴

   - 이 함수는 constraints라는 객체를 인자로 받는데 거기엔 오디오와 비디오가 있음

 - 공부할 땐 주로 데탑으로 하다보니 카메라가 없어서 오디오만 사용

 - 강의에서는 regeneratorRuntime이 정의되지 않았다고 나옴

   - 이 에러는 프론트엔드 상에서 async와 await을 쓰려면 regeneratorRuntime 설치가 필요한데, 이제는 자동으로 설치됨

 - 또한 카메라나 마이크가 없다면 device not found가 에러가 발생하므로 현 단계에선 마이크만이라도 사용해보길 권장

2. Video Preview

 - 현재 녹화버튼은 navigator의 mediaDevices API를 호출하고 있고 그안에는 getUserMedia 함수가 있음

 - 그리고 마이크와 카메라의 사용권한을 받게되면 stream을 받아오게 됨

 - 아직 아무것도 주지 않고 있지만 카메라에 잡힌 부분을 미리보기 할 수 있게 됨

 - video element를 추가하여 카메라로부터 얻은 steram을 video element에 담을 거임

 - upload.pug에 미리보기를 추가할건데 watch.pug에는 영상의 url이 있지만 upload.pug에는 없을거임

   - handleStart 함수가 url을 줄거고 stream을 가져다가 video의 내부에 넣을거임

   - 기존 src와 다르게 srcObject는 말 그대로 객체고, 여기에 steam을 넣는다는 것

 - 못생긴 얼굴이 잘 나옴

3. Recording Video

 - 이제 녹화까지 되도록 만들어야 함

   - MediaRecorder를 사용

 - https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

MediaRecorder - Web APIs | MDN

 - 일단 지금 영상이 촬영되는 건 확인했는데 녹화가 안되고 있으니 기존걸 수정

 - 당연하겠지만 handleStart에서 녹화가 되고 handleStop에서 끝이 나야함

 - 문제는 handleStart에서 stream이 필요한데 해당 함수 내에서 정의되지 않았음

   - 우린 init 함수 안에서 const로 만들었음

   - let stream으로 전역변수를 만들고 init에서는 그 stream에 넣어주면 쉽게 됨

 - 비활성화 상태이지만 stream은 잘 들어오고 있음

 - recorder.start()를 하면 끝나지만 우리가 버튼을 누르지 않는 한 무용지물인 상태

 - MediaRecorder의 이벤트중 dataavailable을 사용

 - event.data를 해보면 저장된 데이터가 잘 나옴

 - https://github.com/Daniel-Jeon/wetube-loaded/commit/9202def629a1a451f6e546ae9fff80778035e997

video recorder · Daniel-Jeon/wetube-loaded@9202def