Ćwiczenia z programowania Firebase i WebRTC

1. Wprowadzenie

Z tego ćwiczenia w Codelabs dowiesz się, jak stworzyć prostą aplikację do obsługi czatu wideo, interfejsu API WebRTC w przeglądarce i Cloud Firestore na potrzeby sygnalizowania. o nazwie FirebaseRTC. Jest to prosty przykład, który uczy poznasz podstawy tworzenia aplikacji obsługujących WebRTC.

Czego się nauczysz

  • Inicjowanie rozmowy wideo w aplikacji internetowej przy użyciu WebRTC
  • Sygnalizowanie dla osoby zdalnej przy użyciu Cloud Firestore

Czego potrzebujesz

Zanim rozpoczniesz to ćwiczenia w programie, sprawdź, czy masz zainstalowane:

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

2. Tworzenie i konfigurowanie projektu Firebase

Tworzenie projektu Firebase

  1. W konsoli Firebase kliknij Dodaj. projekt Firebase, a potem nadaj mu nazwę FirebaseRTC.

Zapamiętaj identyfikator projektu Firebase.

  1. Kliknij Utwórz projekt.

Aplikacja, którą zamierzasz skompilować, wykorzystuje 2 dostępne usługi Firebase w internecie:

  • Cloud Firestore umożliwia zapisywanie uporządkowanych danych w chmurze i szybkie działanie powiadomienie o aktualizacji danych
  • Hosting Firebase do hostowania i wyświetlania zasobów statycznych

Na potrzeby tego ćwiczenia w Codelabs masz już skonfigurowany Hosting Firebase projekt, który chcesz klonować. W przypadku Cloud Firestore pokażemy Ci też, konfigurowania i włączania usług za pomocą konsoli Firebase.

Włącz Cloud Firestore

Aplikacja używa Cloud Firestore do zapisywania wiadomości czatu i odbierania nowych wiadomości wiadomości.

Musisz włączyć Cloud Firestore:

  1. W sekcji Programowanie w menu konsoli Firebase kliknij Baza danych.
  2. W panelu Cloud Firestore kliknij Utwórz bazę danych.
  3. Wybierz opcję Rozpocznij w trybie testowym, a potem przeczytaj instrukcje, a potem kliknij Włącz. wyłączenie odpowiedzialności dotyczące reguł zabezpieczeń.

Tryb testowy umożliwia swobodne zapisywanie w bazie danych podczas programowania. W dalszej części tego ćwiczenia z programowania zwiększymy bezpieczeństwo naszej bazy danych.

3. Pobieranie przykładowego kodu

Sklonuj repozytorium GitHub, używając wiersza poleceń:

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

Przykładowy kod powinien zostać skopiowany do katalogu FirebaseRTC. Zadbaj o to, aby wiersz poleceń uruchamiał się od teraz z tego katalogu:

cd FirebaseRTC

Zaimportuj aplikację startową

Otwórz pliki w usłudze FirebaseRTC w edytorze i zmień je odpowiednio do poniższe instrukcje. Ten katalog zawiera kod początkowy dla Ćwiczenie w Codelabs obejmujące niedziałającą jeszcze aplikację WebRTC. Damy radę w praktyce.

4. Instalowanie interfejsu wiersza poleceń Firebase

Interfejs wiersza poleceń Firebase (CLI) umożliwia udostępnianie aplikacji internetowej lokalnie i wdróż swoją aplikację internetową w Hostingu Firebase.

  1. Zainstaluj interfejs wiersza poleceń, uruchamiając to polecenie npm: sh npm -g install firebase-tools
.
  1. Sprawdź, czy interfejs wiersza poleceń został prawidłowo zainstalowany, uruchamiając to polecenie polecenie: sh firebase --version

Upewnij się, że interfejs wiersza poleceń Firebase jest w wersji 6.7.1 lub nowszej.

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

Masz skonfigurowany szablon aplikacji internetowej, który pobiera konfigurację aplikacji do Firebase Hosting z lokalnego katalogu i plików Twojej aplikacji. Aby to zrobić, musisz: powiąż aplikację z projektem Firebase.

  1. Powiąż aplikację z projektem Firebase, uruchamiając to polecenie polecenie: sh firebase use --add

  2. Gdy pojawi się prośba, wybierz identyfikator projektu, a następnie dodaj do projektu Firebase alias.

Alias jest przydatny, jeśli masz wiele środowisk (produkcyjnych, przejściowych itp.). Jednak w tym ćwiczeniu z programowania użyjemy aliasu default.

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

