Google Siyah toplulukları için ırksal eşitlik ilerleyen kararlıdır. Nasıl olduğunu gör.
Bu sayfa, Cloud Translation API ile çevrilmiştir.
Switch to English

Firebase + WebRTC Codelab

1. Giriş

Bu codelab olarak, sinyalizasyon için tarayıcınızın ve Bulut Firestore WebRTC API kullanarak basit bir video sohbet uygulaması nasıl oluşturulacağını öğreneceksiniz. Uygulama FirebaseRTC denilen ve size WebRTC uygulamalarını etkin bina temellerini öğretecek basit bir örnek olarak çalışıyor.

Neler öğreneceksiniz?

  • WebRTC'yi kullanarak bir web uygulamasında bir video araması başlatılıyor
  • Bulut FireStore kullanarak uzak tarafa sinyal

Ne gerekiyor?

Bu codelab başlamadan önce, yüklediğiniz emin olun:

  • tipik node.js ile gelir npm - Düğüm LTS önerilir

Oluşturma ve Firebase projesini kurmak 2.

Bir Firebase projesi oluşturma

  1. Firebase konsolunda , ardından Ekle projeyi tıklayın Firebase projesi FirebaseRTC isim.

senin Firebase proje için Proje kimliğini unutmayın.

  1. Proje oluşturma tıklayın.

Eğer yapı gidiyoruz uygulama internet üzerinde iki Firebase hizmetlerini mevcut kullanır:

  • Bulut Firestore Cloud üzerinde yapılandırılmış verileri kaydetmek ve veri güncellendiğinde anında bildirim almak için
  • Firebase statik varlıklar ana bilgisayara Barındırma ve hizmet

Bu özel codelab için, zaten klonlama olacak projede Barındırma Firebase yapılandırılmış ettik. Ancak Bulut Firestore için, biz yapılandırma size yardımcı olacağız ve Firebase konsolunu kullanarak hizmet sağlayan.

Bulut FireStore etkinleştirme

Uygulamanın sohbet mesajlarını kaydetmek ve yeni sohbet mesajlarını almak Bulut FireStore kullanır.

Sen Bulut FireStore etkinleştirmeniz gerekir:

  1. Firebase Konsol menüsünde Veritabanı tıklayın bölümünü geliştirin bu.
  2. Bulut Firestore bölmesinde veritabanı oluşturun tıklayın.
  3. Test modu seçeneğinde Başlat seçin, ardından güvenlik kuralları hakkında yasal uyarıyı okuduktan sonra Etkinleştir'i tıklayın.

Test modu olmasını sağlar özgürce geliştirme sırasında veritabanına yazabilir söyledi. Bizim veritabanı daha bu codelab içinde daha sonra güvenli yapacağız.

örnek kod alın 3.

Komut satırından GitHub depo Clone:

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

Örnek kod Firebase-RTC-Web dizine klonlanmış olması gerekirdi. Emin komut satırı artık bu dizinden çalıştırılır olun:

 cd firebase-rtc-web
 

Marş uygulamasını alın

Düzenleyicinizde Firebase-RTC-web dosyaları açın ve aşağıdaki talimatlara göre değiştirin. Bu dizin bir zaman henüz fonksiyonel WebRTC uygulama oluşur codelab için başlangıç ​​kodunu içerir. Bu codelab boyunca işlevsel yapacağız.

Firebase Komut Satırı Arabirimi yükleyin 4.

Firebase Komut Satırı Arayüzü (CLI) yerel olarak web uygulaması hizmet etmek ve Firebase Hosting için web uygulaması dağıtmak için izin verir.

  1. Aşağıdaki npm komutu çalıştırarak CLI yükleyin: sh npm -g install firebase-tools
  1. : Aşağıdaki komutu çalıştırarak CLI doğru kurulduğunu doğrulayın sh firebase --version

Emin olun Firebase CLI sürümü sonradan v6.7.1 veya olduğunu.

  1. Aşağıdaki komutu çalıştırarak Firebase CLI yetkilendirme: sh firebase login

Sen Firebase uygulamanızın yerel dizin ve dosyaları Barındırma ilişkin uygulama yapılandırmasını çekmeye web uygulaması şablonu kurdum. Ancak bunu yapmak için, size Firebase proje ile uygulamanızı ilişkilendirmek gerekir.

  1. Aşağıdaki komutu çalıştırarak Firebase proje ile uygulamanızı ilişkilendirme: sh firebase use --add

  2. İstendiğinde, ardından Firebase projeyi bir takma ad vermek, Project kimliğini seçin.

