Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.
Halaman ini diterjemahkan oleh Cloud Translation API.
Switch to English

Firebase + WebRTC Codelab

1. Perkenalan

Dalam codelab ini, Anda akan mempelajari cara membuat aplikasi obrolan video sederhana menggunakan API WebRTC di browser Anda dan Cloud Firestore untuk pensinyalan. Aplikasi tersebut disebut FirebaseRTC dan berfungsi sebagai contoh sederhana yang akan mengajari Anda dasar-dasar pembuatan aplikasi yang mendukung WebRTC.

Apa yang akan Anda pelajari

  • Memulai panggilan video di aplikasi web menggunakan WebRTC
  • Memberi sinyal ke pihak jarak jauh menggunakan Cloud Firestore

Yang Anda butuhkan

Sebelum memulai codelab ini, pastikan Anda telah menginstal:

  • npm yang biasanya dilengkapi dengan Node.js - Disarankan Node LTS

2. Buat dan siapkan proyek Firebase

Buat proyek Firebase

  1. Di konsol Firebase , klik Tambahkan proyek, lalu beri nama proyek Firebase tersebut FirebaseRTC.

Ingat ID Proyek untuk proyek Firebase Anda.

  1. Klik Buat proyek.

Aplikasi yang akan Anda buat menggunakan dua layanan Firebase yang tersedia di web:

  • Cloud Firestore untuk menyimpan data terstruktur di Cloud dan mendapatkan notifikasi instan saat data diperbarui
  • Firebase Hosting untuk menghosting dan melayani aset statis Anda

Untuk codelab khusus ini, Anda telah mengonfigurasi Firebase Hosting di proyek yang akan Anda kloning. Namun, untuk Cloud Firestore, kami akan memandu Anda melalui konfigurasi dan mengaktifkan layanan menggunakan Firebase console.

Aktifkan Cloud Firestore

Aplikasi ini menggunakan Cloud Firestore untuk menyimpan pesan obrolan dan menerima pesan obrolan baru.

Anda harus mengaktifkan Cloud Firestore:

  1. Di bagian Kembangkan menu Firebase console, klik Database.
  2. Klik Buat database di panel Cloud Firestore.
  3. Pilih opsi Mulai dalam mode pengujian , lalu klik Aktifkan setelah membaca pelepasan tanggung jawab hukum tentang aturan keamanan.

Mode uji memastikan bahwa Anda dapat dengan bebas menulis ke database selama pengembangan. Kami akan membuat database kami lebih aman nanti di codelab ini.

3. Dapatkan kode contoh

Clone repositori GitHub dari command line:

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

Kode sampel seharusnya sudah digandakan ke direktori FirebaseRTC . Pastikan baris perintah Anda dijalankan dari direktori ini mulai sekarang:

cd FirebaseRTC

Impor aplikasi starter

Buka file di FirebaseRTC di editor Anda dan ubah sesuai dengan petunjuk di bawah ini. Direktori ini berisi kode awal untuk codelab yang terdiri dari aplikasi WebRTC yang belum berfungsi. Kami akan membuatnya berfungsi di seluruh codelab ini.

4. Pasang Antarmuka Baris Perintah Firebase

Firebase Command Line Interface (CLI) memungkinkan Anda untuk menyajikan aplikasi web Anda secara lokal dan menerapkan aplikasi web Anda ke Firebase Hosting.

  1. Instal CLI dengan menjalankan perintah npm berikut: sh npm -g install firebase-tools
  1. Pastikan CLI telah diinstal dengan benar dengan menjalankan perintah berikut: sh firebase --version

Pastikan versi Firebase CLI adalah v6.7.1 atau yang lebih baru.

  1. Otorisasi Firebase CLI dengan menjalankan perintah berikut: sh firebase login

Anda telah menyiapkan template aplikasi web untuk menarik konfigurasi aplikasi Anda untuk Firebase Hosting dari direktori lokal dan file aplikasi Anda. Namun untuk melakukan ini, Anda perlu mengaitkan aplikasi Anda dengan proyek Firebase.

  1. Kaitkan aplikasi Anda dengan proyek Firebase dengan menjalankan perintah berikut: sh firebase use --add

  2. Saat diminta, pilih Project ID Anda, lalu berikan alias untuk project Firebase Anda.

Alias ​​berguna jika Anda memiliki banyak lingkungan (produksi, staging, dll). Namun, untuk codelab ini, mari gunakan alias default .

  1. Ikuti instruksi yang tersisa di baris perintah Anda.

5. Jalankan server lokal

