WebRTC

WebRTC(웹 실시간 통신)란 브라우저와 모바일에서 실시간 음성, 비디오 및 데이터 통신을 가능하게 하는 오픈 소스 프로젝트이다. 웹 브라우저 간에 플러그인 없이 음성, 비디오 통화, 파일 공유, 스트리밍 미디어 등을 지원한다.

실시간 음성 및 비디오 통화: 사용자가 웹 브라우저를 통해 직접 음성 및 비디오 통화를 할 수 있다.
데이터 채널: 사용자 간에 텍스트 메시지, 파일 및 기타 데이터를 직접 교환할 수 있는 데이터 채널을 제공한다.
피어 투 피어(P2P) 통신: WebRTC는 중간 서버 없이 브라우저 간에 직접 통신할 수 있는 피어 투 피어 통신을 지원한다.
화면 공유: 사용자가 브라우저 화면을 실시간으로 공유할 수 있다.

UDP 프로토콜을 사용하여 빠르지만 순서를 유지하지 않고 안전하지 않다. 실시간 영상 같은 경우 몇 프레임을 잃어도 상관없지만 채팅의 경우 크리티컬하기에 중요한 데이터 전송(채팅)에는 WebSocket을 사용해야 한다.

Signaling

통신을 시작하고 관리하기 위한 프로세스. 두 피어(peer)가 서로 연결하고 통신을 설정하는 데 사용된다. Signaling은 WebRTC 애플리케이션에서 중계 서버를 통해 이루어지고, 중계 서버는 피어 간에 시그널을 전달하고, 통신을 위한 메타데이터를 교환하는 역할을 한다.

시그널링 서버는 피어가 서로를 찾고 피어 연결을 설정할 수 있도록 하는 서버. 주로 socket.io나 websocket을 이용한 서버

NAT Traversal

네트워크 주소 변환(NAT) 환경에서 피어 간 통신을 가능하게 하는 기술로 사설 네트워크 내부의 디바이스가 공용 인터넷과 통신할 때 사용되는 주소 변환 메커니즘이다. NAT Traversal은 피어 간에 직접적인 연결을 설정할 수 있는 방법을 찾아내어 NAT의 제약을 우회하고 통신을 가능하게 한다. WebRTC에서는 ICE 프레임워크를 사용하여 NAT Traversal을 수행한다.

WebRTC API

getUserMedia(): 사용자의 미디어 장치(예: 웹캠, 마이크)에 액세스하여 비디오 및 오디오 스트림을 가져오는 데 사용된다. 이 API를 사용하면 브라우저에서 사용자의 미디어를 캡처할 수 있다.
RTCPeerConnection(): 피어 간의 연결을 설정하고 관리하는 데 사용한다. 이 API를 사용하여 브라우저 간에 피어 간 데이터 및 미디어 스트림을 교환할 수 있다. ICE 프레임워크를 사용하여 NAT 트래버셜 및 라우팅 문제를 해결한다.
RTCDataChannel(): 데이터를 피어 간에 교환하는 데 사용한다. 이 API를 사용하여 브라우저 간에 텍스트 메시지, 파일 및 기타 데이터를 직접 전송할 수 있다.

WebRTC의 종류

Mesh

미디어 정보를 직접 peer끼리 connection을 맺어 주고 받는다.
peer끼리 connection을 맺기 위한 시그널 정보를 주고 받기 위한 시그널 서버가 필요하다.
시그널링 서버 구축을 위해 websocket, socket.io와 같은 양방향 통신을 지원하는 기술을 사용해야 한다.
peer에 직접 미디어 정보를 주고 받기 때문에 클라이언트에 부하가 생길 수 있다.
1:1 구조에 적합하다.

SFU

peer의 부하는 mesh에 비해서 줄어들지만 그만큼 서버의 부하가 있다.
1개의 upstream과 n개의 downstream을 갖는 구조이다.
미디어 서버가 필요하다.
대규모 연결에 적합하다.

MCU

peer의 부하가 가장 적다.
서버의 부하는 가장 크다.
1개의 upstream과 1개의 downstream을 갖는 구조이다.
서버에서 peer의 스트림을 모아 인코딩, 디코딩을 하기 때문에 서버에 큰 compute power가 필요하다.
미디어 서버가 필요하다.

PeerJS

webRTC를 쉽게 사용하기 위한 라이브러리

Peer 생성

// Peer 객체를 생성
const peer = new Peer({
	host: import.meta.env.VITE_PEER,
    secure: true,
    port: 443,
}),


// Peer 객체에 직접 id를 부여하여 생성
const peer = new Peer([id])

Start call

통화를 거는 부분으로 다른 peer의 id로 내 스트림을 전달. 기본적으로 하나의 각 피어는 다른 하나의 피어에만 연결 할 수 있다.

ws.socket.on('serverJoinVideoRoom', (newUser) => {
  // 기존 멤버들이 신규 멤버에게 call
  const call = me.peer.call(newUser.peerId, stream, {
    metadata: {
      nickName: authCookie.nickName,
      socketId: ws.socket.id,
      texture: authCookie.texture,
      isVideoEnabled: controller.video,
    },
  })
  // 기존 멤버에서 실행
  call.once('stream', (peerStream) => {
    dispatch(
      addPeerStream({
        peerId: newUser.peerId,
        nickName: newUser.nickName,
        socketId: newUser.socketId,
        texture: newUser.texture,
        isVideoEnabled: newUser.isVideoEnabled,
        stream: peerStream,
        sound: true,
      }),
    )
  })
})

Answer call

const handleIncomingCall = (call: MediaConnection) => {
  const { nickName, socketId, texture, isVideoEnabled } = call.metadata
  // 전화에 응답
  call.answer(stream)
  // 새로운 멤버에서 실행
  call.once('stream', (peerStream) => {
    dispatch(
      addPeerStream({
        peerId: call.peer,
        nickName,
        socketId,
        texture,
        isVideoEnabled,
        stream: peerStream,
        sound: true,
      }),
    )
  })
}


me.peer.on('call', handleIncomingCall)

WebRTC / PeerJS