Google verpflichtet sich Rassen Eigenkapital für Black Gemeinden voranzutreiben. Siehe wie.
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Firebase + WebRTC Codelab

1. Einleitung

In diesem Code-Lab, erfahren Sie, wie eine einfache Video-Chat-Anwendung erstellen, mit dem WebRTC-API in Ihrem Browser und Cloud-Firestor für die Signalisierung. Die Anwendung wird FirebaseRTC genannt und arbeitet als einfaches Beispiel, das die Grundlagen lernen von Aufbau WebRTC Anwendungen aktiviert.

Was Sie lernen

  • Initiieren Sie einen Videoanruf in einer Web-Anwendung mit WebRTC
  • Signalisierung an den anderen Teilnehmern mit Cloud-Firestor

Was du brauchen wirst

Vor dem Start dieses Codelab, stellen Sie sicher, dass Sie installiert haben:

  • npm die typischerweise mit Node.js kommt - Knoten LTS wird empfohlen

2. Erstellen und ein Projekt Firebase einrichten

Erstellen Sie ein Projekt Firebase

  1. In der Firebase - Konsole , klicken Sie auf Hinzufügen Projekt, dann das Projekt Firebase FirebaseRTC nennen.

Denken Sie an die Projekt-ID für Ihr Projekt Firebase.

  1. Klicken Sie auf Projekt.

Die Anwendung, die Sie bauen gehen verwendet zwei Firebase Dienste im Internet verfügbar:

  • Cloud Firestor zu strukturierte Daten in der Cloud zu speichern und sofort eine Benachrichtigung erhalten, wenn die Daten aktualisiert werden
  • Hosting Firebase zu Host und dienen Ihre statischen Vermögenswerte

Für dieses spezifische Code-Lab, haben Sie bereits Firebase Hosting im Projekt konfigurieren Sie das Klonen werden. Doch für Cloud Firestor, werden wir Sie durch die Konfiguration gehen und Freigabe der Dienste der Firebase-Konsole.

Aktivieren Wolke Firestor

Die App nutzt Cloud-Firestor die Chat-Nachrichten zu speichern und neue Chat-Nachrichten.

Sie werden Cloud-Firestor aktivieren:

  1. Im Firebase Konsolenmenü ist Abschnitt Entwickeln Sie auf Datenbank.
  2. Klicken Sie auf Datenbank erstellen in dem Cloud Firestor Bereich.
  3. Wählen Sie den Start in Testmodus - Option, klicken Sie dann auf Aktivieren nach dem Haftungsausschluss über die Sicherheitsregeln zu lesen.

Test-Modus sorgt dafür, dass Sie in die Datenbank während der Entwicklung frei schreiben kann. Wir werden unsere Datenbank mehr machen sichern später in diesem Codelab.

3. Der Beispielcode Get

Klonen Sie die GitHub-Repository über die Befehlszeile:

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

Der Beispielcode sollte in das Feuerbasis -rtc-Web - Verzeichnis geklont wurde. Stellen Sie sicher, dass Ihre Befehlszeile wird aus diesem Verzeichnis läuft ab sofort:

 cd firebase-rtc-web
 

Importieren Sie die Starter App

Öffnen Sie die Dateien in Firebase-rtc-web in Ihrem Editor und ändern Sie sie gemäß den Anweisungen unten. Dieses Verzeichnis enthält den Startcode für das Code-Lab, die aus einer App noch nicht funktional WebRTC besteht. Wir werden es in diesem Codelab funktionsfähig machen.

4. die Firebase Command Line Interface installieren

Die Firebase Command Line Interface (CLI) können Sie Ihre Web-App lokal und implementieren Sie Ihre Web-App auf Firebase Hosting dienen.

  1. Installieren Sie die CLI durch die folgende npm Befehl: sh npm -g install firebase-tools
  1. Stellen Sie sicher , dass die CLI korrekt , indem Sie den folgenden Befehl installiert wurde: sh firebase --version

Stellen Sie sicher, dass die Version des Firebase CLI ist v6.7.1 oder höher.

  1. Autorisieren Sie die Firebase CLI indem Sie den folgenden Befehl: sh firebase login

Sie haben die Web-App-Vorlage einrichten, um Ihre App-Konfiguration ziehen für Firebase Ihrer App lokale Verzeichnis und Dateien Hosting aus. Aber um dies zu tun, müssen Sie Ihre App mit Ihrem Projekt Firebase verknüpfen.

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

  2. Wählen Sie bei Aufforderung Ihre ID-Projekt, dann geben Sie Ihrem Projekt Firebase einen Aliasnamen.

Ein Alias ​​ist nützlich, wenn Sie mehrere Umgebungen (Produktion, Inszenierung, etc.) haben. Doch für diesen Codelab, lassen Sie sich einfach den Alias verwendet default .

  1. Folgen Sie den weiteren Anweisungen in der Befehlszeile.

