Firebase + WebRTC Codelab

1. Wstęp

W tym kodowaniu dowiesz się, jak zbudować prostą aplikację do czatu wideo przy użyciu interfejsu API WebRTC w przeglądarce i Cloud Firestore do sygnalizacji. Aplikacja nazywa się FirebaseRTC i działa jako prosty przykład, który nauczy Cię podstaw tworzenia aplikacji obsługujących WebRTC.

Czego się nauczysz

• Inicjowanie połączenia wideo w aplikacji internetowej za pomocą WebRTC
• Sygnalizacja strony zdalnej za pomocą Cloud Firestore

Co będziesz potrzebował

Przed rozpoczęciem tego codelab upewnij się, że masz zainstalowane:

• npm, który zwykle jest dostarczany z Node.js - zalecany jest Node LTS

2. Utwórz i skonfiguruj projekt Firebase

Utwórz projekt Firebase

1. W konsoli Firebase kliknij Dodaj projekt, a następnie nazwij projekt Firebase FirebaseRTC.

Zapamiętaj identyfikator projektu dla swojego projektu Firebase.

1. Kliknij Utwórz projekt.

Aplikacja, którą zamierzasz zbudować, korzysta z dwóch usług Firebase dostępnych w sieci:

• Cloud Firestore, aby zapisywać uporządkowane dane w chmurze i otrzymywać natychmiastowe powiadomienia, gdy dane zostaną zaktualizowane
• Hosting Firebase do hostowania i udostępniania Twoich statycznych zasobów

W przypadku tej konkretnej biblioteki kodowej masz już skonfigurowany Hosting Firebase w projekcie, który będziesz klonować. Jednak w przypadku Cloud Firestore przeprowadzimy Cię przez proces konfiguracji i włączania usług za pomocą konsoli Firebase.

Włącz Cloud Firestore

Aplikacja korzysta z Cloud Firestore do zapisywania wiadomości czatu i odbierania nowych wiadomości czatu.

Musisz włączyć Cloud Firestore:

1. W sekcji Develop menu konsoli Firebase kliknij opcję Baza danych.
2. Kliknij Utwórz bazę danych w panelu Cloud Firestore.
3. Wybierz opcję Uruchom w trybie testowym , a następnie kliknij opcję Włącz po przeczytaniu zastrzeżenia dotyczącego reguł bezpieczeństwa.

Tryb testowy zapewnia swobodne zapisywanie w bazie danych podczas programowania. W dalszej części tego kodowania poprawimy bezpieczeństwo naszej bazy danych.

3. Pobierz przykładowy kod

Sklonuj repozytorium GitHub z wiersza poleceń:

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

Przykładowy kod powinien zostać sklonowany do katalogu FirebaseRTC . Upewnij się, że linia poleceń jest od teraz uruchamiana z tego katalogu:

cd FirebaseRTC

Zaimportuj aplikację startową

Otwórz pliki w FirebaseRTC w swoim edytorze i zmień je zgodnie z poniższymi instrukcjami. Ten katalog zawiera kod początkowy dla codelab, który składa się z niedziałającej jeszcze aplikacji WebRTC. Sprawimy, że będzie funkcjonował w całym tym kodowaniu.

4. Zainstaluj interfejs wiersza poleceń Firebase

Interfejs wiersza polecenia Firebase (CLI) umożliwia lokalną obsługę aplikacji internetowej i wdrażanie jej w Hostingu Firebase.

1. Zainstaluj CLI, uruchamiając następującą komendę npm: sh npm -g install firebase-tools

1. Sprawdź, czy interfejs CLI został poprawnie zainstalowany, uruchamiając następujące polecenie: sh firebase --version

Upewnij się, że wersja interfejsu wiersza polecenia Firebase to 6.7.1 lub nowsza.

1. Autoryzuj interfejs wiersza polecenia Firebase, uruchamiając następujące polecenie: sh firebase login

Skonfigurowałeś szablon aplikacji internetowej, aby pobrać konfigurację aplikacji dla Hostingu Firebase z lokalnego katalogu i plików aplikacji. Aby to zrobić, musisz jednak powiązać swoją aplikację z projektem Firebase.

1. Skojarz swoją aplikację z projektem Firebase, uruchamiając następujące polecenie: sh firebase use --add

2. Po wyświetleniu monitu wybierz identyfikator projektu, a następnie nadaj projektowi Firebase alias.

Alias ​​jest przydatny, jeśli masz wiele środowisk (produkcyjne, przejściowe itp.). Jednak dla tego codelab użyjmy po prostu aliasu default .

1. Postępuj zgodnie z pozostałymi instrukcjami w linii poleceń.

5. Uruchom serwer lokalny

