Firebase + WebRTC-Codelab

1. Einführung

In diesem Codelab lernen Sie, wie Sie mit die WebRTC API in Ihrem Browser und Cloud Firestore für die Signalisierung. Die App heißt FirebaseRTC. Sie dient als einfaches Beispiel, lernen Sie die Grundlagen der Erstellung von WebRTC-fähigen Anwendungen kennen.

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

Lerninhalte

  • Videoanrufe in einer Webanwendung mit WebRTC starten
  • Signalisierung an die Remote-Partei mithilfe von Cloud Firestore

Voraussetzungen

Bevor Sie dieses Codelab starten, muss Folgendes installiert sein:

  • npm, das in der Regel im Lieferumfang von Node.js enthalten ist – Node LTS wird empfohlen

2. Firebase-Projekt erstellen und einrichten

Firebase-Projekt erstellen

  1. Klicken Sie in der Firebase Console auf „Hinzufügen“. und nennen Sie das Firebase-Projekt FirebaseRTC.

Merken Sie sich die Projekt-ID Ihres Firebase-Projekts.

<ph type="x-smartling-placeholder">
</ph>
  1. Klicken Sie auf „Projekt erstellen“.

In Ihrer Anwendung werden zwei Firebase-Dienste verwendet, im Web:

  • Cloud Firestore ein, um strukturierte Daten in der Cloud zu speichern und Benachrichtigung, wenn die Daten aktualisiert werden
  • Firebase Hosting zum Hosten und Bereitstellen statischer Assets

Für dieses Codelab haben Sie Firebase Hosting bereits in der das Sie klonen werden. Für Cloud Firestore werden wir Sie jedoch durch Konfiguration und Aktivierung der Dienste über die Firebase Console

Cloud Firestore aktivieren

Die Anwendung verwendet Cloud Firestore, um die Chatnachrichten zu speichern und neue Chats zu empfangen Nachrichten.

Sie müssen Cloud Firestore aktivieren:

  1. Klicken Sie im Menü der Firebase Console im Abschnitt „Entwickeln“ auf „Datenbank“.
  2. Klicken Sie im Cloud Firestore-Bereich auf Datenbank erstellen.
  3. Wählen Sie die Option Im Testmodus starten aus und klicken Sie dann auf „Aktivieren“, nachdem Sie die zu den Sicherheitsregeln.

Der Testmodus stellt sicher, dass Sie während der Entwicklung ungehindert in die Datenbank schreiben können. Später in diesem Codelab machen wir unsere Datenbank sicherer.

3. Beispielcode abrufen

Klonen Sie das GitHub-Repository über die Befehlszeile:

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

Der Beispielcode muss in das Verzeichnis FirebaseRTC geklont worden sein. Sorgen Sie dafür, dass die Befehlszeile ab jetzt in diesem Verzeichnis ausgeführt wird:

cd FirebaseRTC

Start-App importieren

Öffnen Sie die Dateien in FirebaseRTC im Editor und ändern Sie sie gemäß befolgen Sie die Anleitung unten. Dieses Verzeichnis enthält den Startcode für den Codelab, der aus einer noch nicht funktionierenden WebRTC-App besteht. Das schaffen wir in diesem Codelab funktionieren.

4. Firebase-Befehlszeile installieren

Mit der Firebase-Befehlszeile (Command Line Interface, CLI) können Sie Ihre Web-App bereitstellen lokal und stellen Sie Ihre Webanwendung in Firebase Hosting bereit.

<ph type="x-smartling-placeholder">
</ph>
  1. Führen Sie den folgenden npm-Befehl aus, um die Befehlszeile zu installieren: sh npm -g install firebase-tools
<ph type="x-smartling-placeholder">
</ph>
  1. Prüfen Sie mit dem folgenden Befehl, ob die Befehlszeile korrekt installiert wurde: Befehl: sh firebase --version

Achten Sie darauf, dass die Version der Firebase CLI Version 6.7.1 oder höher ist.

  1. Autorisieren Sie die Firebase CLI mit dem folgenden Befehl: sh firebase login

Sie haben die Web-App-Vorlage eingerichtet, um die Konfiguration Ihrer App für Firebase abzurufen Hosting über das lokale Verzeichnis und die Dateien Ihrer Anwendung Dazu müssen Sie jedoch und verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt.

  1. Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen: Befehl: sh firebase use --add

  2. Wenn Sie dazu aufgefordert werden, wählen Sie Ihre Projekt-ID aus und weisen Sie Ihrem Firebase-Projekt ein Alias.

Ein Alias ist nützlich, wenn Sie mehrere Umgebungen haben (Produktion, Staging usw.). Für dieses Codelab verwenden wir jedoch einfach den Alias default.

  1. Folgen Sie den übrigen Anweisungen in der Befehlszeile.

