RECORD

2021.10.09 - [Zoom 클론] - Camera

Camera

여기에서 Camera에 관한 얘기를 담았던 적이 있다. 이 글을 한번 읽고 오는 것을 추천!!!

 

upload.pug에 먼저

버튼을 만들고

record.js

stream을 만들어 주었는데 갑자기 !?

regeneratorRuntime 오류가 발생했다.

전에 ZOOM에서 사용할 때는 문제가 안났었는데 socketIO덕분이었나??

프론트엔드상에서 async와 await를 쓰려면 
regeneratirRuntime을 설치해야 한다고 한다. 프로미스를 사용하면 상관없긴한데 편의성을 위해 쓰고싶다.
고로 설치하자.

 

프론트엔드에서 사용되더라도 npm에서 설치해줘야 한다.

npm i regenerator-runtime

설치한 뒤 

 

record.js에 import를하면 에러가 안난다. 우리는 이 문장을 main으로 옮기고 main을 base.pug에서 실행시켜주자 그럼 모든 페이지에서 async await를 사용할 수 있다.

 

upload.pug에 

start버튼을 누르면 video에 카메라에 비치는 영상이 나오도록 하려고한다.

 

upload.pug

record.js

stream을 받아오고 video.srcObject에 넣어준 뒤 play()를통해 실행시켜주면 

화면에 나의 어굴이 비치는 것을 확인할 수 있다.!!

 

이제 해보려고하는 것은 기본적으로 카메라가 작동이 되고 startButton을 누르면 녹화가 시작된다.  그리고 startButton의 innerText는 stopButton으로 바뀌고 원래의 startButton click event 기능을 지우고 stopButton click event 기능을 집어 넣어줌으로써 새로운 기능이 동작하도록 바꾸어 준다. 

init()을 해줌으로써 바로 카메라가 켜진다.

start recording 버튼을 누르면 innerText가 stop recording으로 바뀌고, 녹화기능인 recorder를 만들어주고 start()로 녹화를 시작한다. 그리고 현재 기능을 지우고 새로운 handleStop기능을 입혀준다.

여기서 stream과 recorder는 전역변수로 만들어 여러 함수에서 사용할 수 있도록 하였다. 현재 녹화 진행중!!

이제 stop recording을 누르면 innerText가 Download record로 바뀌고 녹화가 끝나면 실행되는 event dataavailable 기능을 만들어 준다. 그리고 녹화를 종료한다. e.data는 blob이 담겨있다. 그리고 그 blob을 URL로 바꾼 뒤 videoUrl이라는 변수에 담아둔 후 video.src에 담아서 video에 흘러나오도록 한다. 앞서 stream을 저장해 두었던 srcObject는 null값으로 만들어 주었다. ( null값으로 바꾸지 않으면 video.src기능이 씹힌다. ) 그리고 반복재생 기능을 담아주고 play()로 실행시켜주면 우리가 찍은 동영상이 무한반복 되는것을 확인할 수 있다.

앞서 했던 대로 기존 click이벤트를 지우고 새로운 이벤트를 추가해준다.

a라는 태그를 만들고 거기에 앞서 e.data를 통해 blob을 url로만든 videoUrl의 값을 넣어준다. 이 URL은 현재 브라우저에만 존재하는 파일이다. 브라우저를 끄면 사라지는 것이다. 가상의 URL을 만들어 거기에 잠깐 파일을 저장해 두는 느낌이다. 

a태그를 body에 추가하고 download속성을 넣어준다. 니코쌤말로는 이 페이지로 이동하지 않고 download를 해준다고 하셨지만 실제로 내가 해봤을 때 있으나 없으나 이동하지않고 다운로드만 잘 되었다. 하지만 파일의 이름은 download속성을 적어주어야 이름이 잘 출력이 되었다. 무튼 그 a태그를 click()해주는 기능까지 만들면 우리가 찍은 영상이 다운로드까지 잘 되는 것을 확인할 수 있다.

 

여기서 확장자를 mp4로 적어주면 잘 작동이 안할 때가 많다. 따라서 우리는 ffmpeg라는 소프트웨어를 통해서 바꾸어주어야한다.