Birden ortamları (üretim, evreleme, vs) varsa bir takma ad yararlıdır. Ancak, bu codelab için, 'adil diğer adını kullanmasına izin default .

  1. Komut satırında kalan yönergeleri izleyin.

Yerel sunucuyu çalıştırın 5.

Aslında bizim app üzerinde çalışmaya başlamak için hazırsınız! Let yerel olarak uygulamayı çalıştırmak!

  1. Aşağıdaki Firebase CLI komutu çalıştırın: sh firebase serve --only hosting

  2. Sizin komut satırı şu yanıtı göstermesi gerekir: hosting: Local server: http://localhost:5000

Biz yerel olarak bizim app hizmet etmek Firebase Barındırma emülatör kullanıyoruz. web uygulaması şimdi http bulunmalıdır: // localhost: 5000.

  1. http uygulamanızı açın: // localhost: 5000.

Eğer Firebase projeye bağlı olmuştur FirebaseRTC kopyanızı görmelisiniz.

Uygulamanın otomatik Firebase projeye bağlandı.

6. yeni bir oda oluşturma

Bu uygulamada, her görüntülü sohbet oturumu oda denir. Bir kullanıcı, uygulamasında bir düğmeye tıklayarak yeni bir oda oluşturabilirsiniz. Bu uzaktan parti aynı odada katılmak için kullanabileceği bir kimlik oluşturur. İD her oda için bulut Firestore anahtar olarak kullanılır.

Her oda içerecek RTCSessionDescriptions teklif ve cevap yanı sıra her partiden BUZ adaylar ile iki ayrı koleksiyonları her ikisi için.

İlk göreviniz çağıranınkinden ilk teklifi ile yeni bir oda oluşturmak için eksik kod uygulamaktır. Açık public/app.js ve yorum bulmak // Add code for creating a room here ve aşağıdaki kodu ekleyin:

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

İlk satır bir oluşturur RTCSessionDescription arayan gelen teklifi temsil edecektir. Bu da yerel açıklaması olarak ayarlanır ve nihayet Bulut Firestore yeni oda nesnesine yazılır.

Sonra, veritabanı değişiklikleri işler ve Aranan gelen bir cevap eklendiğinde algılayacaktır.

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

Bu Aranan yazıyor kadar bekleyecek RTCSessionDescription cevap ve seti o arayan uzaktan açıklama olarak RTCPeerConnection .

7. Bir oda katılma

Bir sonraki adım, varolan odası katılma mantığını uygulamaktır. Kullanıcı odası Katıl düğmesini tıklatıp oda katılmak için kimliği girerek yapar. Buradaki görev oluşturulmasını uygulamaktır RTCSessionDescription buna göre veritabanında yer cevap ve güncellemek.

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

Yukarıdaki kodda, biz arayan gelen teklifi çıkarma ve bir oluşturarak başlamak RTCSessionDescription biz uzaktan açıklama gibi ayarlamanız. Sonra, cevabı oluşturmak yerel açıklaması olarak ayarlayın ve veritabanını güncellemek. Veritabanının güncelleme tetikleyecek onSnapshot sırayla Aranan gelen yanıta göre uzaktan açıklama ayarlayacaktır arayan tarafında geri arama. Bu değişimi tamamlar RTCSessionDescription arayan ve aranan uç arasında nesneleri.

8. toplayın BUZ adayları

Arayan ve Aranan birbirine bağlayabilmek için, onlar da uzak eşe nasıl bağlanacağını WebRTC'yi anlatmak değişimi BUZ adayları gerekir. Bir sonraki görev BUZ adaylar için dinler ve veritabanındaki bir koleksiyona ekler kod uygulamaktır. Fonksiyon bulun collectIceCandidates ve aşağıdaki kodu ekleyin:

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

Bu fonksiyon iki şey yapar. Bu WebRTC API gelen BUZ adayları toplar ve veritabanına ekler ve uzaktan emsalden eklenen BUZ adayları için dinler ve bunları ekler RTCPeerConnection örneği. veritabanını yeni bir ek değildir şeyi filtrelemek için değişir biz aksi tekrar tekrar BUZ adayların aynı seti eklendi ve olurdu, çünkü dinlerken önemlidir.

9. Sonuç

Bu codelab size Bulut FireStore kullanarak WebRTC'de için sinyalizasyon uygulamak yanı nasıl sıra basit bir video sohbet uygulaması oluşturmak için bu nasıl kullanılacağını öğrendi.

Daha fazla bilgi edinmek için aşağıdaki kaynakları ziyaret edin:

  1. FirebaseRTC Kaynak Kodu
  2. WebRTC numuneleri
  3. Bulut Firestore