0. Web RTC 이해

WebRTC 이해

WebRTC(Web Real-Time Communication)는 웹 브라우저와 모바일 애플리케이션에서 별도의 플러그인이나 소프트웨어 설치 없이 실시간 통신을 가능하게 하는 오픈 소스 프로젝트로 대부분의 현대 브라우저(Chrome, Firefox, Safari, Edge 등)에서 지원됩니다.

---

주요 특징

1. P2P(Peer-to-Peer) 통신: 클라이언트 간 직접 통신을 지원하여 중앙 서버의 부하를 줄이고 지연 시간을 최소화합니다.
2. 다양한 미디어 처리: 오디오, 비디오 및 데이터 스트림을 실시간으로 처리할 수 있습니다.
3. 보안: 기본적으로 모든 연결이 암호화되어 안전한 통신을 보장합니다.
4. 적응형 스트리밍: 네트워크 상태에 따라 미디어 품질을 자동으로 조절합니다.

---

핵심 구성 요소

1. 주요 API

• MediaStream (getUserMedia): 카메라와 마이크 같은 미디어 장치에 접근하여 오디오/비디오 스트림을 캡처합니다.
• RTCPeerConnection: 피어 간 오디오/비디오 통신을 담당하는 핵심 컴포넌트입니다.
• RTCDataChannel: 피어 간 임의의 데이터를 주고받을 수 있는 채널을 제공합니다.

2. 시그널링 (Signaling)

• 시그널링은 세션 생성, 네트워크 구성 정보 교환, 미디어 정보 공유 등의 역할을 합니다.

 

※ WebRTC는 직접적인 시그널링 메커니즘을 제공하지 않습니다. 따라서 개발자는 WebSocket, HTTP 등을 사용해 자체 시그널링 서버를 구현이 필요합니다

3. SDP (Session Description Protocol)

• SDP는 WebRTC에서 피어 간 오디오, 비디오, 코덱, 네트워크 정보 등 미디어 통신 설정에 필요한 내용을 담는 텍스트 기반의 메시지 포맷입니다.
• WebRTC에서는 Offer/Answer 방식을 사용하여 SDP를 서로 주고받고, 이를 통해 서로 지원하는 미디어 형식과 연결 방식에 대한 협상을 진행합니다.

※ 쉽게 설명하면 SDP는 서로 어떤 방식으로 미디어를 주고받을지 약속하는 설명서 같은 역할을 합니다.

4. ICE (Interactive Connectivity Establishment)**

WebRTC에서 피어 간 연결을 설정할 때, 가능한 모든 네트워크 경로(IP, 포트 등)를 수집하고, 이 중에서 가장 안정적이고 빠른 경로를 선택해 연결을 시도하는 프레임워크입니다.

 

5. STUN (Session Traversal Utilities for NAT)

NAT(Network Address Translation) 환경에 있는 클라이언트가 자신의 공인 IP 주소와 포트 번호를 알아내기 위해 사용하는 서버입니다.

 

6. TURN (Traversal Using Relays around NAT)

P2P 연결이 불가능하거나 방화벽 등의 제약이 있는 경우, 중간에 있는 릴레이 서버(TURN 서버)를 통해 통신 데이터를 전달합니다.

---

연결 설정 과정

1. 미디어 접근: getUserMedia를 사용하여 로컬 미디어 스트림에 접근합니다.
2. 피어 연결 생성: RTCPeerConnection 객체를 생성합니다.
3. SDP 교환: 발신자가 offer를 생성 -> 수신자가 answer로 응답 -> 시그널링 서버를 통해 SDP(Session Description Protocol) 정보 교환
4. ICE 후보 교환: 네트워크 연결 정보를 공유합니다.
5. 연결 설정 완료: 미디어 스트리밍 시작

---

Media Capture and Streams API (미디어 스트림)

Media Capture and Streams API(줄여서 MediaStream API)는 브라우저에서 오디오와 비디오 데이터를 실시간으로 스트리밍할 수 있도록 지원하는 WebRTC 관련 표준 API입니다.

이 API는 미디어 데이터 처리, 트랙 제어, 비동기 처리에 대한 성공/오류 콜백, 그리고 스트림 관련 이벤트 처리 인터페이스 등을 포함하여, 실시간 커뮤니케이션이나 녹화, 화면 공유 등 다양한 웹 기반 미디어 애플리케이션을 구축할 수 있도록 합니다.

 

※ 관련 내용 정리한 포스팅 : MediaDevices와 MediaStream을 통해 알아보는 웹 실시간 미디어 처리 방식

---

간단 정리

1. MediaDevices

• 역할: 사용자 장치(카메라, 마이크 등)에 접근할 수 있도록 해주는 객체
• 브라우저의 navigator.mediaDevices 에 존재함.

 

peerConnection.createOffer().then(offer => {
  peerConnection.setLocalDescription(offer);
  sendToRemotePeer(offer);
});

2. MediaStream

• 역할: 오디오/비디오의 스트림(흐름) 전체를 나타내는 객체입니다.
• 여러 개의 트랙(MediaStreamTrack)을 포함할 수 있어요. 예를 들어, 하나는 오디오 트랙, 하나는 비디오 트랙.

 

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream; // <video> 태그에 스트림 연결

3. MediaStreamTrack

• 역할: MediaStream 내의 단일 미디어 트랙 (오디오 1개, 비디오 1개 등)
• 비디오/오디오 각각은 별개의 트랙으로 존재합니다.
• 트랙을 통해 녹화 중지, 영상 끄기, 마이크 음소거 등이 가능합니다.

 

const videoTrack = stream.getVideoTracks()[0];
videoTrack.enabled = false; // 비디오 끄기