JisooLog

WebRTC가 궁금하면 여기에 참고

https://ryu-earth.tistory.com/entry/WebRTC-vs-WebSocket

• 브라우저 간 P2P 실시간 통신 가능
• 영상, 음성, 데이터 스트림 전송 가능
• WebSocket 같은 서버를 통해 시그널링(초기 연결 설정 정보 교환) 필요

WebRTC 시나리오 & 코드

실시간 영상/음성 통화

• 브라우저끼리 실시간 비디오/오디오 스트림 주고받기

Peer A

// 브라우저 JavaScript 

const peerA = new RTCPeerConnection();
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    stream.getTracks().forEach(track => peerA.addTrack(track, stream));
  });

peerA.createOffer().then(offer => {
  peerA.setLocalDescription(offer);
  // 시그널링 서버로 offer 전송
});

Peer B

const peerB = new RTCPeerConnection();
peerB.ontrack = event => {
  const video = document.querySelector("#remoteVideo");
  video.srcObject = event.streams[0];
};
// 시그널링 서버로부터 offer 받고 answer 생성

P2P 데이터 전송 (DataChannel)

• 브라우저 간 텍스트/파일 전송

Peer A

const peerA = new RTCPeerConnection();
const dataChannel = peerA.createDataChannel("chat");

dataChannel.onopen = () => {
  dataChannel.send("Hello from A!");
};

peerA.createOffer().then(offer => peerA.setLocalDescription(offer));

Peer B

const peerB = new RTCPeerConnection();
peerB.ondatachannel = event => {
  const receiveChannel = event.channel;
  receiveChannel.onmessage = e => console.log("Received:", e.data);
};

시그널링 서버 구축 (Python WebSocket)

• WebRTC 연결을 위해 Off/answer/ICE candidate 정보를 중개하는 서버

python WebSocket 시그너링 서버

import asyncio
import websockets

clients = set()

async def signaling_handler(websocket, path):
    clients.add(websocket)
    try:
        async for message in websocket:
            await asyncio.wait([ws.send(message) for ws in clients if ws != websocket])
    finally:
        clients.remove(websocket)

start_server = websockets.serve(signaling_handler, "localhost", 9999)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

→ WebRTC offer/answer/ICE 정보를 이 서버로 전달하고 상대 peer에게 중계

+ python에서도 aiotc 라이브러리를 통해 WebRTC peer를 구현할 수 있다.

(다음 글에)