피어 연결

RTCPeerConnection는 WebRTC API의 중앙 인터페이스입니다. {0/}는 로컬 피어와 원격 피어 간의 연결을 나타내며 연결을 설정하는 데 필요한 모든 함수와 이벤트를 제어합니다.

피어 연결 설정

WebRTC 기능을 구현하는 애플리케이션은 일반적으로 RTCPeerConnection 인터페이스에 크게 의존합니다. 호출자 측, 즉 연결을 시작하는 피어에서 연결을 설정하는 프로세스는 일반적으로 다음과 같습니다.

  1. 적절한 ICE 구성을 사용하여 새 RTCPeerConnection 인스턴스를 만듭니다.
  2. RTCPeerConnection.createOffer()를 사용하여 로컬 SDP 설명을 만듭니다.
  3. RTCPeerConnection.setLocalDescription()를 사용하여 로컬 SDP 설명을 설정합니다.
  4. 신호 서비스를 사용하여 로컬 SDP 설명을 원격 피어에 전송합니다.
  5. RTCPeerConnection에서 icecandidate 이벤트의 리스너를 등록합니다.
  6. icecandidate 이벤트마다 (신호 서비스 사용) 원격 피어에 이벤트를 전송합니다.
  7. 신호 서비스로부터 수신되는 원격 SDP 설명을 기다린 후 RTCPeerConnection.setRemoteDescription()를 사용하여 설정합니다.
  8. 신호 서비스에서 수신 원격 ICE 후보를 대기하고 RTCPeerConnection.addIceCandidate()를 사용하여 추가합니다.

수신자 측의 프로세스는 약간 다릅니다.

  1. 적절한 ICE 구성을 사용하여 새 RTCPeerConnection 인스턴스를 만듭니다.
  2. 신호 서비스로부터 수신되는 원격 SDP 설명을 기다린 후 RTCPeerConnection.setRemoteDescription()를 사용하여 설정합니다.
  3. RTCPeerConnection.createAnswer()를 호출하여 원격 SDP 설명의 답변을 만듭니다.
  4. 신호를 신호 피어를 사용하여 원격 피어에 전달합니다.
  5. RTCPeerConnection에서 icecandidate 이벤트의 리스너를 등록합니다.
  6. icecandidate 이벤트마다 (신호 서비스 사용) 원격 피어에 이벤트를 전송합니다.
  7. 신호 서비스에서 수신 원격 ICE 후보를 대기하고 RTCPeerConnection.addIceCandidate()를 사용하여 추가합니다.

이 API의 과제는 대부분의 작업이 비동기적이므로 WebRTC 애플리케이션의 실제 구현이 복잡한 경우가 많다는 점입니다. 대부분의 함수는 프로세스의 다음 단계를 계속 진행하기 전에 해결해야 하는 Promise를 반환합니다.

이 API를 사용하여 애플리케이션을 구현할 때는 개발자가 리스너(Promise.then() 사용)를 등록하는 대신 async 및 await를 사용하는 것이 좋습니다. 그러면 코드를 더 쉽게 따라갈 수 있습니다. 다음 예를 참고하세요.

function createAndSendOffer(peerConnection, signallingService) {
    peerConnection.createOffer()
                  .then(offer => {
                      signallingService.send({
                          type: 'offer',
                          data: offer
                      });
                  });
}

async 및 await를 사용하여 위의 코드를 작성하면 다음과 같은 결과를 얻습니다.

async function createAndSendOffer(peerConnection, signallingService) {
    const offer = await peerConnection.createOffer();
    signallingService.send({
        type: 'offer',
        data: offer
    });
}