동료 연결

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의 개발자 메이크업의 사용을 사용하여 응용 프로그램을 구현할 때하는 것이 좋습니다 async 하고 await 대신 청취자를 등록 (사용 Promise.then() 이 더 쉽게 코드를 만들면서), 따르십시오. 다음 예제를 고려하십시오.

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

async and await 사용하여 위의 코드를 작성할 때 다음과 같은 결과가 나타납니다.

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