Google is committed to advancing racial equity for Black communities. See how.
Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

Firebase + WebRTC Codelab

1. Introduzione

In questo codelab imparerai come creare una semplice applicazione di chat video utilizzando l'API WebRTC nel tuo browser e Cloud Firestore per la segnalazione. L'applicazione si chiama FirebaseRTC e funziona come un semplice esempio che ti insegnerà le basi per la creazione di applicazioni abilitate per WebRTC.

Cosa imparerai

  • Avvio di una videochiamata in un'applicazione Web utilizzando WebRTC
  • Segnalazione alla parte remota utilizzando Cloud Firestore

Di cosa avrai bisogno

Prima di avviare questo codelab, assicurati di aver installato:

  • npm, che in genere viene fornito con Node.js: si consiglia di utilizzare Node LTS

2. Crea e configura un progetto Firebase

Crea un progetto Firebase

  1. Nella console Firebase , fai clic su Aggiungi progetto, quindi denomina il progetto Firebase FirebaseRTC.

Ricorda l'ID progetto per il tuo progetto Firebase.

  1. Fare clic su Crea progetto.

L'applicazione che stai per creare utilizza due servizi Firebase disponibili sul Web:

  • Cloud Firestore per salvare i dati strutturati sul Cloud e ricevere una notifica immediata quando i dati vengono aggiornati
  • Firebase Hosting per ospitare e servire le tue risorse statiche

Per questo specifico codelab, hai già configurato Firebase Hosting nel progetto che clonerai. Tuttavia, per Cloud Firestore, ti guideremo attraverso la configurazione e l'abilitazione dei servizi utilizzando la console Firebase.

Abilita Cloud Firestore

L'app utilizza Cloud Firestore per salvare i messaggi di chat e ricevere nuovi messaggi di chat.

Dovrai abilitare Cloud Firestore:

  1. Nella sezione Sviluppo del menu della console Firebase, fai clic su Database.
  2. Fai clic su Crea database nel riquadro Cloud Firestore.
  3. Seleziona l'opzione Avvia in modalità test , quindi fai clic su Abilita dopo aver letto la dichiarazione di non responsabilità sulle regole di sicurezza.

La modalità di test garantisce la possibilità di scrivere liberamente nel database durante lo sviluppo. Renderemo il nostro database più sicuro più avanti in questo codelab.

3. Ottieni il codice di esempio

Clona il repository GitHub dalla riga di comando:

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

Il codice di esempio dovrebbe essere stato clonato nella directory FirebaseRTC . Assicurati che la tua riga di comando sia eseguita da questa directory d'ora in poi:

cd FirebaseRTC

Importa l'app iniziale

Apri i file in FirebaseRTC nel tuo editor e modificali secondo le istruzioni seguenti. Questa directory contiene il codice di partenza per il codelab che consiste in un'app WebRTC non ancora funzionante. Lo renderemo funzionale in tutto questo codelab.

4. Installa l'interfaccia della riga di comando di Firebase

L'interfaccia a riga di comando (CLI) di Firebase ti consente di servire la tua app web localmente e distribuire la tua app web su Firebase Hosting.

  1. Installa la CLI eseguendo il seguente comando npm: sh npm -g install firebase-tools
  1. Verificare che la CLI sia stata installata correttamente eseguendo il seguente comando: sh firebase --version

Assicurati che la versione della CLI di Firebase sia v6.7.1 o successiva.

  1. Autorizza la CLI di Firebase eseguendo il seguente comando: sh firebase login

Hai impostato il modello di app web per estrarre la configurazione della tua app per Firebase Hosting dalla directory e dai file locali della tua app. Ma per fare ciò, devi associare la tua app al tuo progetto Firebase.

  1. Associa la tua app al tuo progetto Firebase eseguendo il seguente comando: sh firebase use --add

  2. Quando richiesto, seleziona il tuo ID progetto, quindi assegna un alias al tuo progetto Firebase.

Un alias è utile se hai più ambienti (produzione, gestione temporanea, ecc.). Tuttavia, per questo codelab, usiamo solo l'alias di default .

  1. Segui le restanti istruzioni nella riga di comando.

