En Google, luchamos por la equidad racial de la comunidad negra. Más información
Esta página se ha traducido con Cloud Translation API.
Switch to English

Firebase + WebRTC Codelab

1. Introducción

En este laboratorio de código, aprenderá a crear una aplicación de chat de video simple usando la API WebRTC en su navegador y Cloud Firestore para la señalización. La aplicación se llama FirebaseRTC y funciona como un ejemplo simple que le enseñará los conceptos básicos para crear aplicaciones habilitadas para WebRTC.

Lo que aprenderás

  • Iniciar una videollamada en una aplicación web usando WebRTC
  • Señalización a la parte remota mediante Cloud Firestore

Lo que necesitarás

Antes de iniciar este codelab, asegúrese de haber instalado:

  • npm que normalmente viene con Node.js: se recomienda Node LTS

2. Crea y configura un proyecto de Firebase

Crea un proyecto de Firebase

  1. En Firebase console , haz clic en Agregar proyecto y, luego, asigna el nombre FirebaseRTC al proyecto de Firebase.

Recuerde el ID del proyecto de su proyecto de Firebase.

  1. Haz clic en Crear proyecto.

La aplicación que va a crear utiliza dos servicios de Firebase disponibles en la web:

  • Cloud Firestore para guardar datos estructurados en la nube y recibir notificaciones instantáneas cuando se actualizan los datos
  • Firebase Hosting para alojar y entregar sus activos estáticos

Para este laboratorio de código específico, ya ha configurado Firebase Hosting en el proyecto que va a clonar. Sin embargo, para Cloud Firestore, lo guiaremos a través de la configuración y habilitación de los servicios usando la consola de Firebase.

Habilitar Cloud Firestore

La aplicación usa Cloud Firestore para guardar los mensajes de chat y recibir nuevos mensajes de chat.

Deberá habilitar Cloud Firestore:

  1. En la sección Desarrollar del menú de la consola de Firebase, haz clic en Base de datos.
  2. Haga clic en Crear base de datos en el panel de Cloud Firestore.
  3. Seleccione la opción Iniciar en modo de prueba , luego haga clic en Habilitar después de leer el descargo de responsabilidad sobre las reglas de seguridad.

El modo de prueba garantiza que pueda escribir libremente en la base de datos durante el desarrollo. Haremos que nuestra base de datos sea más segura más adelante en este laboratorio de código.

3. Obtén el código de muestra

Clona el repositorio de GitHub desde la línea de comando:

git clone https://github.com/webrtc/FirebaseRTC

El código de muestra debería haberse clonado en el directorio FirebaseRTC . Asegúrese de que su línea de comando se ejecute desde este directorio a partir de ahora:

cd FirebaseRTC

Importar la aplicación de inicio

Abra los archivos en FirebaseRTC en su editor y cámbielos de acuerdo con las instrucciones a continuación. Este directorio contiene el código de inicio para el laboratorio de códigos que consiste en una aplicación WebRTC que aún no funciona. Lo haremos funcional a lo largo de este codelab.

4. Instale la interfaz de línea de comandos de Firebase

La interfaz de línea de comandos de Firebase (CLI) te permite entregar tu aplicación web de forma local e implementarla en Firebase Hosting.

  1. Instale la CLI ejecutando el siguiente comando npm: sh npm -g install firebase-tools
  1. Verifique que la CLI se haya instalado correctamente ejecutando el siguiente comando: sh firebase --version

Asegúrese de que la versión de Firebase CLI sea v6.7.1 o posterior.

  1. Autorice Firebase CLI ejecutando el siguiente comando: sh firebase login

Ha configurado la plantilla de la aplicación web para extraer la configuración de su aplicación para Firebase Hosting del directorio y los archivos locales de su aplicación. Pero para hacer esto, necesita asociar su aplicación con su proyecto de Firebase.

  1. Asocie su aplicación con su proyecto de Firebase ejecutando el siguiente comando: sh firebase use --add

  2. Cuando se le solicite, seleccione su ID de proyecto, luego asigne un alias a su proyecto de Firebase.

Un alias es útil si tiene varios entornos (producción, preparación, etc.). Sin embargo, para este laboratorio de código, usemos el alias default .

  1. Siga las instrucciones restantes en su línea de comando.

5. Ejecute el servidor local

¡Estás listo para empezar a trabajar en nuestra aplicación! ¡Ejecutemos la aplicación localmente!

  1. Ejecute el siguiente comando de Firebase CLI: sh firebase serve --only hosting

  2. Su línea de comando debe mostrar la siguiente respuesta: hosting: Local server: http://localhost:5000

Estamos usando el emulador de Firebase Hosting para entregar nuestra aplicación localmente. La aplicación web ahora debería estar disponible en http: // localhost: 5000.

  1. Abra su aplicación en http: // localhost: 5000.

