[웹 개발] WebRTC와 MediaRecorder API, 그리고 외부 장치 사용까지

최근 브라우저만으로도 영상 통화, 음성 녹음, 실시간 스트리밍이 가능한 시대가 되었다. 별도의 네이티브 애플리케이션 없이도 이런 기능을 구현할 수 있게 된 데에는 WebRTC와 MediaRecorder API라는 두 가지 기술이 핵심 역할을 한다. 본 글에서는 이 두 기술의 기본 원리와 차이점, 그리고 내가 실제로 개발한 SK AX AI 면접관 도우미 "SK AXIS" 프로젝트에서 외부 카메라와 외부 마이크를 사용하는 과정에서 느낀 점을 정리해보고자 한다!

 

 

 

1. WebRTC(Web Real-Time Communication): 웹 브라우저 간의 실시간 영상/음성/데이터 통신을 가능하게 하는 기술

 

대표적인 사용 사례로는 Google Meet, Discord, Zoom Web 버전 등이 있다.

\WebRTC는 다음과 같은 과정을 통해 동작한다.

 

1. getUserMedia()로 영상/음성 스트림을 가져옴

2. RTCPeerConnection을 통해 상대와 연결

3. RTCDataChannel로 데이터 교환

 

※ P2P 목적이 아니라 '단일 사용자 영상/음성 캡처 및 녹화'가 목적이라면, WebRTC 없이 getUserMedia() + MediaRecorder API만으로도 충분하다

 

WebRTC의 장점은 실시간성(Real-Time)에 있다. 서버를 거치지 않고 브라우저 간 직접 연결(P2P)이 이루어지므로 딜레이가 거의 없다. 이러한 특성 덕분에 실시간 면접 평가 시스템에서도 WebRTC를 채택하게 되었다. 면접자의 표정, 제스처, 말투 등 비언어적 표현을 실시간으로 캡처하고 처리하는 데 매우 적합하다고 판단했다.

 

 

 

2. MediaRecorder API: 브라우저에서 스트림(영상/음성)을 녹화하고 파일 형태로 저장할 수 있게 해주는 기술

MediaRecorder API는 HTML5에서 확장된 Web API 중 하나로, 브라우저가 기본 제공하는 HTML5 기능 일부이다!

 

예를 들어 getUserMedia()나 WebRTC로 얻은 스트림을 녹화하여 webm, mp4 등의 형태로 저장할 수 있다.

사용 방법은 간단하다.

const recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' });
  saveAs(blob, 'recording.webm'); // 서버 업로드 또는 다운로드
};

 

MediaRecorder는 WebRTC와는 달리 실시간 전송은 하지 않지만, 기록 저장에 특화되어 있다. 난 실제로 이 두 기술을 조합하여 실시간 면접 스트리밍 + 영상 녹화 저장을 동시에 구현할 수 있었다.

 

 

 

3. WebRTC + MediaRecorder 조합

이 두 기술은 상호보완적이다. WebRTC로 실시간 스트리밍을 하면서, 동시에 그 스트림을 MediaRecorder로 녹화할 수 있다. 예를 들어, 면접 중에 WebRTC로 실시간 분석 데이터를 AI로 보내고, 동시에 MediaRecorder로 저장하여 나중에 재검토할 수 있게 하는 구조이다.

 

이처럼 두 기술을 조합하면 다음과 같은 워크플로우를 구성할 수 있다.

카메라/마이크 입력
    ↓
getUserMedia()로 스트림 획득
    ↓
┌────────────┬────────────────────┐
│ WebRTC     │ MediaRecorder      │
│ → AI 분석  │ → 영상 파일 저장   │
└────────────┴────────────────────┘

 

 

 

+ 외부 카메라와 마이크 사용 시 유의점

나는 프로젝트에서 노트북 내장 장치 대신, 외부 장치를 사용하는 상황에 놓이게 되었다. 예를 들어 고음질 붐 마이크, 고해상도 웹캠 등을 활용하려 했는데, 다행히도 WebRTC와 MediaRecorder는 이런 외부 장치를 제한 없이 지원한다. 다만 몇 가지 설정이 필요했다.

 

(1) 외부 장치 ID 확인

외부 장치를 선택하려면 먼저 사용 가능한 장치 목록을 조회해야 한다.

navigator.mediaDevices.enumerateDevices().then(devices => {
  devices.forEach(device => {
    console.log(device.kind, device.label, device.deviceId);
  });
});

(2) 특정 장치 사용

이후 원하는 장치를 명시적으로 선택할 수 있다.

const constraints = {
  video: { deviceId: { exact: '외부카메라_ID' } },
  audio: { deviceId: { exact: '외부마이크_ID' } }
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => { /* 스트림 처리 */ });

(3) 운영체제 설정

• macOS) 보안 및 개인 정보 보호 > 카메라/마이크 접근 허용
• Windows) 앱 권한 설정에서 카메라/마이크 허용

 

 

개인적으로 내가 느낀 장단점!

장점

• WebRTC는 매우 실시간성이 뛰어나고, Vue와의 궁합도 좋았다.
• MediaRecorder는 브라우저 내에서 빠르게 녹화 및 저장이 가능해 FFmpeg를 연동해 후처리하기도 쉬웠다.
• 외부 장치 지원이 완벽에 가까워, 고성능 장치를 사용한 면접 영상 녹화도 안정적으로 구현할 수 있었다.

단점

• WebRTC의 P2P 연결은 NAT 환경에 따라 끊기기도 했으며, 안정화를 위해 *TURN 서버 구성이 필요할 수도 있다.
• MediaRecorder는 인코딩 설정이 제한적이어서, 고품질 압축이나 포맷 변환에는 FFmpeg가 필수였다.

*TURN 서버: WebRTC가 P2P 연결에 실패했을 때, 중계(relay) 역할을 하는 서버, 우리 프로젝트에서는 다른 기기 간 영상/음성 스트리밍이 오가는 경우가 아니기 때문에 필요가 없었다!

 

 

 

 

WebRTC와 MediaRecorder는 웹 FE에서 전통적인 네이티브 앱의 한계를 뛰어넘는 강력한 무기이다. 특히 나는 외부 장치를 사용하는 상황에서도 예상보다 훨씬 간편하게 연동할 수 있었던 점이 인상 깊었다. 브라우저 기술은 분명 계속 진화하고 있으며, 이를 잘 활용하면 복잡한 시스템도 작고 유연하게 설계할 수 있다.

 

향후 이 기술들을 기반으로, AI 면접 시스템의 정밀도와 편의성을 모두 잡는 구현을 계속해나갈 예정이다 :D