Atelier de programmation Firebase et WebRTC

1. Introduction

Dans cet atelier de programmation, vous apprendrez à créer une application de chat vidéo simple à l'aide de l'API WebRTC dans votre navigateur et Cloud Firestore pour la signalisation. La s'appelle FirebaseRTC. Il s'agit d'un exemple simple les bases de la création d'applications compatibles avec WebRTC.

<ph type="x-smartling-placeholder">
</ph>

Points abordés

  • Lancer un appel vidéo dans une application Web à l'aide de WebRTC
  • Envoyer des signaux au tiers distant à l'aide de Cloud Firestore

Prérequis

Avant de commencer cet atelier de programmation, assurez-vous d'avoir installé:

  • npm, généralement fourni avec Node.js. Node LTS est recommandé

2. Créer et configurer un projet Firebase

Créer un projet Firebase

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

Mémorisez l'ID de votre projet Firebase.

<ph type="x-smartling-placeholder">
</ph>
  1. Cliquez sur "Créer un projet".

L'application que vous allez créer utilise deux services Firebase disponibles sur le Web:

  • Cloud Firestore pour enregistrer des données structurées dans le cloud et obtenir des données notification lorsque les données sont mises à jour
  • Firebase Hosting pour héberger et diffuser vos éléments statiques

Pour cet atelier de programmation spécifique, vous avez déjà configuré Firebase Hosting dans le projet que vous allez cloner. Cependant, pour Cloud Firestore, nous allons vous expliquer la configuration et l'activation des services à l'aide de la console Firebase.

Activer Cloud Firestore

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

Vous devez activer Cloud Firestore:

  1. Dans la section "Développement" du menu de la console Firebase, cliquez sur "Base de données".
  2. Cliquez sur Créer une base de données dans le volet Cloud Firestore.
  3. Sélectionnez l'option Démarrer en mode test, puis cliquez sur "Activer" après avoir lu les clause de non-responsabilité concernant les règles de sécurité.

Le mode test vous permet d'écrire librement dans la base de données pendant le développement. Nous renforcerons la sécurité de notre base de données dans la suite de cet atelier de programmation.

3. Obtenir l'exemple de code

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

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

L'exemple de code doit avoir été cloné dans le répertoire FirebaseRTC. Assurez-vous que votre ligne de commande est désormais exécutée à partir de ce répertoire:

cd FirebaseRTC

Importer l'application de départ

Ouvrez les fichiers dans FirebaseRTC dans votre éditeur et modifiez-les en conséquence les instructions ci-dessous. Ce répertoire contient le code de démarrage atelier de programmation constitué d'une application WebRTC pas encore fonctionnelle. Nous allons le mettre en œuvre tout au long de cet atelier de programmation.

4. Installer l'interface de ligne de commande Firebase

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

<ph type="x-smartling-placeholder">
</ph>
  1. Installez la CLI en exécutant la commande npm suivante: sh npm -g install firebase-tools
<ph type="x-smartling-placeholder">
</ph>
  1. Vérifiez que la CLI a été installée correctement en exécutant la commande suivante : : sh firebase --version

Assurez-vous que la version 6.7.1 de la CLI Firebase ou une version ultérieure est installée.

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

Vous avez configuré le modèle d'application Web afin d'extraire la configuration de votre application pour Firebase. Hébergement à partir du répertoire local et des fichiers de votre application. Mais pour ce faire, vous devez associer votre application à votre projet Firebase.

  1. Associez votre application à votre projet Firebase en exécutant la commande suivante : sh firebase use --add

  2. Lorsque vous y êtes invité, sélectionnez l'ID de votre projet, puis attribuez-lui une un alias.

Un alias est utile si vous disposez de plusieurs environnements (production, préproduction, etc.). Toutefois, pour cet atelier de programmation, utilisons simplement l'alias de default.

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

5. Exécuter le serveur local

Vous êtes prêt à commencer à travailler sur notre application ! Exécutons l'application en local.

  1. Exécutez la commande de 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 Firebase Hosting pour diffuser notre application en local. Application Web devrait maintenant être disponible depuis http://localhost:5000.

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

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

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

6. Création d'une pièce...

Dans cette application, chaque session de chat vidéo est appelée "salle". Un utilisateur peut créer une nouvelle salle en cliquant sur un bouton dans son application. Un ID sera généré que le groupe à distance peut utiliser pour rejoindre la même pièce. L'ID est utilisé comme clé dans Cloud Firestore pour chaque salle.

Chaque chambre contiendra le RTCSessionDescriptions pour l'offre et le ainsi que deux collections distinctes avec des candidats ICE de chaque parti.

Votre première tâche consiste à implémenter le code manquant pour créer une salle avec l'offre initiale de l'appelant. Ouvrez public/app.js, recherchez 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 un RTCSessionDescription qui représentera l'offre. de l'appelant. Il est ensuite défini comme description locale et écrit au nouvel objet "room" dans Cloud Firestore.

Ensuite, nous écouterons les modifications apportées à la base de données et détecterons quand une réponse d'un l'appelé 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 que l'appelé écrit l'RTCSessionDescription pour le et la définir comme description à distance pour l'appelant RTCPeerConnection

7. Rejoindre un salon

L'étape suivante consiste à implémenter la logique permettant de rejoindre une salle existante. L'utilisateur Pour cela, cliquez sur le bouton Rejoindre la salle et saisissez l'identifiant de la salle. pour participer. Votre tâche consiste à implémenter la création RTCSessionDescription pour la réponse et mettez à jour la salle 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 à créer un RTCSessionDescription que nous avons défini comme description distante. Ensuite, nous créons la réponse, le définir comme description locale et mettre à jour la base de données. La mise à jour de la base de données déclenchera le rappel onSnapshot côté appelant, ce qui et définiront ensuite la description à distance en fonction de la réponse de l'appelé. L'échange des objets RTCSessionDescription entre les l'appelant et l'appelé.

8. Collecter des candidats ICE

Pour que l'appelant et l'appelé puissent communiquer l'un avec l'autre, ils doivent également des candidats ICE qui indiquent à WebRTC comment se connecter au pair distant. Votre prochaine tâche consiste à implémenter le code qui écoute les candidats ICE et ajoute dans une collection de la base de données. Trouver la fonction collectIceCandidates et ajoutez le code suivant:

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());
                peerConnection.addIceCandidate(candidate);
            }
        });
    })
}

Cette fonction remplit deux fonctions. Il collecte les candidats ICE à partir de l'API WebRTC et les ajoute à la base de données et écoute les candidats ICE ajoutés à partir de la télécommande et les ajoute à son instance RTCPeerConnection. Il est important quand écouter les modifications de la base de données pour filtrer tout ce qui n'est pas un nouvel ajout, car nous aurions autrement ajouté le même ensemble de candidats ICE à maintes reprises. à nouveau.

9. Conclusion

Dans cet atelier de programmation, vous avez appris à implémenter la signalisation pour WebRTC à l'aide de Cloud Firestore, et vous expliquerons comment l'utiliser pour créer un simple chat vidéo. application.

Pour en savoir plus, consultez les ressources suivantes:

  1. Code source FirebaseRTC
  2. Exemples WebRTC
  3. Cloud Firestore