5. Eseguire il server locale

Sei pronto per iniziare a lavorare sulla nostra app! Eseguiamo l'app in locale!

  1. Esegui il seguente comando della CLI di Firebase: sh firebase serve --only hosting

  2. La riga di comando dovrebbe visualizzare la seguente risposta: hosting: Local server: http://localhost:5000

Stiamo utilizzando l'emulatore Firebase Hosting per servire la nostra app in locale. L'app Web dovrebbe ora essere disponibile da http: // localhost: 5000.

  1. Apri la tua app su http: // localhost: 5000.

Dovresti vedere la tua copia di FirebaseRTC che è stata collegata al tuo progetto Firebase.

L'app si è collegata automaticamente al tuo progetto Firebase.

6. Creazione di una nuova stanza

In questa applicazione, ogni sessione di chat video è chiamata stanza. Un utente può creare una nuova stanza facendo clic su un pulsante nella sua applicazione. Questo genererà un ID che la parte remota può utilizzare per entrare nella stessa stanza. L'ID viene utilizzato come chiave in Cloud Firestore per ogni stanza.

Ogni stanza conterrà le RTCSessionDescriptions sia per l'offerta che per la risposta, oltre a due raccolte separate con candidati ICE di ciascuna parte.

Il tuo primo compito è implementare il codice mancante per creare una nuova stanza con l'offerta iniziale del chiamante. Apri public/app.js e trova il commento // Add code for creating a room here e aggiungi il seguente codice:

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

La prima riga crea una RTCSessionDescription che rappresenterà l'offerta del chiamante. Questa viene quindi impostata come descrizione locale e infine scritta nel nuovo oggetto stanza in Cloud Firestore.

Successivamente, ascolteremo le modifiche al database e rileveremo quando è stata aggiunta una risposta dal chiamato.

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

Ciò attenderà fino a quando il chiamato non scriverà RTCSessionDescription per la risposta e lo imposterà come descrizione remota sul chiamante RTCPeerConnection .

7. Entrare in una stanza

Il passo successivo è implementare la logica per entrare a far parte di una stanza esistente. L'utente lo fa facendo clic sul pulsante Entra nella stanza e inserendo l'ID della stanza a cui partecipare. Il tuo compito qui è implementare la creazione di RTCSessionDescription per la risposta e aggiornare di conseguenza la stanza nel database.

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

Nel codice sopra, iniziamo estraendo l'offerta dal chiamante e creando una RTCSessionDescription che abbiamo impostato come descrizione remota. Successivamente, creiamo la risposta, la impostiamo come descrizione locale e aggiorniamo il database. L'aggiornamento del database attiverà il callback onSnapshot dal lato del chiamante, che a sua volta imposterà la descrizione remota in base alla risposta del chiamato. Ciò completa lo scambio degli oggetti RTCSessionDescription tra il chiamante e il chiamato.

8. Raccogli i candidati ICE

Prima che il chiamante e il chiamato possano connettersi tra loro, devono anche scambiare candidati ICE che indicano a WebRTC come connettersi al peer remoto. Il tuo prossimo compito è implementare il codice che ascolta i candidati ICE e li aggiunge a una raccolta nel database. Trova la funzione collectIceCandidates e aggiungi il codice seguente:

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

Questa funzione fa due cose. Raccoglie i candidati ICE dall'API WebRTC e li aggiunge al database, ascolta i candidati ICE aggiunti dal peer remoto e li aggiunge alla sua istanza RTCPeerConnection . È importante quando si ascoltano le modifiche al database filtrare tutto ciò che non è una nuova aggiunta, poiché altrimenti avremmo aggiunto lo stesso insieme di candidati ICE più e più volte.

9. Conclusione

In questo codelab hai imparato come implementare la segnalazione per WebRTC utilizzando Cloud Firestore, nonché come utilizzarla per creare una semplice applicazione di chat video.

Per saperne di più, visita le seguenti risorse:

  1. Codice sorgente FirebaseRTC
  2. Esempi WebRTC
  3. Cloud Firestore