WEBRTC 화질향상
WEBRTC 화질향상방법에는 아래와 같습니다.
- Constraints 설정:
getUserMedia()함수에서 video constraints를 설정하여 높은 해상도를 요청하세요. - 코덱 변경: 일부 코덱은 더 높은 화질을 제공할 수 있습니다. H.264나 VP9를 사용해보세요.
- Bitrate 조절: PeerConnection의
setParameters를 사용하여 비트레이트를 조절할 수 있습니다. - QoS 설정: 네트워크 품질을 최적화 하여 패킷 로스를 줄입니다.
- 프레임율 설정: 필요하다면 높은 프레임율을 설정하여 부드러운 비디오를 전송하세요.
- Adaptive Jitter Buffer: 네트워크 지터를 줄이기 위한 설정입니다.
- RTCPeerConnection의 설정:
RTCPeerConnection생성시에 다양한 설정 옵션을 주어 성능을 높일 수 있습니다.
코드 작성시에 변경사항을 검증하는 것도 중요합니다.
Constraints 설정: WEBRTC 화질향상하기 위해 getUserMedia() 함수에서 video constraints를 설정하여 높은 해상도를 요청하세요.
아래의 수정된 부분에서 주목해야 할 것은 constraints 변수에 추가된 화질 설정입니다. 1080p 해상도로 설정했습니다.
// 원래 코드
var constraints = {
audio: document.getElementById('use-audio').checked,
video: {
facingMode: 'environment' // 뒷면 카메라 사용
}
};
// 수정된 코드
var constraints = {
audio: document.getElementById('use-audio').checked,
video: {
width: 1920,
height: 1080,
facingMode: 'environment' // 뒷면 카메라 사용
}
};이 변경사항을 코드에 적용하면 WebRTC 연결에서 비디오 해상도가 1080p로 설정됩니다. WEBRTC 화질향상을 위한 이 외의 고급 설정은 복잡성을 추가할 수 있으므로, 우선은 이 변경만으로 화질 향상을 체크해보세요.
코덱 변경: 일부 코덱은 더 높은 화질(WEBRTC 화질향상)을 제공할 수 있습니다. H.264나 VP9를 사용해보세요.
링크 페이지에서 코덱 대한 테스트를 수행하였고 결과를 참고하여 적용하면 좋을것 같습니다.
3가지 변수를 변경하여 수행되었습니다.
- 코덱: VP8, VP9, H264, AV1
- 해상도: HD, VGA, QVGA
- 비트 전송률: 200Kbps, 800Kbps, 2Mbps
출처 : https://developer.mozilla.org/ko/docs/Web/Media/Formats/Video_codecs
AV1
AOMedia Video 1 (AV1) 코덱은 Alliance for Open Media 기관이 인터넷 비디오를 위해 개발한 오픈 포맷입니다. VP9, H.265/HEVC 보다 압축율이 높으며, AVC보다 50% 이상 압축율이 높습니다. AV1은 완전한 로열티 프리이며 <video> 엘리먼트와 WebRTC에서 사용하기 위해 설계하였습니다.
현시점의 AV1의 주요 문제점은 새로운 포맷이며 브라우저에 연동이 아직 진행중에 있다는 것입니다. 또한 인/디코더도 최적화해야 하며 하드웨어 인/디코더는 제품화되지 않아 아직 개발중입니다. 이러한 문제점들이 소프트웨어적으로 해결되기 전까지는 비디오 인코딩을 AV1 포맷으로 전환하는데 시간이 소요될 것입니다.
AVC (H.264)
MPEG-4 스펙 집합 중 Advanced Video Coding (AVC) 표준은 ITU H.264 스펙 및 MPEG-4 Part 10 스펙과 동일한 것입니다. TV 방송, 영상회의, 블루레이 디스크 미디어를 포함한 모든 종류의 미디어에 사용되는 움직임 보상에 기반한 코덱이죠
AVC는 유료 포맷이지만 무수한 특허들이 개입한 여러 단체에 소유권이 나뉘어져있습니다. 상용 목적일때는 AVC 미디어 라이선스가 필요하지만 인터넷 환경에서 최종 사용자에게 비디오가 무료로 스트리밍하는 경우에는 MPEG LA 특허권자가 라이선스를 요구하지 않습니다.
VP9
Video Processor 9 (VP9)는 구글이 VP8 표준의 후속으로 개발하였습니다. VP8과 마찬가지로 VP9는 완전한 로열티-프리 오픈 소스입니다. 인코딩/디코딩 퍼포먼스는 AVC에 비해 더 높은 품질을 유지하면서도 약간 더 빠릅니다. VP9로 인코딩한 비디오의 품질은 비슷한 수준의 비트레이트에서 HEVC에 견줄만합니다.
VP9은 이전 제품에 비해 향상된 비디오 품질과 경험을 제공합니다. VP9의 가장 중요한 장점은 감소된 비트 전송률로 고품질 비디오를 제공할 수 있는 능력으로, 이는 데이터 소비를 줄이고 네트워크 리소스를 보다 효율적으로 사용할 수 있다는 것입니다. 이는 대역폭이 제약이 되는 상황에서 VP9를 특히 유용하게 만듭니다. 예를 들어, 개발도상국과 같이 대역폭이 제한된 시장을 목표로 하는 경우 VP9이 제공하는 데이터 소비 감소의 이점을 누릴 수 있으므로 사용자는 네트워크 인프라에 과부하를 주지 않고 더 나은 비디오 품질을 즐길 수 있습니다.
VP8
Video Processor 8 (VP8) 코덱은 최초 On2 Technologies가 개발했습니다. Google은 On2 인수 후, VP8 관련된 특허와 무관하게 완전한 오픈 로열티-프리 라이선스로 출시했습니다. 압축률과 품질의 면에서 VP8은 AVC에 견줄만 합니다.
브라우저가 지원한다면 V8에서 알파 채널을 쓸 수 있으며 비디오 뒤의 백그라운드 이미지를 알파 채널 픽셀과 겹쳐 볼 수도 있습니다.
HTML 콘텐츠로써 특히 WebM 파일에 포함된 VP8을 지원하는 좋은 브라우저가 많습니다. 이는 VP8이 여러분의 콘텐츠로 좋은 선택이 될 수 있으며 가능하다면 더 좋은 VP9를 선택할 수도 있습니다. 웹브라우저는 WebRTC를 위해 VP8을 반드시 지원해야 합니다. 하지만 HTML Audio video 엘리먼츠에는 꼭 VP8을 지원할 필요는 없습니다.
Bitrate 조절
PeerConnection의 setParameters를 사용하여 비트레이트를 조절할 수 있습니다.
function createPeerConnection() {
// ... (기존 코드)
pc = new RTCPeerConnection(config);
console.log("PeerConnection 생성됨:", config);
// 비트레이트 설정
pc.onnegotiationneeded = async function() {
var sender = pc.getSenders()[0];
var parameters = sender.getParameters();
if (!parameters.encodings) parameters.encodings = [{}];
parameters.encodings[0].maxBitrate = 50000; // 50 kbps
await sender.setParameters(parameters);
};
// ... (기존 코드)
return pc;
}
비디오 보존, 편집, 믹싱을 위한 추천
웹 브라우저에서 사용 가능한 무손실-아니면 거의 무손실-비디오 코덱은 현재 없습니다. 이유는 간단한데:비디오는 거대합니다. 무손실 압축은 손실 압축에 비해 비효율적입니다. 예를 들어 4:2:0 크로마 서브샘플링의 무압축 1080p 비디오(1920*1080 픽셀)는 최소 비트레이트가 1.5Gbps가 넘죠. FFV1(브라우저 미지원) 같은 무손실 압축 코덱을 사용하면 콘텐츠에 따라 다르지만 600 Mbps 근처로 줄일 수 있습니다. 하지만 네트워크로 보내이겐 여전히 엄청난 크기이며 현실적으로 불가능한 사이즈입니다.
손실 코덱이 무손실 모드를 가지고 있다 하여도 별 반 다르지 않는데;현재 웹 브라우저에서 무손실 모드를 구현하고 있지 않기 때문입니다. WEBRTC 화질향상을 위한 최선은 손실 압축을 사용하는 코덱 중 최대한 고품질 코덱을 선택한 뒤 최소한의 압축만 수행하도록 설정하는 것입니다. 한가지 방법은 코덱을 설정하기를 “fast” 압축을 선택하는 것입니다. 일반적으로 이는 압축을 최소화합니다.