[WebRTC] 5. 라이브 스트리밍 구현 (1) offer & answer

WebRTC 라이브 스트리밍은 다음의 흐름을 따라 구성됩니다.

• Peer A가 Offer를 생성하여 서버를 통해 Peer B에 전달합니다.
• Peer B는 해당 Offer를 받고 Answer를 생성하여 서버를 통해 Peer A에게 전달합니다.
• Peer A가 candidate를 전달하고 Peer B는 이를 추가합니다.
• Peer B가 candidate를 전달하고 Peer A는 이를 추가합니다.
• 스트리밍이 진행됩니다.

RTC 연결 생성하기

아래와 같이 RTCPeerConnection을 통해 새로운 RTC 연결을 생성할 수 있습니다.

// app.js

function showVideoOption() {
  videoInteface.hidden = true;
  streamingInterface.hidden = false;

  makeConnection();
}

function makeConnection() {
  myPeerConnection = new RTCPeerConnection();
    console.log(myStream.getTracks()); // stream 데이터 받기
}

getTracks를 통해 로그를 찍어보면 아래와 같이 스트림 데이터가 표시됩니다.

Offer 전송 및 수신

1. Offer 생성하기

이제 Peer A에서 Offer를 생성하여 전달해보도록 하겠습니다. Peer B가 접속하면 트리거 되는 videoGreeting에서 다음과 같이 Offer를 만들어줄 수 있습니다.

// app.js

socket.on("videoGreeeting", async () => {
  const offer = await myPeerConnection.createOffer();
  console.log(offer);
});

로그를 찍어보면 아래와 같이 생성된 offer를 볼 수 있습니다.

2. localDescription 설정하고 전달하기

이제 위에서 생성한 offer를 통해 localDescription을 설정하고 이를 전달해주도록 하겠습니다.

// app.js

socket.on("videoGreeeting", async () => {
  const offer = await myPeerConnection.createOffer();
  myPeerConnection.setLocalDescription(offer);
  socket.emit("offer", offer, videoRoomName);
});

다음으로 서버에서 해당 offer를 수신하고 다시 전달해줍니다. 이렇게 전달된 offer는 Peer B에서 수신할 것입니다.

// server.js

socket.on("videoRoomName", (videoRoomName, showVideoOption) => {
    socket.join(videoRoomName);
    showVideoOption();
    socket.to(videoRoomName).emit("videoGreeeting");
  });
  socket.on("offer", (offer, videoRoomName) => {
    socket.to(videoRoomName).emit("offer", offer);
  });

3. 서버에서 오는 offer 받기

이제 Peer B쪽에서 서버에서 넘어오는 offer를 받아줍니다.

// app.js

socket.on("offer", (offer) => {
  console.log(offer);
});

Answer 전송 및 수신

이제 Peer B에서는 해당 offer를 통해 remoteDescription을 설정하고 answer를 생성합니다.

// app.js

socket.on("offer", async (offer) => {
  myPeerConnection.setRemoteDescription(offer);
  const answer = await myPeerConnection.createAnswer(offer); // createAnswer

  console.log(answer);
});

로그를 찍어보면 이번에는 answer가 잘 생성된 것을 볼 수 있습니다.

이제 해당 answer로 localDescription을 설정하고 서버에 answer를 전달해줍니다.

// app.js

socket.on("offer", async (offer) => {
  myPeerConnection.setRemoteDescription(offer);
  const answer = await myPeerConnection.createAnswer(offer);
  myPeerConnection.setLocalDescription(answer);
    socket.emit("answer", answer, videoRoomName);
});

// server.js

socket.on("answer", (answer, roomName) => {
    socket.to(roomName).emit("answer", answer);
  });

서버에서 answer를 전송해주면 마지막으로 Peer A 측에서 answer를 받아 remoteDescription으로 설정하면 과정이 완료됩니다.

// app.js

socket.on("answer", (answer) => {
  myPeerConnection.setRemoteDescription(answer);
});