Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Firebase + WebRTC Codelab

1. Introducción

En este laboratorio de código, aprenderá a crear una aplicación de chat de video simple utilizando 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 de la creación de 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 laboratorio de código, 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 la consola Firebase , haga clic en Agregar proyecto, a continuación, nombre del proyecto Firebase FirebaseRTC.

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 mediante 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 la nube Firestore.
  3. Seleccione la opción de inicio en modo de prueba, a continuación, 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 ejemplo debería haber sido clonado en el FirebaseRTC directorio. 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

Abrir los archivos en FirebaseRTC en su editor y cambiar de acuerdo a las siguientes instrucciones. Este directorio contiene el código de inicio para el laboratorio de código 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. Instalar la CLI ejecutando el siguiente comando NPM: sh npm -g install firebase-tools
  1. Compruebe que la CLI se ha 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. Autorizar a la base del fuego 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 desde el directorio y los archivos locales de su aplicación. Pero para hacer esto, necesita asociar su aplicación con su proyecto de Firebase.

  1. Asociar su aplicación con su proyecto 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 programación, vamos a utilizar el alias de 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 CLI Firebase: sh firebase serve --only hosting

  2. Su línea de comandos debería 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 habitación contendrá los RTCSessionDescriptions tanto para la oferta y la respuesta, así como dos colecciones separadas con los candidatos de cada partido ICE.

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. Abrir public/app.js y encontrar el comentario // Add code for creating a room here y añadir 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á a la oferta de la persona que llama. Luego, se establece como la 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 cuando se haya agregado 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 va a esperar hasta que el destinatario de la llamada escribe el RTCSessionDescription por la respuesta, y un conjunto que a medida que la descripción de la persona que llama a distancia 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 clic en el botón sala de unirse y de introducir el ID de la habitación para unirse. Su tarea es poner en práctica la creación de la RTCSessionDescription por la respuesta y actualizar la habitación 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, empezamos por la extracción de la oferta de la persona que llama y la creación de un RTCSessionDescription que nos propusimos como la descripción remoto. 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 dará lugar a la onSnapshot de devolución de llamada en el lado de la persona que llama, que a su vez establecer la descripción remoto basándose en la respuesta del destinatario de la llamada. Esto completa el intercambio de la RTCSessionDescription objetos entre la llama y el destinatario de la llamada.

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. Encontrar la función collectIceCandidates y agregue el código siguiente:

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. Recoge los candidatos hielo de la API de WebRTC y los añade a la base de datos, y escuchas para los candidatos ICE añadida por la distancia entre pares y los añade a su RTCPeerConnection ejemplo. 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