Google est engagé à faire progresser l'équité raciale pour les communautés noires. Regarde comment.
Cette page a été traduite par l'API Cloud Translation.
Switch to English

Firebase + WebRTC Codelab

1. Introduction

Dans ce codelab, vous apprendrez comment construire une simple application de chat vidéo en utilisant l'API WebRTC dans votre navigateur et Cloud Firestore pour la signalisation. L'application est appelée FirebaseRTC et fonctionne comme un exemple simple qui vous apprendra les bases de la construction a permis WebRTC applications.

Ce que vous apprendrez

  • Passer un appel vidéo dans une application Web en utilisant WebRTC
  • Signalisation à la partie à distance en utilisant Nuage Firestore

Qu'est-ce que vous aurez besoin

Avant de commencer cette codelab, assurez-vous que vous avez installé:

  • NPM qui vient généralement avec Node.js - Noeud LTS est recommandé

2. Créer et mettre en place un projet Firebase

Créer un projet Firebase

  1. Dans la console Firebase , cliquez sur Ajouter un projet, puis nommez le projet Firebase FirebaseRTC.

Rappelez-vous l'ID de projet pour votre projet Firebase.

  1. Cliquez sur Créer un projet.

L'application que vous allez construire utilise deux services disponibles Firebase sur le web:

  • Cloud Firestore pour enregistrer des données structurées sur le Cloud et la notification instantanée obtenir lorsque les données sont mises à jour
  • Hébergement Firebase à l'hôte et de servir vos actifs statiques

Pour cette codelab spécifique, vous avez déjà configuré Firebase d'hébergement dans le projet que vous allez clonage. Cependant, pour Cloud Firestore, nous allons vous guider à travers la configuration et permettant des services à l'aide de la console Firebase.

Activer Nuage Firestore

L'application utilise Nuage Firestore pour enregistrer les messages de chat et recevoir de nouveaux messages de chat.

Vous devez activer Nuage Firestore:

  1. Dans le menu de la console Firebase Développons section, cliquez sur Base de données.
  2. Cliquez sur Créer la base de données dans le volet Nuage Firestore.
  3. Sélectionnez Démarrer en option en mode test, puis cliquez sur Activer après avoir lu l'avertissement sur les règles de sécurité.

mode test permet de vérifier que vous pouvez écrire librement à la base de données au cours du développement. Nous ferons de notre base de données plus sécurisée plus loin dans ce codelab.

3. Obtenir le code échantillon

Cloner le dépôt GitHub à partir de la ligne de commande:

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

L'exemple de code aurait été cloné dans le répertoire firebase-pac-web. Assurez-vous que votre ligne de commande est exécutée à partir de ce répertoire à partir de maintenant:

 cd firebase-rtc-web
 

Importer l'application de démarrage

Ouvrez les fichiers dans firebase-pac-web dans votre éditeur et de les changer selon les instructions ci - dessous. Ce répertoire contient le code de départ pour la codelab qui consiste en une application WebRTC non fonctionnel. Nous allons le rendre fonctionnel tout au long codelab.

4. Installez la commande Firebase interface de ligne

L'interface de ligne de commande Firebase (CLI de) vous permet de servir votre application Web localement et déployer votre application Web Hosting Firebase.

  1. Installer la CLI en exécutant la commande NPM suivante: sh npm -g install firebase-tools
  1. Vérifiez que la CLI a été installé correctement en exécutant la commande suivante: sh firebase --version

Assurez-vous que la version de la CLI Firebase est v6.7.1 ou ultérieure.

  1. CLI Firebase autorise en exécutant la commande suivante: sh firebase login

Vous avez configuré le modèle de l'application Web pour tirer la configuration de votre application pour Firebase Hébergement de répertoire local et les fichiers de votre application. Mais pour ce faire, vous devez associer votre application avec votre projet Firebase.

  1. Associer votre application avec votre projet Firebase en exécutant la commande suivante: l' sh firebase use --add

  2. Lorsque vous êtes invité, sélectionnez votre ID projet, puis donnez votre projet Firebase un alias.

Un alias est utile si vous avez plusieurs environnements (production, mise en scène, etc.). Cependant, pour ce codelab, nous allons simplement utiliser l'alias de default .

  1. Suivez les instructions restantes dans votre ligne de commande.