Anda siap untuk benar-benar mulai mengerjakan aplikasi kami! Ayo jalankan aplikasi secara lokal!

  1. Jalankan perintah Firebase CLI berikut: sh firebase serve --only hosting

  2. Baris perintah Anda akan menampilkan respons berikut: hosting: Local server: http://localhost:5000

Kami menggunakan emulator Firebase Hosting untuk melayani aplikasi kami secara lokal. Aplikasi web sekarang harus tersedia dari http: // localhost: 5000.

  1. Buka aplikasi Anda di http: // localhost: 5000.

Anda akan melihat salinan FirebaseRTC yang telah terhubung ke proyek Firebase Anda.

Aplikasi tersebut secara otomatis terhubung ke proyek Firebase Anda.

6. Membuat ruangan baru

Dalam aplikasi ini, setiap sesi obrolan video disebut sebagai sebuah ruangan. Seorang pengguna dapat membuat ruang baru dengan mengklik tombol di aplikasi mereka. Ini akan menghasilkan ID yang dapat digunakan pihak jarak jauh untuk bergabung ke ruangan yang sama. ID digunakan sebagai kunci di Cloud Firestore untuk setiap ruangan.

Setiap ruangan akan berisi RTCSessionDescriptions untuk tawaran dan jawabannya, serta dua koleksi terpisah dengan kandidat ICE dari masing-masing partai.

Tugas pertama Anda adalah menerapkan kode yang hilang untuk membuat ruang baru dengan penawaran awal dari pemanggil. Buka public/app.js dan temukan komentar // Add code for creating a room here dan tambahkan kode berikut:

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

Baris pertama membuat RTCSessionDescription yang akan mewakili penawaran dari pemanggil. Ini kemudian disetel sebagai deskripsi lokal, dan terakhir ditulis ke objek ruangan baru di Cloud Firestore.

Selanjutnya, kami akan mendengarkan perubahan pada database dan mendeteksi ketika jawaban dari callee telah ditambahkan.

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

Ini akan menunggu sampai callee menulis RTCSessionDescription untuk jawabannya, dan mengaturnya sebagai deskripsi jarak jauh pada pemanggil RTCPeerConnection .

7. Bergabung dengan sebuah ruangan

Langkah selanjutnya adalah mengimplementasikan logika untuk menggabungkan ruangan yang ada. Pengguna melakukan ini dengan mengklik tombol Bergabung dengan ruang dan memasukkan ID ruang untuk bergabung. Tugas Anda di sini adalah mengimplementasikan pembuatan RTCSessionDescription untuk jawaban dan memperbarui ruangan dalam database yang sesuai.

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

Pada kode di atas, kita mulai dengan mengekstrak penawaran dari pemanggil dan membuat RTCSessionDescription yang kita setel sebagai deskripsi jarak jauh. Selanjutnya, kami membuat jawabannya, menetapkannya sebagai deskripsi lokal, dan memperbarui database. Pembaruan database akan memicu callback onSnapshot di sisi pemanggil, yang pada gilirannya akan menyetel deskripsi jarak jauh berdasarkan jawaban dari callee. Ini menyelesaikan pertukaran objek RTCSessionDescription antara pemanggil dan callee.

8. Kumpulkan kandidat ICE

Sebelum penelepon dan penerima dapat terhubung satu sama lain, mereka juga perlu bertukar kandidat ICE yang memberi tahu WebRTC cara menyambung ke peer jarak jauh. Tugas Anda berikutnya adalah menerapkan kode yang mendengarkan kandidat ICE dan menambahkannya ke koleksi di database. Temukan fungsi collectIceCandidates dan tambahkan kode berikut:

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

Fungsi ini melakukan dua hal. Ia mengumpulkan kandidat ICE dari API WebRTC dan menambahkannya ke database, dan mendengarkan kandidat ICE yang ditambahkan dari peer jarak jauh dan menambahkannya ke instance RTCPeerConnection -nya. Penting saat mendengarkan perubahan basis data untuk menyaring apa pun yang bukan tambahan baru, karena jika tidak, kami akan menambahkan kumpulan kandidat ICE yang sama berulang kali.

9. Kesimpulan

Dalam codelab ini Anda telah mempelajari cara mengimplementasikan pensinyalan untuk WebRTC menggunakan Cloud Firestore, serta cara menggunakannya untuk membuat aplikasi obrolan video sederhana.

Untuk mempelajari lebih lanjut, kunjungi sumber daya berikut:

  1. Kode Sumber FirebaseRTC
  2. Sampel WebRTC
  3. Cloud Firestore