피어 연결

RTCPeerConnection 은 WebRTC API의 중앙 인터페이스입니다. 로컬 및 원격 피어 간의 연결을 나타내며 연결을 설정하는 데 필요한 모든 기능과 이벤트를 제공합니다.

피어 연결 설정

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

1. 적절한 ICE 구성을 사용하여 새 RTCPeerConnection 인스턴스를 만듭니다.
2. RTCPeerConnection.createOffer() 사용하여 로컬 SDP 설명을 만듭니다.
3. RTCPeerConnection.setLocalDescription() 사용하여 로컬 SDP 설명을 설정합니다.
4. 로컬 SDP 설명을 원격 피어로 전송 (시그널링 서비스 사용)합니다.
5. 에 대한 리스너 등록 icecandidate 온 이벤트 RTCPeerConnection .
6. 각 icecandidate 이벤트에 대해 신호 서비스를 사용하여 원격 피어로 전송합니다.
7. 신호 서비스에서 들어오는 원격 SDP 설명을 RTCPeerConnection.setRemoteDescription() 사용하여 설정합니다.
8. 신호 서비스에서 들어오는 원격 ICE 후보를 RTCPeerConnection.addIceCandidate() 사용하여 추가합니다.

수신자 측에서는 프로세스가 약간 다릅니다.

1. 적절한 ICE 구성을 사용하여 새 RTCPeerConnection 인스턴스를 만듭니다.
2. 신호 서비스에서 들어오는 원격 SDP 설명을 RTCPeerConnection.setRemoteDescription() 사용하여 설정합니다.
3. RTCPeerConnection.createAnswer() 를 호출하여 원격 SDP 설명에 대한 답변을 만듭니다.
4. 응답을 원격 피어로 전송 (시그널링 서비스 사용)합니다.
5. 에 대한 리스너 등록 icecandidate 온 이벤트 RTCPeerConnection .
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
    });
}