5. Uruchamianie serwera lokalnego

Możesz już zacząć pracę nad naszą aplikacją! Uruchommy aplikację lokalnie

  1. Uruchom to polecenie interfejsu wiersza poleceń Firebase: sh firebase serve --only hosting

  2. W wierszu poleceń powinna pojawić się odpowiedź: hosting: Local server: http://localhost:5000

Do udostępniania naszej aplikacji lokalnie używamy emulatora Hostingu Firebase. Aplikacja internetowa powinien być teraz dostępny z adresu http://localhost:5000.

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

Zobaczysz kopię usługi FirebaseRTC, która została połączona z Twoim projekt Firebase.

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

6. Tworzenie nowego pomieszczenia

W tej aplikacji każda sesja czatu wideo jest nazywana pokojem. Użytkownik może tworzyć nowy pokój, klikając przycisk w aplikacji. Spowoduje to wygenerowanie identyfikatora za pomocą którego osoba zdalna może dołączyć do tego samego pokoju. Identyfikator jest używany jako klucz dla każdej sali.

Każdy pokój będzie zawierać RTCSessionDescriptions zarówno dla oferty, jak i oraz 2 oddzielne zbiory z kandydatami z ICE z każdej partii.

Twoim pierwszym zadaniem jest implementacja brakującego kodu do utworzenia nowego pomieszczenia pierwszą ofertę od rozmówcy. Otwórz public/app.js i znajdź komentarz // Add code for creating a room here, a następnie dodaj ten 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!`

Pierwszy wiersz tworzy RTCSessionDescription reprezentujący ofertę. od rozmówcy. Następnie jest ustawiany jako opis lokalny i na koniec z nowym obiektem pomieszczenia w Cloud Firestore.

Następnie będziemy nasłuchiwać zmian w bazie danych i wykryć, kiedy odpowiedź osoba dzwoniąca została dodana.

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

Zaczeka, aż osoba wywołująca napisze pole RTCSessionDescription dla i ustaw to jako opis zdalny w rozmowie RTCPeerConnection

7. Dołączanie do pokoju

Następnym krokiem jest wdrożenie logiki dołączania do istniejącej sali. Użytkownik Aby to zrobić, kliknij przycisk Dołącz do pokoju i wpisz identyfikator pokoju. aby dołączyć. Twoim zadaniem jest wdrożenie tworzenia RTCSessionDescription za odpowiedź i zaktualizuj salę w bazie danych odpowiednio się zmienia.

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 z osoby wywołującej i utworzenia RTCSessionDescription ustawiony jako opis pilota. Następnie tworzymy ustaw odpowiedź jako opis lokalny i zaktualizuj bazę danych. Aktualizacja bazy danych aktywuje wywołanie zwrotne onSnapshot po stronie wywołującego, które ustawi opis zdalny na podstawie odpowiedzi rozmówcy. To koniec wymiany obiektów RTCSessionDescription między dzwoniącego i dzwoniącego.

8. Zbieranie kandydatów ICE

Zanim rozmówca i odbiorca będą mogli połączyć się ze sobą, muszą też wymianę kandydatów ICE, które informują WebRTC jak nawiązać połączenie ze zdalnym peerem. Kolejne zadanie to wdrożenie kodu, który nasłuchuje kandydatów ICE i dodaje do kolekcji w bazie danych. Znajdź funkcję collectIceCandidates i dodaj ten 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());
                peerConnection.addIceCandidate(candidate);
            }
        });
    })
}

Ta funkcja ma 2 czynności. Zbiera kandydaci ICE z interfejsu WebRTC API oraz doda je do bazy danych i nasłuchuje dodanych kandydatów ICE ze zdalnego i dodaje go do swojej instancji RTCPeerConnection. Ważne jest, aby nasłuchiwanie zmian w bazie danych w celu odfiltrowania wszystkiego, co nie jest nowym dodatkiem, bo w przeciwnym razie dodalibyśmy stale ten sam zestaw kandydatów ICE ponownie.

9. Podsumowanie

Dzięki tym ćwiczeniom w Codelabs omówiliśmy, jak wdrożyć sygnalizowanie dla WebRTC za pomocą Cloud Firestore oraz opis tego, jak używać ich do tworzenia prostego czatu wideo. aplikacji.

Więcej informacji znajdziesz w tych materiałach:

  1. Kod źródłowy FirebaseRTC
  2. Przykłady WebRTC
  3. Cloud Firestore