WebRTC - Compartir y Recibir Pantalla

📌 ¿Cómo funciona WebRTC con RTCPeerConnection y BroadcastChannel?

WebRTC permite la comunicación de video, audio y datos entre navegadores sin necesidad de un servidor intermedio. Para lograrlo, utilizamos RTCPeerConnection para establecer una conexión entre dos pestañas y BroadcastChannel para intercambiar mensajes de señalización entre ellas.

📡 Proceso de conexión

1. Una pestaña inicia la compartición de pantalla usando navigator.mediaDevices.getDisplayMedia().
2. Se crea un objeto RTCPeerConnection para gestionar la conexión WebRTC.
3. El emisor crea una oferta (offer) y la envía a través de BroadcastChannel a otras pestañas.
4. Las pestañas receptoras reciben la oferta, crean una respuesta (answer) y la envían de vuelta.
5. Ambos navegadores intercambian candidatos ICE para establecer la conexión directa.
6. Una vez establecida la conexión, la pantalla compartida se muestra en la pestaña receptora.

🔄 ¿Qué son las ofertas, respuestas y candidatos ICE?

• Offer (Oferta): La pestaña que inicia la conexión crea una oferta SDP y la envía al receptor.
• Answer (Respuesta): La pestaña receptora responde con una descripción SDP.
• ICE Candidates: Son los datos de red que permiten conectar las dos pestañas a través de Internet.

💡 ¿Por qué usamos BroadcastChannel?

BroadcastChannel permite la comunicación entre pestañas abiertas en el mismo navegador. En este caso, lo usamos para intercambiar la oferta, la respuesta y los candidatos ICE, lo que permite establecer una conexión WebRTC sin necesidad de un servidor externo.

🚀 Código de Ejemplo

// Crear una conexión WebRTC
const peerConnection = new RTCPeerConnection();

// Crear un canal de comunicación entre pestañas
const signalingChannel = new BroadcastChannel('webrtc-signaling');

// Enviar oferta cuando se inicia la compartición
async function startConnection() {
    const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
    stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));

    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);

    signalingChannel.postMessage({ type: 'offer', offer });
}

// Manejar mensajes de la otra pestaña
signalingChannel.onmessage = async (event) => {
    if (event.data.type === 'offer') {
        await peerConnection.setRemoteDescription(new RTCSessionDescription(event.data.offer));
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        signalingChannel.postMessage({ type: 'answer', answer });
    }
};

📚 Bibliografía

Para más información sobre WebRTC y sus funcionalidades, puedes consultar la documentación oficial y ejemplos en:

• WebRTC GitHub Samples