Już teraz możesz zacząć pracę nad naszą aplikacją! Uruchommy aplikację lokalnie!

1. Uruchom następujące polecenie interfejsu wiersza polecenia sh firebase serve --only hosting : sh firebase serve --only hosting

2. W linii poleceń powinna pojawić się następująca odpowiedź: hosting: Local server: http://localhost:5000

Używamy emulatora Hostingu Firebase do lokalnego udostępniania naszej aplikacji. Aplikacja internetowa powinna być teraz dostępna pod adresem http: // localhost: 5000.

1. Otwórz aplikację pod adresem http: // localhost: 5000.

Powinna pojawić się kopia FirebaseRTC, która została połączona z projektem Firebase.

Aplikacja automatycznie połączyła się z Twoim projektem Firebase.

6. Tworzenie nowego pokoju

W tej aplikacji każda sesja czatu wideo nazywana jest pokojem. Użytkownik może utworzyć nowy pokój, klikając przycisk w swojej aplikacji. Spowoduje to wygenerowanie identyfikatora, którego strona zdalna może użyć, aby dołączyć do tego samego pokoju. Identyfikator jest używany jako klucz w Cloud Firestore dla każdego pokoju.

Każdy pokój będzie zawierał RTCSessionDescriptions dotyczące zarówno oferty, jak i odpowiedzi, a także dwie oddzielne kolekcje z kandydatami ICE z każdej ze stron.

Twoim pierwszym zadaniem jest zaimplementowanie brakującego kodu do stworzenia nowego pokoju z początkową ofertą dzwoniącego. Otwórz public/app.js i znajdź komentarz // Add code for creating a room here i dodaj następujący kod:

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

Pierwsza linia tworzy RTCSessionDescription który będzie reprezentował ofertę wywołującego. Jest on następnie ustawiany jako opis lokalny i ostatecznie zapisywany w obiekcie nowego pokoju w Cloud Firestore.

Następnie będziemy nasłuchiwać zmian w bazie danych i wykrywać, kiedy została dodana odpowiedź od wywoływanego.

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

To będzie czekać, aż RTCSessionDescription zapisze RTCSessionDescription dla odpowiedzi i ustawi go jako zdalny opis w RTCPeerConnection wywołującego.

7. Dołączanie do pokoju

Następnym krokiem jest wdrożenie logiki dołączania do istniejącego pomieszczenia. Użytkownik robi to, klikając przycisk Dołącz do pokoju i wprowadzając identyfikator pokoju, do którego ma dołączyć. Twoim zadaniem jest tutaj zaimplementowanie utworzenia RTCSessionDescription dla odpowiedzi i odpowiednie zaktualizowanie pokoju w bazie danych.

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

W powyższym kodzie zaczynamy od wyodrębnienia oferty od dzwoniącego i stworzenia RTCSessionDescription , który ustawiamy jako zdalny opis. Następnie tworzymy odpowiedź, ustawiamy ją jako opis lokalny i aktualizujemy bazę danych. Aktualizacja bazy danych wywoła wywołanie zwrotne onSnapshot po stronie wywołującego, które z kolei ustawi zdalny opis na podstawie odpowiedzi od wywołującego. Na tym kończy się wymiana obiektów RTCSessionDescription między wywołującym a wywoływanym.

8. Zbierz kandydatów do ICE

Zanim dzwoniący i wywoływany będą mogli połączyć się ze sobą, muszą również wymienić kandydatów ICE, którzy mówią WebRTC, jak połączyć się ze zdalnym peerem. Twoim kolejnym zadaniem jest zaimplementowanie kodu, który nasłuchuje kandydatów ICE i dodaje ich do kolekcji w bazie danych. Znajdź funkcję collectIceCandidates i dodaj następujący kod:

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

Ta funkcja robi dwie rzeczy. Zbiera kandydatów ICE z interfejsu API WebRTC i dodaje ich do bazy danych oraz nasłuchuje dodanych kandydatów ICE od zdalnego RTCPeerConnection i dodaje ich do swojej instancji RTCPeerConnection . Podczas słuchania zmian w bazie danych ważne jest, aby odfiltrować wszystko, co nie jest nowym dodatkiem, ponieważ w przeciwnym razie dodawalibyśmy ten sam zestaw kandydatów ICE w kółko.

9. Wniosek

W tym kodowaniu dowiedziałeś się, jak zaimplementować sygnalizację dla WebRTC za pomocą Cloud Firestore, a także jak używać tego do tworzenia prostej aplikacji do czatu wideo.

Aby dowiedzieć się więcej, odwiedź następujące zasoby:

1. Kod źródłowy FirebaseRTC
2. Próbki WebRTC
3. Cloud Firestore