웹브라우저에서 웹캠 비디오 녹화 및 재생을 구현하기 위한 리서치

Webcam을 사용하기 위한 리서치

1) 웹브라우저에서 사용자의 캠에 접근하는 방법

• 브라우저에서 WebRTC관련 Web API인 MediaStream API를 제공한다.
  • WebRTC(Web Real-Time Communications)란 웹, 앱에서 별도의 소프트웨어 없이 음성, 영상, 파일같은 데이터를 공유할 수 있는 기술이다.
• WebRTC의 주요 API 3가지
  • MediaStream
  • RTCPeerConnection
  • RTCDataChannel

2) MediaStream - getUserMedia

• 사용자에게 미디어 입력 장치에 대한 Permission을 요청하는 메서드다.
• 사용자가 요청을 수락한다면 요청한 미디어 트랙을 포함한 MediaStream객체를 반환한다.
• 요구사항
  • HTTPS에서만 이용 가능하다.
  • 사용자가 권한을 거절한다면 사용자가 직접 풀어주지 않는이상 되돌릴 방법이 없다.
    => 사용자가 알아볼 수 있도록 안내문을 만들었다.

3) MediaRecorder (RecordRTC Library사용)

• 미디어를 녹화할 수 있는 기능을 제공하고 MediaRecorder()생성자로 생성할 수 있다.
• 좀 더 손쉽게 녹화 관련 기능을 사용하기 위하여 RecordRTC 도입

4) 동영상을 압축하기위한 코덱 - VP8

• RecordRTC에서 사용 가능한 코덱중 Chrome, Safari, Edge, Firefox, Opera, IOS, Android등 대부분의 플랫폼에서 이용 가능한 VP8코덱을 이용했다.
  • 지정하지 않을 경우, mac os의 chrome에서는 x-matroska로 자동 인코딩 되었다.
  • Media Recorder에서 mp4를 지원하지 않는다.
• VP8 코덱에서 사용 가능한 컨테이너(확장자)중 webm으로 인코딩 하였다.
  

5) IOS에서 webm 영상이 재생되지 않는 문제 발생

• IOS에서 VP8로 오디오는 인코딩은 되지만, 비디오는 되지 않는 문제가 발생했다.
  => 찾아본 결과 IOS15부터 webm audio는 지원하지만 영상은 현재 지원하지 않고 있었다.
• 대부분의 플랫폼에서 이용 가능한 mp4로 컨버팅하기로 결정했다.

6) 컨버팅 하는 두가지 방법 (1번 선택)

1. 브라우저에서 webm으로 인코딩 후 저장한 뒤 서버에서 mp4로 컨버팅
   • 서버에서 FFmpeg로 컨버팅 하여 저장한다.
2. 브라우저에서 mp4로 컨버팅
   • 별도의 서버가 필요없지만, 작업 도중에 브라우저를 종료하게 된다면 컨버팅 과정이 모두 날아간다.
   • 사용자의 기기마다 해당 코덱의 유무를 알 수 없다.

7) 서버에서 컨버팅 과정

1. FFmpeg라는 System library를 설치한다.
2. S3에 저장된 webm파일을 가져온 뒤, H.264코덱을 이용하여 mp4로 컨버팅한다.
3. 컨버팅이 되는 동안 브라우저에서 요청이 온다면 인코딩중이라는 응답을 내려준다.