Express- Getting User Media && recording video && download (포스트 작성예정)

1. recording video

create videoRecorder.scss, videoRecorder.js   && upload.pug modify

 

mediadevice mdn

https://developer.mozilla.org/ko/docs/Web/API/MediaDevices

MediaDevices - Web API | MDN

getVideo 함수를 만들어서 웹캠애 접근까지 함.

navigator.mediaDevices.getUserMedia()를 이용. 웹캠을 작동시키는 것 까지만 했음

try catch finally 구문~~ finally는 최종적으로 무조건 실행 해주는 스코프

pythondml try except finally와 같다. 근데.. finally가 있는걸 몰랐다 ㅡㅡ;; 이거 알았으면 다른거 할때 편햇을 텐데;;

지식의 부족이다.

 

 

실제 레코딩은  MediaReocder()를 통해 다룬다

 

startRecording함수를 통해 레코딩 데이터를 얻는다. steam정보를 전역변수로 설정해서 담아주고 다른 스코프에서 쓸수 있도록 해주자

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

MediaRecorder - Web APIs | MDN

 

데이터는 레코딩이 끝나야 얻을 수 있다.

전체 레코딩이 끝난 시점에서 전체 파일로 데이터를 알 수 있다는 것이다.

** Blob - blob은 0,1로 구성된 파일이다 (binary??)

 

전체 레코딩이 끝난 것으로 구성할 것이기 때문에 끝나는 시점에 데이터를 저장한다

stopRecording함수를 만들어서 비디오레코더를 스탑시키고 버튼에 이벤트를 다시 지정해줌

화면 끝내는 함수를 지정해서 스탑되면 웹캠도 꺼준다.

 

이제 handleVideoData함수를 정의 해주자. 녹화후 데이터를 받아서 링크를 생성후 링크에서 objectURl를 임의로 생성해

바로 다운로드 해준다. fake click으로 링크를 클릭하게 한다.