Google berkomitmen untuk memajukan ekuitas ras bagi masyarakat Hitam. Lihat bagaimana.
Halaman ini diterjemahkan oleh Cloud Translation API.
Switch to English

Firebase + WebRTC Codelab

1. Perkenalan

Dalam codelab ini, Anda akan belajar bagaimana membangun sebuah video chat aplikasi sederhana menggunakan API WebRTC di browser Anda dan Cloud Firestore untuk signaling. Aplikasi ini disebut FirebaseRTC dan bekerja sebagai contoh sederhana yang akan mengajarkan Anda dasar-dasar membangun WebRTC diaktifkan aplikasi.

Apa yang Anda akan belajar

  • Memulai video call dalam aplikasi web menggunakan WebRTC
  • Sinyal ke pihak remote menggunakan Cloud Firestore

Apa yang akan anda butuhkan

Sebelum memulai codelab ini, pastikan bahwa Anda telah menginstal:

  • NPM yang biasanya datang dengan Node.js - Node LTS dianjurkan

2. Membuat dan mengatur proyek Firebase

Buat proyek Firebase

  1. Dalam Firebase konsol , klik proyek Tambah, kemudian nama Firebase proyek FirebaseRTC.

Ingat ID Proyek untuk proyek Firebase Anda.

  1. Klik Buat proyek.

Aplikasi yang Anda akan membangun menggunakan dua layanan Firebase tersedia di Web:

  • Cloud Firestore untuk menyimpan data terstruktur pada awan dan mendapatkan notifikasi instan ketika data diperbarui
  • Firebase Hosting untuk tuan rumah dan melayani aset statis Anda

Untuk codelab khusus ini, Anda sudah dikonfigurasi Firebase Hosting dalam proyek Anda akan kloning. Namun, untuk Cloud Firestore, kami akan memandu Anda melalui konfigurasi dan memungkinkan layanan menggunakan konsol Firebase.

Aktifkan Cloud Firestore

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

Anda harus mengaktifkan Cloud Firestore:

  1. Dalam menu konsol Firebase Ini Mengembangkan, klik Database.
  2. Klik Membuat database di panel Cloud Firestore.
  3. Pilih Mulai di pilihan mode tes, kemudian klik Aktifkan setelah membaca disclaimer tentang aturan keamanan.

test mode 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

Mengkloning repositori GitHub dari baris perintah:

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

Kode contoh harus telah diklon ke dalam direktori firebase-rtc-web. Pastikan baris perintah Anda dijalankan dari direktori ini dari sekarang:

 cd firebase-rtc-web
 

Impor aplikasi Starter

Buka file dalam firebase-rtc-web editor Anda dan mengubahnya sesuai dengan petunjuk di bawah ini. Direktori ini berisi kode awal untuk codelab yang terdiri dari aplikasi yang belum fungsional WebRTC. Kami akan membuatnya fungsional seluruh codelab ini.

4. Pasang Firebase Command Line Interface

The Firebase Command Line Interface (CLI) memungkinkan Anda untuk melayani aplikasi web Anda secara lokal dan menyebarkan aplikasi web Anda untuk Firebase Hosting.

  1. Instal CLI dengan menjalankan perintah NPM berikut: sh npm -g install firebase-tools
  1. Memverifikasi bahwa CLI telah terpasang dengan benar dengan menjalankan perintah berikut: sh firebase --version

Pastikan versi Firebase CLI adalah v6.7.1 atau lambat.

  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 aplikasi Anda dan file. Tapi untuk melakukan ini, Anda perlu mengaitkan aplikasi Anda dengan proyek Firebase Anda.

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

  2. Bila diminta, pilih ID Proyek Anda, kemudian memberikan proyek Firebase Anda alias.

Alias ​​berguna jika Anda memiliki beberapa lingkungan (produksi, pementasan, dll). Namun, untuk codelab ini, mari kita menggunakan alias default .

  1. Ikuti petunjuk yang tersisa di baris perintah Anda.

