하울링은 왜 생기는가? 하울링은 간단히 말하면, 자신의 마이크에서 들어온 소리가 다시 자신의 스피커로 출력되고, 그게 다시 마이크로 입력되면서 무한 루프를 타는 상황입니다. WebRTC는 getUserMedia로 마이크와 카메라를 활성화하고, 실시간으로 stream을 주고받기 때문에 이런 구조에서는 오디오 루프가 쉽게 생길 수 있습니다. 여러 방법을 시도해봤습니다 처음에는 아래와 같은 해결책들을 시도했습니다: 연결 직후 마이크를 자동으로 mute 처리 local stream과 remote stream을 분리해 렌더링 오디오 트랙만 따로 추적해서 제어 <audio muted /> 설정 (그러나 의도대로 안 되는 경우도 많음) 하지만 완벽하게 해결되진 않았고, 상황에 따라 다시 하울링이 발생했습니다. ...

프로젝트를 진행하다 보면 어느 순간 상태가 복잡해지기 시작합니다. 처음에는 간단한 기능만 있어서 Context API로도 충분해 보였고, 그렇게 빠르게 개발을 시작했습니다. 하지만 기능이 늘어나고 화면과 상태의 연동이 많아지면서, 상태 관리 구조에 대한 고민이 본격적으로 생겼습니다. Context API에서 발생한 문제 Context는 간단하고 직관적인 구조라는 점에서 좋지만, 하나의 상태가 바뀌면 해당 Provider 아래의 모든 컴포넌트가 함께 리렌더링되는 특성이 있습니다. 이 문제를 해결하기 위해 Provider를 잘게 쪼개는 방식으로 대응해보기도 했습니다. 하지만 상태가 많아지고, 각각의 의존성을 분리해야 하는 상황에서는 점점 코드가 복잡해졌습니다. ...

영상 연결 시스템을 다루다 보면 브라우저, 특히 모바일에서 영상 연결이 오래 지속될 경우 발열, 화면 멈춤, 느려짐 같은 현상이 발생하는 걸 종종 볼 수 있다. 그동안은 “기기 문제겠지”라고 넘겼지만, WebRTC 내부 구조가 어떻게 작동하는지, 왜 그런 문제가 생기는지 공부해보기로 했다. WebRTC에서 발열/성능 저하가 발생하는 구조 찾아보면서 아래와 같은 지점에서 성능 이슈가 발생할 수 있다는 걸 알게 되었다: 1. getUserMedia 호출 시 고해상도 요청 기본 요청은 HD(1280x720) 이상일 수 있음 모바일에서 고해상도는 CPU와 배터리 부담이 큼 // 적절한 해상도 지정 navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 360, frameRate: 15 }, audio: true, }); 고해상도 + 고 FPS → 모바일 발열 발생 가능성 ↑ ...