영상 연결 시스템을 다루다 보면 브라우저, 특히 모바일에서 영상 연결이 오래 지속될 경우
발열, 화면 멈춤, 느려짐 같은 현상이 발생하는 걸 종종 볼 수 있다.

그동안은 “기기 문제겠지”라고 넘겼지만,
WebRTC 내부 구조가 어떻게 작동하는지, 왜 그런 문제가 생기는지 공부해보기로 했다.

WebRTC에서 발열/성능 저하가 발생하는 구조

찾아보면서 아래와 같은 지점에서 성능 이슈가 발생할 수 있다는 걸 알게 되었다:

1. getUserMedia 호출 시 고해상도 요청

  • 기본 요청은 HD(1280x720) 이상일 수 있음
  • 모바일에서 고해상도는 CPU와 배터리 부담이 큼
// 적절한 해상도 지정
navigator.mediaDevices.getUserMedia({
  video: { width: 640, height: 360, frameRate: 15 },
  audio: true,
});

고해상도 + 고 FPS → 모바일 발열 발생 가능성 ↑

2. WebRTC는 왜 발열을 유발할까? — 코덱과 인코딩의 역할

WebRTC는 단순히 카메라 화면을 전송하는 것이 아니라, 실제로는 매 프레임마다 영상 데이터를 압축(인코딩) 해서 보내는 과정을 거친다.

이때 사용되는 압축 방식이 바로 코덱(codec) 이며, 대표적인 예로는 다음과 같은 것들이 있다:

  • VP8: WebRTC에서 기본으로 사용되는 코덱. 성능이 안정적이고 브라우저 호환성이 좋음.
  • VP9: 고효율 코덱이지만 CPU 사용량이 많음
  • H.264: 하드웨어 가속 지원이 많은 코덱. 모바일에서는 이로 인한 발열이 심해질 수 있음

실제 동작 방식

  • 카메라에서 30fps 영상 프레임을 받음
  • 브라우저(WebRTC)가 이 프레임들을 선택된 코덱(VP8, H.264 등)으로 인코딩
  • 네트워크로 전송
  • 수신자는 압축된 영상을 디코딩하여 렌더링

이 과정을 매 초당 수십 프레임 반복하며 실시간으로 처리하기 때문에, CPU나 GPU 사용량이 많아지고 발열 또는 성능 저하(쓰로틀링) 이 발생할 수 있다.

결론: WebRTC의 발열은 단순히 영상 때문이 아니라, 그 영상을 압축해서 보내는 과정(=인코딩) 자체에서 발생한다.

그럼 이런 문제는 어떻게 해결할 수 있을까?

1. 해상도와 프레임레이트를 낮춰 요청

navigator.mediaDevices.getUserMedia({
  video: { width: 640, height: 360, frameRate: 15 }, // // 초당 15 프레임(frames per second). 낮출수록 CPU/GPU 사용량과 발열 감소
  audio: true,
});
  • 영상 품질을 약간 희생하더라도, CPU 부하와 발열을 크게 줄일 수 있다.
  • 모바일에서는 특히 이 설정이 중요

2. 필요하지 않을 땐 video 요소 제거 또는 트랙 중지

videoElement.srcObject = null;
// 또는
track.stop();
  • 백그라운드나 연결 종료 시 영상 DOM을 제거하거나 미디어 스트림을 중단해 GPU/CPU 사용량을 낮춘다.

3. 코덱 우선순위 조정 (setCodecPreferences)

const transceiver = peerConnection.addTransceiver(track);
const codecs = RTCRtpSender.getCapabilities("video").codecs;
const preferred = codecs.find((c) => c.mimeType === "video/VP8");
transceiver.setCodecPreferences([preferred]);
  • VP8은 비교적 가볍고 발열도 적다고 알려져 있다.
  • 다양한 환경에서 실험이 필요하지만, 모바일에서는 VP9, H.264 선택이 중요할 수 있다.

기초적인 개념 정리와 함께 실제 개선 가능성이 있는 영역을 파악하는 데는 도움이 되었다.

정리한 내용들을 나의 코드에 하나씩 적용해보면서, 어떤 설정이 어떤 효과를 주는지 직접 체감할 수 있을 것 같다.