5. Jalankan server lokal

Anda siap untuk benar-benar mulai bekerja pada aplikasi kita! Mari kita menjalankan aplikasi secara lokal!

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

  2. Baris perintah Anda harus menampilkan respon berikut: hosting: Local server: http://localhost:5000

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

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

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

Aplikasi ini telah secara otomatis terhubung ke proyek Firebase Anda.

6. Membuat ruang baru

Dalam aplikasi ini, setiap sesi video chat disebut sebuah ruangan. Seorang pengguna dapat membuat sebuah ruangan baru dengan mengklik tombol di aplikasi mereka. Ini akan menghasilkan ID bahwa pihak remote dapat digunakan untuk bergabung dengan ruangan yang sama. ID yang digunakan sebagai kunci dalam Cloud Firestore untuk setiap kamar.

Setiap kamar akan berisi RTCSessionDescriptions untuk kedua penawaran dan jawabannya, serta dua koleksi terpisah dengan calon ICE dari masing-masing pihak.

Tugas pertama Anda adalah untuk menerapkan kode hilang untuk menciptakan ruang baru dengan tawaran awal dari penelepon. Terbuka public/app.js dan menemukan 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 menciptakan RTCSessionDescription yang akan mewakili tawaran dari penelepon. Ini kemudian ditetapkan sebagai deskripsi lokal, dan akhirnya ditulis ke objek ruang baru di Cloud Firestore.

Berikutnya, kita akan mendengarkan perubahan ke 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 set yang sebagai deskripsi remote pada pemanggil RTCPeerConnection .

7. Bergabung ruangan

Langkah berikutnya adalah untuk menerapkan logika untuk bergabung ruang yang ada. Pengguna melakukan ini dengan mengklik tombol ruangan Bergabung dan memasuki ID untuk ruangan untuk bergabung. Tugas Anda di sini adalah untuk melaksanakan penciptaan RTCSessionDescription untuk jawabannya dan memperbarui ruang dalam database 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 mengekstraksi tawaran dari pemanggil dan menciptakan RTCSessionDescription yang kita tetapkan sebagai deskripsi terpencil. Berikutnya, kita membuat jawabannya, mengaturnya sebagai deskripsi lokal, dan memperbarui database. Update database akan memicu onSnapshot callback di sisi pemanggil, yang pada gilirannya akan mengatur deskripsi remote berdasarkan jawaban dari callee. Ini melengkapi tukar RTCSessionDescription objek antara pemanggil dan callee.

8. calon ICE Collect

Sebelum pemanggil dan callee dapat terhubung satu sama lain, mereka juga perlu calon bursa ICE yang memberitahu WebRTC cara untuk terhubung ke remote peer. Tugas Anda selanjutnya adalah untuk menerapkan kode yang mendengarkan calon ICE dan menambahkannya ke koleksi dalam database. Cari fungsi collectIceCandidates dan tambahkan kode berikut:

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

Fungsi ini melakukan dua hal. Ini mengumpulkan calon ICE dari API WebRTC dan menambahkannya ke database, dan mendengarkan untuk calon ICE ditambahkan oleh rekan jauh dan menambahkannya ke nya RTCPeerConnection misalnya. Hal ini penting ketika mendengarkan perubahan database untuk menyaring segala sesuatu yang tidak tambahan baru, karena kita jika tidak akan menambahkan set yang sama calon ICE berulang-ulang.

9. Kesimpulan

Dalam codelab ini Anda belajar bagaimana menerapkan sinyal untuk WebRTC menggunakan Cloud Firestore, serta bagaimana menggunakannya untuk menciptakan aplikasi video chat sederhana.

Untuk mempelajari lebih lanjut, kunjungi sumber daya berikut:

  1. Source Code FirebaseRTC
  2. sampel WebRTC
  3. Cloud Firestore