5. Lokalen Server ausführen

Jetzt können Sie mit der Arbeit an unserer App beginnen. Lassen Sie uns die Anwendung lokal ausführen.

  1. Führen Sie den folgenden Firebase CLI-Befehl aus: sh firebase serve --only hosting

  2. In der Befehlszeile sollte die folgende Antwort angezeigt werden: hosting: Local server: http://localhost:5000

Wir verwenden den Firebase Hosting-Emulator, um unsere App lokal bereitzustellen. Web-App sollten nun unter http://localhost:5000 verfügbar sein.

  1. Öffnen Sie die Anwendung unter http://localhost:5000.

Sie sollten jetzt Ihre Kopie von FirebaseRTC sehen, die mit Ihrem Firebase-Projekt

Die App wurde automatisch mit Ihrem Firebase-Projekt verbunden.

6. Neuen Raum erstellen

In dieser Anwendung wird jede Videochat-Sitzung als Chatroom bezeichnet. Ein Nutzer kann indem er auf eine Schaltfläche in der App klickt. Dadurch wird eine ID generiert. damit die andere Person im selben Raum Mitglied werden kann. Die ID wird als Schlüssel verwendet. in Cloud Firestore für jeden Raum ein.

Jedes Zimmer enthält das RTCSessionDescriptions sowohl für das Angebot als auch für das sowie zwei separate Sammlungen mit ICE-Kandidaten jeder Partei.

Ihre erste Aufgabe besteht darin, den fehlenden Code zum Erstellen eines neuen Raums mit das ursprüngliche Angebot des Anrufers. Öffnen Sie public/app.js, suchen Sie den Kommentar // Add code for creating a room here und fügen Sie den folgenden Code hinzu:

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!`

Die erste Zeile erstellt eine RTCSessionDescription, die das Angebot darstellt. vom Anrufer. Dies wird als lokale Beschreibung festgelegt und schließlich auf das neue Raumobjekt in Cloud Firestore.

Als Nächstes warten wir auf Änderungen in der Datenbank und erkennen, wenn eine Antwort von wurde der Aufgerufene hinzugefügt.

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

Es wird gewartet, bis der Aufgerufene die RTCSessionDescription für die den Anruf annehmen und das als Remote-Beschreibung für den Anrufer festlegen. RTCPeerConnection.

7. Einem Chatroom beitreten

Im nächsten Schritt implementieren Sie die Logik für den Beitritt zu einem vorhandenen Raum. Der Nutzer Klicken Sie dazu auf die Schaltfläche Chatroom beitreten und geben Sie die ID des Chatrooms ein. . Ihre Aufgabe ist es, die Erstellung des RTCSessionDescription für die Antwort und aktualisiere den Raum in der Datenbank entsprechend anpassen.

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

Im Code oben extrahieren wir das Angebot des Aufrufers und erstellen eine RTCSessionDescription, die wir als Remote-Beschreibung festgelegt haben. Als Nächstes erstellen wir die Antwort, legen Sie sie als lokale Beschreibung fest und aktualisieren Sie die Datenbank. Das Update der Datenbank löst den onSnapshot-Callback auf der Aufruferseite aus, was die Remote-Beschreibung basierend auf der Antwort des Aufgerufenen. Damit ist der Austausch der RTCSessionDescription-Objekte zwischen den und den Aufgerufenen.

8. ICE-Kandidaten erfassen

Bevor der Anrufer und der Aufgerufene eine Verbindung herstellen können, müssen sie auch Folgendes tun: ICE-Kandidaten austauschen, die WebRTC mitteilen, wie eine Verbindung zum Remote-Peer hergestellt werden soll. Als Nächstes musst du den Code implementieren, der ICE-Kandidaten überwacht und neue in einer Sammlung in der Datenbank speichern. Die Funktion collectIceCandidates finden und fügen Sie den folgenden Code hinzu:

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

Diese Funktion erfüllt zwei Dinge. Sie erfasst ICE-Kandidaten aus der WebRTC API und fügt sie der Datenbank hinzu und wartet per Remote-Zugriff auf hinzugefügte ICE-Kandidaten. Peer und fügt ihn seiner RTCPeerConnection-Instanz hinzu. Es ist wichtig, Datenbankänderungen überwachen, um alles herauszufiltern, das keine Neuzugänge sind, da wir sonst immer wieder dieselben ICE-Kandidaten hinzugefügt hätten. noch einmal.

9. Fazit

In diesem Codelab haben Sie gelernt, wie Sie Signalisierung für WebRTC mithilfe von Cloud Firestore und wie Sie damit einen einfachen Videoanruf erstellen .

Weitere Informationen finden Sie in den folgenden Ressourcen:

  1. FirebaseRTC-Quellcode
  2. WebRTC-Beispiele
  3. Cloud Firestore