Google jest zaangażowana w pogłębianie równości rasowej dla czarnych społecznościach. Zobacz jak.
Ta strona została przetłumaczona przez Cloud Translation API.
Switch to English

Firebase + WebRTC Codelab

1. Wstęp

W tym codelab, dowiesz się, jak zbudować prostą aplikację wideo czat przy użyciu API WebRTC w przeglądarce i chmura FireStore do sygnalizacji. Aplikacja nazywa FirebaseRTC i działa jako prosty przykład, które uczą się podstaw budowania WebRTC włączone aplikacje.

Czego się dowiesz

  • Inicjowanie połączenia wideo w aplikacji internetowej przy użyciu WebRTC
  • Do zdalnej sygnalizacji partii przy użyciu Chmura FireStore

Co będziesz potrzebował

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

  • npm, która zazwyczaj pochodzi z node.js - Węzeł LTS jest zalecany

2. Tworzenie i konfiguracja projektu Firebase

Tworzenie projektu Firebase

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

Pamiętaj identyfikator projektu dla projektu Firebase.

  1. Kliknij Utwórz projekt.

Aplikacja, która masz zamiar zbudować wykorzystuje dwie usługi Firebase dostępne na stronie:

  • Chmura Firestore aby zapisać dane strukturalne na obłoku i uzyskać natychmiastowe powiadomienie, gdy dane są aktualizowane
  • Firebase Hosting przyjmującego i służyć swoje aktywa statycznych

W tym konkretnym codelab, już skonfigurowany Firebase Hosting w projekcie będziesz klonowania. Jednak dla chmurze FireStore, przeprowadzimy Cię przez proces konfiguracji i umożliwia usług z wykorzystaniem konsoli Firebase.

Włącz Chmura FireStore

Aplikacja korzysta Chmura FireStore zapisać wiadomości czatu i odbierać nowe wiadomości czatu.

Musisz włączyć Chmura FireStore:

  1. W menu konsoli Firebase to Develop sekcję, kliknij bazę danych.
  2. Kliknij przycisk Utwórz bazę danych w panelu Chmura FireStore.
  3. Wybierz opcję Uruchom w trybie testowym, a następnie kliknij polecenie Włącz po przeczytaniu zastrzeżenie dotyczące zasad bezpieczeństwa.

tryb testowy, zapewnia, że ​​można swobodnie pisać do bazy danych podczas rozwoju. Zrobimy Nasza baza bardziej zabezpieczyć później w tym codelab.

3. Pobierz przykładowy kod

Sklonować repozytorium GitHub z wiersza poleceń: 

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

Przykładowy kod powinien zostały sklonowane do katalogu Firebase-RTC-internetowej. Upewnij się, że linia poleceń jest prowadzony z tego katalogu odtąd: 

 cd firebase-rtc-web

Zaimportować aplikację rozrusznika

Otwórz pliki w Firebase-RTC-web w edytorze i zmieniać je zgodnie z poniższymi instrukcjami. Ten katalog zawiera kod początkowy dla codelab który składa się z nie-jeszcze funkcjonalny aplikacji WebRTC. Zrobimy to funkcjonalny całym tym codelab.

4. Instalacja Firebase interfejsu wiersza poleceń

Firebase Command Line Interface (CLI) pozwala służyć swoją aplikację lokalnie i wdrożyć aplikację do Firebase Hosting.

  1. Zainstalować CLI uruchamiając następującą komendę npm: sh npm -g install firebase-tools
  1. Sprawdź, czy CLI został zainstalowany prawidłowo, uruchamiając następującą komendę: sh firebase --version

Upewnij się, że wersja Firebase CLI jest v6.7.1 lub później.

  1. Upoważnić Firebase CLI, uruchamiając następującą komendę: sh firebase login

Skonfigurowaniu szablonu Web App ciągnąć konfigurację aplikacji dla Firebase Hosting z lokalnego katalogu i plików aplikacji. Ale żeby to zrobić, trzeba powiązać aplikację z projektem Firebase.

  1. Powiązać aplikację z projektem Firebase uruchamiając następującą komendę: sh firebase use --add

  2. Gdy pojawi się monit, wybierz swój projekt identyfikatora, a następnie dać Firebase projektowi aliasu.

