Conexiones entre pares

RTCPeerConnection es la interfaz central de la API de WebRTC. Representa la conexión entre el par local y el remoto, y proporciona todas las funciones y los eventos necesarios para establecer la conexión.

Cómo establecer una conexión de intercambio de tráfico

Las aplicaciones que implementan la funcionalidad WebRTC generalmente dependen de la interfaz RTCPeerConnection. Desde los llamadores (es decir, el par que inicia una conexión), el proceso para establecer una conexión suele ser el siguiente:

1. Crea una nueva instancia RTCPeerConnection con la configuración adecuada de ICE.
2. Crea una descripción del SDP local con RTCPeerConnection.createOffer().
3. Configura la descripción del SDP local mediante RTCPeerConnection.setLocalDescription().
4. Transfiere (mediante un servicio de señalización) la descripción del SDP local al par remoto.
5. Registra un objeto de escucha para eventos icecandidate en RTCPeerConnection.
6. Para cada evento icecandidate, transfiérelo (con un servicio de señalización) al par remoto.
7. Espera una descripción entrante de SDP remota del servicio de señalización y configúrala con RTCPeerConnection.setRemoteDescription().
8. Espera a los candidatos remotos ICE entrantes desde el servicio de señalización y agrégalos con RTCPeerConnection.addIceCandidate()

Para los destinatarios, el proceso es un poco diferente.

1. Crea una nueva instancia RTCPeerConnection con la configuración adecuada de ICE.
2. Espera una descripción entrante de SDP remota del servicio de señalización y configúrala con RTCPeerConnection.setRemoteDescription().
3. Llama a RTCPeerConnection.createAnswer() para crear una respuesta de la descripción remota del SDP.
4. Transfiere (con un servicio de señalización) la respuesta al par remoto.
5. Registra un objeto de escucha para eventos icecandidate en RTCPeerConnection.
6. Para cada evento icecandidate, transfiérelo (con un servicio de señalización) al par remoto.
7. Espera a los candidatos remotos ICE entrantes desde el servicio de señalización y agrégalos con RTCPeerConnection.addIceCandidate()

El desafío con esta API es que la mayoría de estas operaciones son asíncronas, lo que a menudo complica la implementación real de una aplicación de WebRTC. Muchas de las funciones muestran un Promise que se debe resolver antes de que el próximo paso del proceso pueda continuar.

Se recomienda que, cuando implementes una aplicación con esta API, el desarrollador utilice async y await en lugar de registrar objetos de escucha (con Promise.then()), ya que esto hace que tu código sea más fácil de seguir. Considera el siguiente ejemplo:

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

Cuando escribes el código anterior con async y await, obtenemos lo siguiente:

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