WebCodecs API

이동훈·2025년 3월 18일

웹 애플리케이션이 오디오 및 비디오 코덱을 직접 제어할 수 있도록 햊는 API
웹에서 미디어 데이터를 보다 효율적으로 인코딩 및 디코딩할 수 있다.

1. WebCodecs API란?

웹 브라우저 내에서 오디오 및 비디오 데이터를 직접 처리 할 수 있는 저수준 API입니다.
기존의 <video> 및 <audio> 요소 또는 Media Source Extensions(MSE)와 달리, WebCodecs는 개발자가 코덱을 직접 제어할 수 있도록 설계되었습니다.

2. 주요기능

비디오 디코딩(VideoDecoder)

압축 된 비디오(H.264, VP8, VP9등)을 프레임 단위로 디코딩
WebRTC, WebTransport 등과 함께 사용할 수 있다.

비디오 인코딩(VideoIncoder)

원본 비디오 프레임을 압출 된 형식(H.264, VP8등)으로 변환
미디오 스트리밍 및 녹화에 활용 가능

오디오 디코딩(AudioDecoder)

압축 된 오디오 데이터를 PCM(raw audio) 형식으로 변환

오디오 인코딩(AudioEncoder)

PCM 데이터를 AAC, Opus 등의 압축 오디오 형식으로 변환

Raw Media Handling

WebRTC, WebTransport와 연동하여 지연 없이 미디어 데이터 전송 가능
기존의 MediaRecoder보다 성능 최적화 가능

3. WebCodecs API의 장점

텍스트저지연 미디어 처리
- 실시간 스트리밍 및 화상 회의 애플리케이션에 적합
브라우저 내 네이티브 코덱 활용
-하드웨어 가속을 통해 성능 최적화 가능
미디어 처리에 대한 더 높은 유연성
-비디오 및 오디오 데이터의 직접 제어 가능 (프레임 단위 조작 가능)

예제 코드 (비디오 디코딩)

const decoder = new VideoDecoder({
  output: frame => {
    console.log('Decoded frame:', frame);
    frame.close();
  },
  error: err => console.error(err)
});

decoder.configure({
  codec: 'vp8',
  hardwareAcceleration: 'prefer-hardware'
});

// 압축된 비디오 데이터(예: WebRTC에서 수신한 데이터)를 추가
decoder.decode(new EncodedVideoChunk({
  type: 'key',
  timestamp: 0,
  data: someEncodedData
}));