WebRTC ?

💡 Web Real-Time Communication은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다.

서버의 종류

1. Signaling 서버 (위 그림의 Mesh - P2P)

• 역할

  • 두 클라이언트 간에 P2P 연결을 설정하기 위한 초기 통신을 담당합니다.
  • Signaling 서버 자체는 미디어 데이터(비디오, 오디오)를 전달하지 않습니다.
  • 연결 설정 후, 실제 미디어 데이터는 클라이언트 간의 P2P 연결을 통해 직접 전달됩니다.

• 특징

  • Peer 간의 Offer, Answer의 session 정보 신호만을 중계합니다.
  • 초기 연결 설정 시에만 서버에 부하가 발생하고, Peer 간 연결이 완료된 후에는 서버에 별도의 부하가 없습니다.
  • 1:1 연결에 적합합니다.

• 장점

  • 서버의 부하가 적습니다.
  • Peer 간의 직접 연결로 데이터를 송수신하기 때문에 실시간성을 보장합니다.

• 단점

  • N:N 혹은 N:M 연결에서 클라이언트의 과부하가 급격하게 증가합니다.

2. SFU (Selective Forwarding Unit) 서버

• 역할

  • P2P와 달리 서버를 이용하여 클라이언트의 미디어 스트림을 중계합니다.

• 특징

  • 종단 간 미디어 트래픽을 중계하는 중앙 서버 방식입니다.
  • 클라이언트 Peer 간 연결이 아닌, 서버와 클라이언트 간의 Peer를 연결합니다.
  • 클라이언트는 연결된 모든 사용자에게 데이터를 보낼 필요 없이 서버에게만 자신의 영상 데이터를 보냅니다.
  • 1:N 혹은 소규모 N:M 형식의 실시간 스트리밍에 적합합니다.

• 장점

  • P2P 방식만큼은 아니지만 준수한 실시간성을 유지할 수 있습니다.
  • Signaling 서버를 사용하는 것보다 클라이언트가 받는 부하가 줄어듭니다 (클라이언트가 많을 경우).

• 단점

  • Signaling 서버보다 서버 비용이 증가합니다.
  • 대규모 N:M 구조에서는 여전히 클라이언트가 많은 부하를 감당해야 합니다.

3. MCU (Multi-point Control Unit) 서버

• 특징

  • SFU와 마찬가지로 서버가 중간에서 미디어 트래픽을 중계합니다.
  • 다수의 송출 미디어를 중앙 서버에서 혼합 또는 가공하여 수신측으로 전달합니다.
  • Uplink와 Downlink 둘 다 1개만 사용합니다.
  • 중앙 서버의 높은 컴퓨팅 파워가 요구됩니다.

• 장점

  • 클라이언트의 부하가 현저히 줄어듭니다.

• 단점

  • WebRTC의 최대 장점인 실시간성이 저해됩니다.
  • 실시간성이 중요한 게임 등에서는 MCU는 부적합합니다.

세 가지 주요 API

1. MediaStream (GetUserMedia API)

• 사용자의 카메라와 마이크에 접근하여 오디오와 비디오 스트림을 캡쳐합니다.

• navigator.mediaDevices.getUserMedia()를 사용하여 접근 가능합니다.

• 예시

  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
      // 스트림을 사용합니다
      videoElement.srcObject = stream;
    })
    .catch(error => {
      console.error("Error accessing media devices.", error);
    });

2. RTCPeerConnection

• 두 피어 간의 오디오, 비디오, 데이터 스트림을 전송하는 데 사용됩니다.

• ICE (Interactive Connectivity Establishment) 프로토콜을 통해 피어 간의 연결을 설정하고 유지합니다.

• 보안, 대역폭 관리, 네트워크 최적화 등을 처리합니다.

• 예시

  const peerConnection = new RTCPeerConnection(configuration);
  
  // 로컬 미디어 스트림을 연결에 추가
  stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
  
  // ICE 후보 수신
  peerConnection.onicecandidate = event => {
    if (event.candidate) {
      sendCandidateToRemotePeer(event.candidate);
    }
  };
  
  // 원격 스트림 수신
  peerConnection.ontrack = event => {
    remoteVideoElement.srcObject = event.streams[0];
  };

3. RTCDataChannel

• 피어 간에 임의의 데이터를 전송하는 데 사용됩니다.

• 게임, 파일 공유, 채팅 어플리케이션 등에서 활용됩니다.

• 예시

  const dataChannel = peerConnection.createDataChannel("myDataChannel");
  
  dataChannel.onopen = () => {
    console.log("Data channel is open");
  };
  
  dataChannel.onmessage = event => {
    console.log("Received message:", event.data);
  };
  
  dataChannel.send("Hello, World!");

WebRTC 작동원리

1. 신호 교환

• WebRTC 자체에는 신호 교환 방법이 정의되어 있지 않습니다.
• WebRTC를 사용하려면 시그널링 서버가 필요합니다.

2. P2P 연결 설정

• 두 클라이언트는 시그널링 서버를 통해 초기 통신을 시작합니다.
• Offer와 Answer를 교환하여 세션 정보를 설정합니다.
• 시그널링 서버는 미디어 데이터(비디오, 오디오)를 전달하지 않고, 단지 신호만 중계합니다.

3. 미디어 스트림 전송

• P2P 연결이 설정된 후, 실제 미디어 데이터는 클라이언트 간의 직접 연결을 통해 전송됩니다.
• MediaStream API를 사용하여 오디오와 비디오 스트림을 캡쳐하고, RTCPeerConnection을 통해 전송합니다.

4. 데이터 채널 설정

• RTCDataChannel을 사용하여 피어 간에 임의의 데이터를 전송할 수 있습니다.
• 데이터 채널은 게임, 파일 공유, 채팅 어플리케이션 등에서 활용됩니다.