Debería ver su copia de FirebaseRTC que se ha conectado a su proyecto de Firebase.

La aplicación se ha conectado automáticamente a su proyecto de Firebase.

6. Creando una nueva habitación

En esta aplicación, cada sesión de chat de video se denomina sala. Un usuario puede crear una nueva sala haciendo clic en un botón en su aplicación. Esto generará una identificación que la parte remota puede usar para unirse a la misma sala. El ID se usa como clave en Cloud Firestore para cada habitación.

Cada sala contendrá las RTCSessionDescriptions tanto para la oferta como para la respuesta, así como dos colecciones separadas con candidatos de ICE de cada partido.

Su primera tarea es implementar el código que falta para crear una nueva habitación con la oferta inicial de la persona que llama. Abra public/app.js y busque el comentario // Add code for creating a room here y agregue el siguiente código:

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

const roomWithOffer = {
    offer: {
        type: offer.type,
        sdp: offer.sdp
    }
}
const roomRef = await db.collection('rooms').add(roomWithOffer);
const roomId = roomRef.id;
document.querySelector('#currentRoom').innerText = `Current room is ${roomId} - You are the caller!`

La primera línea crea una RTCSessionDescription que representará la oferta de la persona que llama. Luego, se establece como descripción local y, finalmente, se escribe en el nuevo objeto de sala en Cloud Firestore.

A continuación, escucharemos los cambios en la base de datos y detectaremos cuándo se agregó una respuesta del destinatario.

roomRef.onSnapshot(async snapshot -> {
    console.log('Got updated room:', snapshot.data());
    const data = snapshot.data();
    if (!peerConnection.currentRemoteDescription && data.answer) {
        console.log('Set remote description: ', data.answer);
        const answer = new RTCSessionDescription(data.answer)
        await peerConnection.setRemoteDescription(answer);
    }
});

Esto esperará hasta que el destinatario de la llamada escriba la RTCSessionDescription para la respuesta, y lo establecerá como la descripción remota en la RTCPeerConnection la persona que RTCPeerConnection .

7. Unirse a una habitación

El siguiente paso es implementar la lógica para unirse a una habitación existente. El usuario hace esto haciendo clic en el botón Unirse a la sala e ingresando el ID de la sala para unirse. Su tarea aquí es implementar la creación de RTCSessionDescription para la respuesta y actualizar la sala en la base de datos en consecuencia.

const offer = roomSnapshot.data().offer;
await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);

const roomWithAnswer = {
    answer: {
        type: answer.type,
        sdp: answer.sdp
    }
}
await roomRef.update(roomWithAnswer);

En el código anterior, comenzamos extrayendo la oferta de la persona que llama y creando una RTCSessionDescription que configuramos como la descripción remota. A continuación, creamos la respuesta, la configuramos como descripción local y actualizamos la base de datos. La actualización de la base de datos activará la devolución de llamada onSnapshot en el lado de la persona que llama, que a su vez establecerá la descripción remota según la respuesta de la persona que llama. Esto completa el intercambio de los objetos RTCSessionDescription entre el llamante y el destinatario.

8. Recoger candidatos de ICE

Antes de que la persona que llama y el destinatario de la llamada puedan conectarse entre sí, también deben intercambiar candidatos ICE que le indiquen a WebRTC cómo conectarse al par remoto. Su próxima tarea es implementar el código que escucha a los candidatos de ICE y los agrega a una colección en la base de datos. Busque la función collectIceCandidates y agregue el siguiente código:

async function collectIceCandidates(roomRef, peerConnection,
                                    localName, remoteName) {
    const candidatesCollection = roomRef.collection(localName);

    peerConnection.addEventListener('icecandidate', event -> {
        if (event.candidate) {
            const json = event.candidate.toJSON();
            candidatesCollection.add(json);
        }
    });

    roomRef.collection(remoteName).onSnapshot(snapshot -> {
        snapshot.docChanges().forEach(change -> {
            if (change.type === "added") {
                const candidate = new RTCIceCandidate(change.doc.data());
                peerConneciton.addIceCandidate(candidate);
            }
        });
    })
}

Esta función hace dos cosas. Recopila candidatos ICE de la API WebRTC y los agrega a la base de datos, y escucha candidatos ICE agregados del par remoto y los agrega a su instancia RTCPeerConnection . Al escuchar los cambios en la base de datos, es importante filtrar todo lo que no sea una nueva adición, ya que de lo contrario habríamos agregado el mismo conjunto de candidatos de ICE una y otra vez.

9. Conclusión

En este laboratorio de código, aprendió cómo implementar la señalización para WebRTC usando Cloud Firestore, y también cómo usarlo para crear una aplicación simple de chat de video.

Para obtener más información, visite los siguientes recursos:

  1. Código fuente de FirebaseRTC
  2. Muestras de WebRTC
  3. Cloud Firestore