JavaScript video recording

videoRecorder.js

upload.pug

videoRecorder.js

view

소스 코드 분석

view

init()

recordBtn을 누르면 getVideo가 실행이 된다.

getVideo()

  getVideo()는 navigator.mediaDevices.getUserMedia()는 새로운 MediaStream을 요청한다. 이 stream이 우리가 recording 하는 것이다.

  videoPreview는 녹화되는 display 화면이다. videoPreview.play()로 현재 녹화되고 있는 영상을 실시간으로 확인할 수 있다.

  navigator.mediaDevices.getUserMedia()로 얻은 stream을 startRecording으로 보낸다.

startRecording()

  input stream을 다루는 MediaRecorder를 생성한다. 그리고 recorder.start()로 녹화를 시작한다.

  dataavailable 핸들러를 생성한다. 이 이벤트는 녹화를 start하고 stop했을 때 발생한다. 즉, 녹화가 끝났을 때 녹화 파일을 처리하는 핸들러다.

stopRecording()

recordBtn을 다시 누르면 recorder.stop()이 되어서 recording이 멈춘다. 그리고 recorder.addEventListener('dataavailable', handleVideoData)가 실행이 된다.

handleVideoData()

녹화가 끝난 영상을 다운로드 받을 수 있는 url을 생성한다.

참고 자료

• 노마드 코더의 유튜브 클론 강의
• Recording a media event
•  

소스 코드

github.com/zpskek/wetube-v3/commit/8354a6139aa1be11ae33604c485a6f0339942cca