WebRTC

WebRTC는 Web Real-Time Communication의 준말로, 브라우저들이 서버를 거치지 않고 P2P로 통신을 꽂게 할 수 있는 웹표준 프로토콜 중 하나다.

서버를 거치치 않으니 더 빠르고 즉각적인 통신 서비스가 가능하다.

이를테면 줌(Zoom) 같은 웹 기반의 화상 채팅 서비스들이 이 기술을 통해 만들어진다.

구글이 2011년에 처음 오픈소스로 발표해서 퍼지기 시작했고, 현재는 상당수의 브라우저에서 지원된다.

대부분은 영상이나 오디오 등을 주고받는데 사용하지만, 텍스트 등의 데이터를 주고받을 때도 사용할 수 있다.

구조

브라우저끼리 곧장 통신을 할 수 있긴 하지만, 그래도 아무것도 없이 클라이언트끼리 서로의 주소를 알기란... 불가능하다.
여기서도 서버는 중요하다. 클라이언트에게 통신을 연결할 다른 클라이언트의 정보를 줘야 하기 때문이다.

그래서 중간에 Stun Server라는 중계자를 두고, 서로간의 IP를 알아낼 수 있도록 한다.

https://www.techtarget.com/searchunifiedcommunications/definition/WebRTC-Web-Real-Time-Communications

주요한 함수는 다음과 같다.
RTCPeerConnection: P2P 연결을 만들고 탐색하는 객체
RTCSessionDescription: P2P 연결시 각 엔드포인트의 연결 정보

Stun 서버와 RTCPeerConnection

Stun 서버는 클라이언트의 public IP와 포트 등을 추출해주는 중개 서버다. 원래 로컬 내에서는 로컬 IP는 바로 알 수 있지만, public IP는 알기가 쉽지 않을 수 있다.

그냥 로컬테스트만 할때는 없어도 되지만, 실사용할때는 거의 필수로 사용한다.

간단하게 띄우는 방법은 coturn 등의 완성된 프로그램을 사용하는 것이다.
우분투에서는 그냥 패키지매니저로 바로 깔고 실행할 수 있다.

sudo apt-get update
sudo apt-get install coturn -y
sudo systemctl kill coturn
sudo turnserver --log-file stdout

이렇게 실행되면 된다.
스턴서버는 UDP 3478 포트로 개방된다.

그리고 다음과 같이 PeerConnection 생성에 사용할 수 있다.

      const config = {
        iceServers: [{ urls: "stun:54.180.105.67" }],
      };

      const localConnection = new RTCPeerConnection();

시그널링(Signaling) 서버

WebRTC에 필요한 또 하나의 부가요소가 시그널링 서버다.
스턴서버가 그냥 IP만 돌려주는 간단한 작업만 했다면, 이건 직접 각각의 Peer와 Peer를 직접 연결해주는 역할을 담당한다.
새로운 Peer가 들어올때마다 기존의 Peer에 Broadcast 등을 해줘야 하기 때문에 웹소켓으로 구현을 많이 한다.

아래는 그에 대한 간단한 구현례다.

const Express = require("express");
const fs = require("fs");
const WebSocket = require("ws");

const app = Express();

app.get("/", (req, res) => {
  const html = fs.readFileSync("./index.html", "utf-8");
  res.send(html);
});

const port = 8080;
const wss = new WebSocket.Server({ port });

wss.on("connection", (socket) => {
  console.log("새로운 연결이 생성되었습니다.");

  // offer를 수신하고 다른 클라이언트로 전달
  socket.on("offer", (offer) => {
    console.log("새로운 offer를 수신하였습니다.");
    socket.broadcast.emit("offer", offer);
  });

  // answer를 수신하고 다른 클라이언트로 전달
  socket.on("answer", (answer) => {
    console.log("새로운 answer를 수신하였습니다.");
    socket.broadcast.emit("answer", answer);
  });

  // ICE candidate를 수신하고 다른 클라이언트로 전달
  socket.on("candidate", (candidate) => {
    console.log("새로운 ICE candidate를 수신하였습니다.");
    socket.broadcast.emit("candidate", candidate);
  });

  // 클라이언트와 연결이 끊어질 때
  socket.on("disconnect", () => {
    console.log("연결이 종료되었습니다.");
  });
});

app.listen(5500, () => {
  console.log("Server started on port 5500");
});

P2P 연결

우선 다음과 같이 Peer Connection 구성을 생성해야 한다.

localConnection = new RTCPeerConnection();
sendChannel = localConnection.createDataChannel("sendChannel");

remoteConnection = new RTCPeerConnection();
remoteConnection.ondatachannel = receiveChannelCallback;

그 다음에는 RTCPeerConnection를 이용해서 Peer끼리 Offer와 Answer라는 메시지를 교환한다.
이런 식으로 보인다.

이것도 보통 시그널링 서버를 통해 주고받는다.

그 다음에는 ICE Candidate라고 하는 각 Peer의 네트워크 주소 정보를 교환해서 연결 작업을 마무리짓는다.
그러면 데이터 채널 등을 사용해서 지속적으로 P2P 통신을 주고받을 수 있다.

그렇다.

참조
https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API
https://acstory.tistory.com/534
https://github.com/coturn/coturn
https://github.com/aljanabim/simple_webrtc_signaling_server
https://github.com/mdn/samples-server/blob/master/s/webrtc-simple-datachannel/main.js