Alias ​​jest przydatna, gdy masz wiele środowisk (produkcja, pomostowe, itp). Jednak do tej codelab, niech po prostu użyć alias default .

  1. Wykonaj pozostałe instrukcje w linii poleceń.

5. Uruchom serwer lokalny

Jesteś gotowy, aby zacząć pracę z naszej aplikacji! Załóżmy, uruchom aplikację lokalnie!

  1. Uruchom następujące polecenie Firebase CLI: sh firebase serve --only hosting

  2. Twój wiersz poleceń powinien wyświetlać następującą odpowiedź: hosting: Local server: http://localhost:5000

Używamy Hosting emulator Firebase służyć naszą aplikację lokalnie. Aplikacja internetowa powinna być dostępna od http: // localhost: 5000.

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

Powinieneś zobaczyć swoją kopię FirebaseRTC który został podłączony do projektu Firebase.

Aplikacja została automatycznie podłączony do projektu Firebase.

6. Tworzenie nowego pokoju

W tej aplikacji, każda sesja czatu wideo nazywa się pokój. Użytkownik może utworzyć nowy pokój, klikając przycisk w ich stosowaniu. Spowoduje to wygenerowanie identyfikatora że pilot partia może wykorzystać do przyłączenia się w tym samym pokoju. Identyfikator jest używany jako klucz w chmurze FireStore dla każdego pokoju.

Każdy pokój będzie zawierał RTCSessionDescriptions zarówno oferty i odpowiedzi, a także dwóch oddzielnych zbiorów z lodem kandydatów z każdej ze stron.

Twoim pierwszym zadaniem jest wdrożenie brakujący kod dla tworzenia nowego pokoju z pierwotnej oferty od rozmówcy. Otwarte 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óra będzie reprezentować ofertę od rozmówcy. To jest wtedy ustawiony jako lokalnego opisu i ostatecznie zapisane do nowego obiektu pokojowej w chmurze FireStore.

Następnie będziemy słuchać o zmianach w bazie danych i wykryć, kiedy odpowiedź od wywoływany został dodany. 

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

Będzie to czekać aż wywoływany pisze RTCSessionDescription na odpowiedź, a zestaw, który jako zdalnego opisu na rozmówcy RTCPeerConnection .

7. Połączenie pokój

Kolejnym krokiem jest wdrożenie logiki do łączenia istniejącego pomieszczenia. Użytkownik robi to klikając przycisk Dołącz do salonu i wprowadzając identyfikator za pokój dołączyć. Twoim zadaniem jest, aby wdrożyć utworzenie RTCSessionDescription na odpowiedź i zaktualizować pokój w bazie odpowiednio. 

 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, możemy zacząć od wydobycia ofertę od rozmówcy i tworzenie RTCSessionDescription że ustawiony jako zdalny opisem. Następnie tworzymy odpowiedź, ustawić ją jako lokalną opisu, i aktualizuje bazę danych. Aktualizacja bazy danych wywoła onSnapshot zwrotnego po stronie abonenta, który z kolei będzie ustawić pilota opisu opartego na odpowiedź z odbierającym. Na tym kończy się wymiana RTCSessionDescription obiektów między dzwoniącego i odbierającym.

8. Collect ICE kandydatów

Przed rozmówcy i wywoływany mogą łączyć się ze sobą, ale także potrzeba wymiany ICE kandydatów opowiadających WebRTC jak połączyć się ze zdalnym każdym. Następnym zadaniem jest wykonanie kodu, który nasłuchuje ICE kandydatów i dodaje je do kolekcji w bazie danych. Znajdź funkcję collectIceCandidates i dodać kod następujące: 

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

Funkcja ta wykonuje dwie rzeczy. Gromadzi ICE kandydatów z API WebRTC i dodaje je do bazy danych, i nasłuchuje dodano lód kandydatów z każdym zdalnym i dodaje je do swojej RTCPeerConnection instancji. Jest to ważne podczas słuchania bazie zmienia odfiltrować niczego, co nie jest nowością, ponieważ w przeciwnym razie bym dodał ten sam zestaw lodu kandydatów kółko.

9. Wnioski

W tym codelab dowiedziałeś się, jak zaimplementować za pomocą sygnalizacji dla WebRTC Chmura FireStore, a także jak korzystać z tego do tworzenia prostych aplikacji video chat.

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

  1. FirebaseRTC Kod nieśmiertelności
  2. próbki WebRTC
  3. Chmura Firestore