피어 연결

RTCPeerConnection는 WebRTC API의 중앙 인터페이스입니다. 그것은 로컬 피어와 원격 피어 간의 연결을 나타내며 함수와 이벤트를 설정하는 데 필요합니다.

피어 연결 설정

WebRTC 기능을 구현하는 애플리케이션은 일반적으로 RTCPeerConnection 인터페이스 호출자 측 (즉, 피어 측)에서 연결 시작)를 설정하는 것은 일반적으로 있습니다.

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

피호출자 측의 프로세스는 약간 다릅니다.

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

이 API의 문제는 이러한 작업이 대부분 비동기식이므로 이로 인해 종종 WebRTC 애플리케이션의 실제 구현이 복잡해집니다. 많은 함수가Promise 프로세스의 다음 단계를 계속할 수 있습니다.

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

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
    });
}