Google se compromete a avanzar en la equidad racial para las comunidades negras. Ver cómo.
Esta página se ha traducido con Cloud Translation API.
Switch to English

Firebase + WebRTC de experimento de código

1. Introducción

En este laboratorio de programación, usted aprenderá cómo construir una aplicación de chat de vídeo simple usando la API de WebRTC en su navegador y Cloud Firestore para la señalización. La aplicación se llama FirebaseRTC y trabaja como un ejemplo simple que le enseñará los conceptos básicos de la construcción de WebRTC activar aplicaciones.

Lo que aprenderá

  • Iniciar una llamada de vídeo en una aplicación web mediante WebRTC
  • Señalización a la ubicación remota utilizando la nube Firestore

Lo que necesitarás

Antes de comenzar este laboratorio de programación, asegúrese de que ha instalado:

  • Se recomienda Nodo LTS - NPM que por lo general viene con Node.js

2. Crear y configurar un proyecto Firebase

Crear un proyecto Firebase

  1. En la consola Firebase , haga clic en Agregar proyecto, a continuación, nombre del proyecto Firebase FirebaseRTC.

Recuerde que el ID del proyecto para su proyecto Firebase.

  1. Haga clic en Crear proyecto.

La aplicación que se va a construir utiliza dos servicios de base de fuego disponibles en la web:

  • Nube Firestore para guardar datos estructurados en la nube y obtener una notificación instantánea cuando se actualizan los datos
  • Firebase hosting para alojar y servir a sus activos estáticos

Para este laboratorio de programación específica, que ya ha configurado Firebase de alojamiento en el proyecto que va a clonar. Sin embargo, para la nube Firestore, le guiaremos a través de la configuración y activación de los servicios que utilizan la consola Firebase.

Habilitar la nube Firestore

La aplicación utiliza la nube Firestore para guardar los mensajes de chat y recibir nuevos mensajes de chat.

Tendrá que permitirá la nube Firestore:

  1. En el menú de la consola Firebase Desarrollemos sección, haga 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.

asegura modo de prueba que se puede escribir libremente a la base de datos durante el desarrollo. Haremos nuestra base de datos más seguro más adelante en este laboratorio de programación.

3. Obtener el código de ejemplo

Clonar el repositorio GitHub desde la línea de comandos:

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

El código de ejemplo debería haber sido clonado en el directorio de base de fuego-RTC-web. Asegúrese de que su línea de comandos se ejecuta desde este directorio a partir de ahora:

 cd firebase-rtc-web
 

Importar la aplicación de arranque

Abrir los archivos de base de fuego-RTC-web en su editor y cambiar de acuerdo a las siguientes instrucciones. Este directorio contiene el código de partida para el laboratorio de programación que consiste en una aplicación de WebRTC que aún no es funcional. Lo haremos funcional a través de este laboratorio de programación.

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

La interfaz de línea de comandos Firebase (CLI) le permite servir a su aplicación web localmente y desplegar su aplicación web a 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 la base del fuego CLI es v6.7.1 o posterior.

  1. Autorizar a la base del fuego CLI ejecutando el siguiente comando: sh firebase login

Que haya configurado la plantilla de aplicación web para tirar de la configuración de su aplicación para Firebase de alojamiento de directorio y los archivos locales de su aplicación. Pero para hacer esto, es necesario asociar su aplicación con su proyecto Firebase.

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

  2. Cuando se le indique, seleccione su identificación del proyecto, a continuación, dar a su proyecto Firebase un alias.

Un alias es útil si tiene varios ambientes (producción, puesta en escena, etc.). Sin embargo, para este laboratorio de programación, vamos a utilizar el alias de default .

  1. Siga las instrucciones restantes en la línea de comandos.

5. Ejecutar el servidor local

Usted está listo para comenzar a trabajar en realidad nuestra aplicación! Vamos a ejecutar la aplicación a nivel local!

  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 utilizando el emulador de alojamiento Firebase para servir a nuestra aplicación localmente. La aplicación web debe estar disponible en http: // localhost: 5000.

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

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

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

6. Creación de una nueva sala

En esta aplicación, cada sesión de chat de vídeo se llama una habitación. Un usuario puede crear una nueva sala haciendo clic en un botón en su aplicación. Esto generará un ID que la parte remota puede utilizar para unirse a la misma habitación. La ID se utiliza como clave en la nube 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 la creación de una nueva sala 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. Esto se establece a continuación, como la descripción del local y, finalmente, escribe en el nuevo objeto habitación en la nube Firestore.

A continuación, vamos a escuchar los cambios a la base de datos y detectar cuando se ha añadido una respuesta del destinatario de la llamada.

 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. Junto a una habitación

El siguiente paso es implementar la lógica para unirse a una sala 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, vamos a crear la respuesta, la colocó como la descripción local y actualizar 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. candidatos ICE Collect

Antes de la persona que llama y el destinatario de la llamada pueden conectarse entre sí, también es necesario que los candidatos de intercambio de ICE que le dicen a WebRTC cómo conectarse a la par remoto. Su siguiente tarea es implementar el código que escucha los candidatos del ICE y los añade a una colección en la base de datos. Encontrar la función collectIceCandidates y agregue el código siguiente:

 async function collectIceCandidates(roomRef, peerConneciton,    
                                    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. Es importante cuando se escucha a la base de datos cambia para filtrar cualquier cosa que no es una nueva incorporación, ya que de otro modo habría añadido el mismo conjunto de candidatos ICE una y otra vez.

9. Conclusión

En este laboratorio de programación que ha aprendido cómo implementar la señalización para WebRTC usando la nube Firestore, así como la forma de utilizar que para la creación de una sencilla aplicación de chat de vídeo.

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

  1. Código Fuente FirebaseRTC
  2. muestras de WebRTC
  3. nube Firestore