9.0 Getting User Media
녹화하는 이벤트를 만들었다. 무슨 방법으로 컴퓨터 카메라에 접근을 해서 녹화를 할 수 있는지 궁금했다.
이벤트 발생시키는건 8 시리즈 강의해서 한 것과 같이 하면 된다. video 태그를 이용한다. 카메라에 접근을 하는 함수가 있다. media device navigator mdn 으로 검색을 한다. 지금 연결된 장치에 접근할 수 있는 메소드가 mdn에 친절하게 소개되어 있다. 장치에 접근하는 변수를 만든다. stream으로 변수명을 지었다. 왜 그렇게 지었는지 생각해 봤다. 화면에 내가 나오는지 실시간으로 보여주기 위해서 이렇게 변수명을 지었다. 변수명도 뚜렸하게 어떤 걸 의미하는지 알아야 한다.
그리고 video태그 속성에 src는 참조할 경로를 적는다. 여기서는 바로 화면을 나타내고 있고 어디에 저장하는 것도 아니기에 srcObject에 stream을 속성으로 줬다.
에러 처리는 녹화가 안되면 녹화버튼에 녹화할 수 없다는 문장이 나온다. 녹화버튼의 이벤트를 끊는다.
9.1 ~ 9.2 Recording Video
navigator.mediaDevices.getUserMedia
영상 기록을 하는 이벤트를 걸었다. 이슈였던건 녹화를 시작할 때 녹화 있는 동안 data를 바로 볼 수 있게 함수를 걸어 놨는데 받을 수가 없었다. 고민을 하다가 강의를 9.1에서 9.2로 넘어갔다. 넘어가는 사이에 왜 안 녹화를 시작하고 바로 data를 받을 수 없는 이유를 찾으려고 했다. mdn을 보고 생각도 해봤다. 녹화를 시작하면 바로 data를 받을 수 있는게 아니라 녹화를 끝내고 받아야 되지 않나? 생각을 하고 접근을 했다. console.log 도 찍어보고 어떤 data 가 바뀌는지 확인도 해봤다. setTimeout 함수를 이용해서 녹화 시작하고 5초 뒤에 녹화를 끝내는 로직을 구현했다. 5초 뒤에 data를 받는 것을 확인했댜. 오 찾았다. 우선 해결하고 다음 영상을 받다. 니콜라스도 같은 방법으로 찾았다. 거기에 한가지 더 기능이 있었다. 녹화하는 중간 중간에 파일을 받을 수 있게 option을 추가할 수 있었다. 시간을 설정해 놓고, 정해놓은 시간마다 data를 받는 형식이었다. 1000로 설정하면 1초마다 data를 받을 수 있었다. 상황에 맞게 사용하면 될거 같다.