5. Führen Sie den lokalen Server

Sie sind bereit, um tatsächlich die Arbeit an unserer App zu starten! Lassen Sie uns die App lokal ausgeführt!

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

  2. Ihre Befehlszeilen sollten die folgende Antwort angezeigt werden : hosting: Local server: http://localhost:5000

Wir verwenden die Firebase Hosting-Emulator unser App vor Ort zu bedienen. Der Web-App ist nun verfügbar unter http: // localhost: 5000.

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

Sie sollten Ihre Kopie von FirebaseRTC sehen, die mit Ihrem Projekt Firebase verbunden ist.

Die App wird in Ihre Firebase Projekt automatisch verbunden.

6. Erstellen eines neuen Raum

Bei dieser Anwendung wird jede Video-Chat-Sitzung eines Raum genannt. Ein Benutzer kann durch Klicken auf eine Schaltfläche in der Anwendung einen neuen Raum schaffen. Dies wird eine ID erzeugen, dass die anderen Teilnehmer den gleichen Raum beitreten können. Die ID wird als Schlüssel in Cloud-Firestor für jeden Raum verwendet.

Jedes Zimmer enthält die RTCSessionDescriptions sowohl für das Angebot und die Antwort, sowie zwei getrennte Sammlungen mit ICE Kandidaten von jeder Partei.

Ihre erste Aufgabe ist es, den fehlenden Code für die Erstellung eines neuen Raum mit dem ursprünglichen Angebot von dem Anrufer zu implementieren. Öffnen public/app.js und finden Sie den Kommentar // Add code for creating a room here - // Add code for creating a room here zu // Add code for creating a room here , und fügen Sie den folgenden Code:

 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 von dem Anrufer vertreten. Dies wird dann als lokale Beschreibung eingestellt und schließlich auf das neue Raum-Objekt in Cloud-Firestor geschrieben.

Als nächstes werden wir für Änderungen in der Datenbank hören und erkennen, wenn eine Antwort des Angerufenen wurde 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);
    }
});
 

Dies wird warten , bis die Angerufene die schreibt RTCSessionDescription für die Antwort, und Satz , dass als Remote - Beschreibung auf dem Anrufer RTCPeerConnection .

7. Joining ein Zimmer

Der nächste Schritt ist die Logik zum Verbinden eines vorhandenen Raumes zu implementieren. Der Benutzer tut dies , indem der Raum Schaltfläche Join klicken und die ID für den Raum beizutreten. Ihre Aufgabe hier ist es, die Schaffung der zur Umsetzung RTCSessionDescription für die Antwort und den Raum in der Datenbank entsprechend aktualisieren.

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

In dem obigen Code, beginnen wir durch das Angebot von dem Anrufer zu extrahieren und die Schaffung eines RTCSessionDescription , dass wir als Remote - Beschreibung eingestellt. Als Nächstes erstellen wir die Antwort, legen Sie es als die lokale Beschreibung und die Datenbank aktualisieren. Die Aktualisierung der Datenbank wird der Trigger onSnapshot Rückruf auf der Anruferseite, die wiederum die Remote - Beschreibung auf der Grundlage der Antwort des Angerufenen festgelegt. Damit ist der Austausch der RTCSessionDescription Objekte zwischen dem Anrufer und dem Angerufenen.

8. Collect ICE Kandidaten

Bevor der Anrufer und Angerufener miteinander verbinden können, müssen sie auch den Austausch von ICE-Kandidaten, die WebRTC sagen, wie der Remote-Peer verbinden. Ihre nächste Aufgabe ist es, den Code zu implementieren, die für ICE Kandidaten zuhört und fügt sie zu einer Sammelstelle in der Datenbank. Finden Sie die Funktion collectIceCandidates und fügen Sie den folgenden Code:

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

Diese Funktion macht zwei Dinge. Er sammelt ICE Kandidaten aus dem WebRTC - API und fügt sie in die Datenbank und Streams für zusätzlichen ICE Kandidaten aus dem Remote - Peer und fügt sie seine RTCPeerConnection Instanz. Es ist wichtig, beim Hören von Datenbank ändert nichts zu filtern, die nicht eine neue Ergänzung ist, da wir sonst den gleichen Satz von ICE Kandidaten immer und immer wieder aufgenommen hätten.

9. Schlussfolgerung

In diesem Codelab haben Sie gelernt, wie für WebRTC mit Cloud-Firestor zu implementieren Signalisierung, sowie, wie das verwenden, für eine einfache Video-Chat-Anwendung.

Um mehr zu erfahren, besuchen Sie die folgenden Ressourcen:

  1. FirebaseRTC Source Code
  2. WebRTC Proben
  3. Cloud Firestor