[WebRTC] 6. 라이브 스트리밍 구현 (2) IceCandidate & Track

Peer A와 Peer B가 offer와 answer를 주고 받았다면 이제 IceCandidate이벤트를 실행하여 스트리밍을 진행할 수 있습니다. IceCandidate는 Internet Connectivity Establishment의 약자로 연결 가능한 네트워크 주소 후보 Candidate를 찾는 역할을 합니다. 각 Peer는 Candidate에 연결하여 서로의 데이터를 스트리밍할 수 있습니다.

IceCandidate 이벤트 리스닝

RTCPeerConnection이 생성되면 icecandidate 이벤트 리스너가 발동되도록 합니다. 다음으로 스트림(myStream)에 트랙을 추가해줍니다. 로그를 찍어보면 아래와 같은 icecandidate 들이 출력됩니다.

// app.js

function makeConnection() {
  myPeerConnection = new RTCPeerConnection();
  myPeerConnection.addEventListener("icecandidate", handleIce); // ice
  myStream
    .getTracks()
    .forEach((track) => myPeerConnection.addTrack(track, myStream));
}

function handleIce(data) {
  console.log(data);
}

IceCandidate 주고 받기

이제 이를 상대방 브라우저와 주고 받을 차례입니다. 전과 같은 방식인 Socket IO의 emit과 to를 사용하여 icecandidate를 주고 받을 수 있습니다.

// app.js

function handleIce(data) {
  console.log("Sent Ice Candidates")
  socket.emit("ice", data.candidate, videoRoomName);
}

// server.js

socket.on("ice", (ice, videoRoomName) => {
    socket.to(videoRoomName).emit("ice", ice);
  });

// app.js

socket.on("ice", (ice) => {
  console.log("Added Ice Candidates")
  myPeerConnection.addIceCandidate(ice);
});

아래와 같이 candidate들이 전송되고 추가된 것을 확인할 수 있습니다.

스트림 이벤트 추가하기

이제 candidate들을 주고 받았으니 stream을 추가해줄 차례입니다. 기존에는 addStream 이벤트를 사용하기도 했지만, 브라우저 호환이 되지 않는 경우가 있어 이곳에서는 track 이벤트를 걸어줍니다.

// app.js

async function makeConnection() {
  myPeerConnection = new RTCPeerConnection();
  myPeerConnection.addEventListener("icecandidate", handleIce);
  myPeerConnection.addEventListener("track", handleTrack);
  myStream
    .getTracks()
    .forEach((track) => myPeerConnection.addTrack(track, myStream));
  getDevices();
}

다음으로 handleTrack을 만들어줍니다.

// app.js

function handleTrack(data) {
  const peerFace = document.querySelector("#peerFace");
  peerFace.srcObject = data.streams[0];
}

상대방 화면 추가하기

이제 마지막 단계입니다. home.pug에서 상대방 화면을 보여줄 수 있도록 기존의 코드 아래 다음과 같이 영상을 추가해줍니다.

// home.pug

video#peerFace(autoplay, playsinline, width="400", height="400")

app.js에서 스트림을 소스를 지정해주면 라이브 스트리밍 구현 완료입니다!

// app.js

function handleAddStream(data) {
  const peerFace = document.getElementById("peerFace");
  peerFace.srcObject = data.stream; 
}