5. Exécutez le serveur local

Vous êtes prêt à commencer réellement travailler sur notre application! Lançons l'application locale!

  1. Exécutez la commande CLI Firebase suivante: sh firebase serve --only hosting

  2. Votre ligne de commande doit afficher la réponse suivante: hosting: Local server: http://localhost:5000

Nous utilisons l'émulateur d'hébergement Firebase pour servir notre application localement. L'application Web doit maintenant être disponible à l'adresse http: // localhost: 5000.

  1. Ouvrez votre application à l'adresse http: // localhost: 5000.

Vous devriez voir votre copie de FirebaseRTC qui a été connecté à votre projet Firebase.

L'application est automatiquement connecté à votre projet Firebase.

6. Création d'une nouvelle salle

Dans cette application, chaque session de chat est appelé une pièce. Un utilisateur peut créer une nouvelle pièce en cliquant sur un bouton dans leur application. Cela va générer une carte d'identité que la partie distant peut utiliser pour se joindre à la même pièce. L'ID est utilisé comme la clé du Cloud Firestore pour chaque chambre.

Chaque chambre contiendra les RTCSessionDescriptions à la fois l'offre et la réponse, ainsi que deux collections distinctes avec les candidats ICE de chaque partie.

Votre première tâche consiste à mettre en œuvre le code manquant pour créer une nouvelle salle avec l'offre initiale de l'appelant. Ouvert public/app.js et trouver le commentaire // Add code for creating a room here et ajoutez le code suivant:

 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 première ligne crée une RTCSessionDescription qui représentera l'offre de l'appelant. Il est ensuite défini comme la description locale, et enfin écrit au nouvel objet de chambre dans Nuage Firestore.

Ensuite, nous allons écouter les modifications apportées à la base de données et détecter une réponse du callee a été ajouté.

 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);
    }
});
 

Cela attendra jusqu'à ce que le écrit le callee RTCSessionDescription pour la réponse, et ensemble que la description à distance sur l'appelant RTCPeerConnection .

7. Rejoindre une chambre

L'étape suivante consiste à mettre en œuvre la logique pour se joindre à une salle existante. L'utilisateur fait en cliquant sur le bouton chambre Rejoindre et en entrant l'ID de la salle à se joindre. Votre tâche ici est de mettre en œuvre la création du RTCSessionDescription pour la réponse et mettre à jour la pièce dans la base de données en conséquence.

 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);
 

Dans le code ci - dessus, nous commençons par extraire l'offre de l'appelant et la création d' un RTCSessionDescription que nous fixons comme la description à distance. Ensuite, nous créons la réponse, définie comme la description locale, et mettre à jour la base de données. La mise à jour de la base de données déclenche le onSnapshot rappel du côté de l' appelant, ce qui définira la description à distance en fonction de la réponse de l'appelé. Ceci complète l'échange des RTCSessionDescription objets entre l'appelant et l'appelé.

8. Collectionnez les candidats ICE

Avant l'appelant et l'appelé peuvent se connecter les uns aux autres, ils ont aussi besoin de candidats échange ICE qui indiquent WebRTC comment se connecter à l'homologue distant. Votre tâche suivante consiste à mettre en œuvre le code qui écoute les candidats ICE et les ajoute à une collection dans la base de données. Trouvez la fonction collectIceCandidates et ajoutez le code suivant:

 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);
            }
        });
    })
}
 

Cette fonction fait deux choses. Il rassemble les candidats ICE de l'API WebRTC et les ajoute à la base de données et à l' écoute des candidats ICE ajoutée de l'homologue distant et les ajoute à son RTCPeerConnection exemple. Il est important lors de l'écoute de la base de données change pour filtrer tout ce qui est pas une nouveauté, car sinon nous aurions ajouté le même ensemble de candidats ICE encore et encore.

9. Conclusion

Dans ce codelab vous avez appris à mettre en œuvre la signalisation pour WebRTC en utilisant Nuage Firestore, ainsi que la façon de l'utiliser pour créer une simple application de chat vidéo.

Pour en savoir plus, visitez les ressources suivantes:

  1. FirebaseRTC code source
  2. échantillons WebRTC
  3. cloud Firestore