Firebase + WebRTC Codelab'i

1. Giriş

Bu codelab'de tarayıcınızda WebRTC API ve sinyal alma için Cloud Firestore kullanarak basit bir görüntülü sohbet uygulaması derlemeyi öğreneceksiniz. FirebaseRTC adı verilen bu uygulama, WebRTC'nin etkinleştirildiği uygulamalar oluşturmayla ilgili temel bilgileri öğreten basit bir örnek olarak çalışmaktadır.

Neler öğreneceksiniz?

  • WebRTC kullanarak bir web uygulamasında video görüşmesi başlatma
  • Cloud Firestore'u kullanarak uzak tarafa sinyal gönderme

Gerekenler

Bu codelab'i başlatmadan önce, aşağıdakileri yüklediğinizden emin olun:

  • Genellikle Node.js ile gelen npm - Node LTS önerilir

2. Firebase projesi oluşturma ve ayarlama

Firebase projesi oluşturun

  1. Firebase konsolunda Proje ekle'yi tıklayın ve ardından Firebase projesine FirebaseRTC adını verin.

Firebase projenizin Proje Kimliğini unutmayın.

  1. Proje oluştur'u tıklayın.

Derleyeceğiniz uygulama, web'de mevcut olan iki Firebase hizmeti kullanır:

  • Yapılandırılmış verileri Bulut'a kaydetmek ve veriler güncellendiğinde anında bildirim almak için Cloud Firestore
  • Statik öğelerinizi barındırmak ve yayınlamak için Firebase Hosting

Bu spesifik codelab için klonlayacağınız projede Firebase Hosting'i zaten yapılandırdınız. Ancak Cloud Firestore'da, Firebase konsolunu kullanarak hizmetlerin yapılandırılması ve etkinleştirilmesi konusunda size yol göstereceğiz.

Cloud Firestore'u Etkinleştir

Uygulama, sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için Cloud Firestore'u kullanır.

Cloud Firestore'u etkinleştirmeniz gerekir:

  1. Firebase konsolu menüsünün Geliştirme bölümünde Veritabanı'nı tıklayın.
  2. Cloud Firestore bölmesinde Veritabanı oluştur'u tıklayın.
  3. Test modunda başlat seçeneğini belirleyin ve ardından güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuduktan sonra Etkinleştir'i tıklayın.

Test modu, geliştirme sırasında veritabanına serbest bir şekilde yazmanızı sağlar. Veritabanımızın ilerleyen bölümlerinde bu codelab'de daha güvenli bir yer sunacağız.

3. Örnek kodu alın

GitHub deposunu komut satırından klonlayın:

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

Örnek kod FirebaseRTC dizinine klonlanmış olmalıdır. Bundan sonra komut satırınızın bu dizinden çalıştırıldığından emin olun:

cd FirebaseRTC

Başlangıç uygulamasını içe aktarın

Düzenleyicinizdeki FirebaseRTC dosyasını açın ve aşağıdaki talimatlara göre değiştirin. Bu dizin, henüz işlevsel olmayan bir WebRTC uygulamasından oluşan codelab için başlangıç kodunu içerir. Bu codelab boyunca işlevsel hale getireceğiz.

4. Firebase Komut Satırı Arayüzünü Yükleme

Firebase Komut Satırı Arayüzü (CLI), web uygulamanızı yerel olarak sunmanızı ve web uygulamanızı Firebase Hosting'e dağıtmanızı sağlar.

  1. Şu npm komutunu çalıştırarak KSA'yı yükleyin: sh npm -g install firebase-tools
  1. Şu komutu çalıştırarak CLI'nın düzgün şekilde yüklendiğini doğrulayın: sh firebase --version

Firebase CLI sürümünün 6.7.1 veya sonraki bir sürümü olduğundan emin olun.

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

Web uygulaması şablonunu, uygulamanızın yerel dizini ve dosyalarından Firebase Barındırma için yapılandırma ayarlarını alacak şekilde ayarladınız. Ancak bunu yapmak için uygulamanızı Firebase projenizle ilişkilendirmeniz gerekir.

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

  2. İstendiğinde Proje Kimliğinizi seçin ve ardından Firebase projenize bir takma ad verin.

Takma ad, birden fazla ortamınız (üretim, hazırlık vb.) varsa yararlı olur. Ancak, bu codelab'de default takma adını kullanalım.

  1. Komut satırınızdaki kalan talimatları uygulayın.

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

Uygulamamızda çalışmaya başlamak için hazırsınız. Uygulamayı yerel olarak çalıştıralım!

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

  2. Komut satırınız aşağıdaki yanıtı göstermelidir: hosting: Local server: http://localhost:5000

Uygulamamızı yerel olarak sunmak için Firebase Hosting emülatörünü kullanıyoruz. Web uygulaması artık http://localhost:5000 adresinden kullanılabilir olmalıdır.

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

Firebase projenize bağlanan FirebaseRTC kopyanızı göreceksiniz.

Uygulama, Firebase projenize otomatik olarak bağlandı.

6. Yeni oda oluşturma

Bu uygulamada her görüntülü sohbet oturumu oda olarak adlandırılır. Kullanıcı, uygulamasındaki bir düğmeyi tıklayarak yeni oda oluşturabilir. Bu, uzak tarafın aynı odaya katılmak için kullanabileceği bir kimlik oluşturur. Kimlik, her oda için Cloud Firestore'da anahtar olarak kullanılır.

Her odada, hem teklif hem de yanıt için RTCSessionDescriptions değeri ile birlikte her iki taraftan ICE adayına sahip iki ayrı koleksiyon bulunacaktır.

İlk göreviniz, arayanın ilk teklifiyle yeni bir oda oluşturmak için eksik kodu uygulamaktır. public/app.js bağlantısını açın, // Add code for creating a room here yorumunu bulun 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, arayanın teklifini temsil edecek bir RTCSessionDescription oluşturur. Daha sonra yerel açıklama olarak ayarlanır ve son olarak, Cloud Firestore'daki yeni oda nesnesine yazılır.

Daha sonra, veritabanında yapılan değişiklikleri dinleyeceğiz ve çağrıyı yapandan bir yanıt eklendiğinde bunu tespit edeceğiz.

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, çağrıyı yapanın yanıt için RTCSessionDescription yazmasını ve arayanın uzaktan açıklaması olarak bunu ayarlamasını sağlar RTCPeerConnection.

7. Bir odaya katılıyorsunuz

Sonraki adım, mevcut bir odaya katılma mantığının uygulanmasıdır. Kullanıcı bu işlemi, Odaya katıl düğmesini tıklayarak ve odaya katılmak için kullanılacak kimliği girerek yapar. Buradaki göreviniz, yanıt için RTCSessionDescription oluşturulmasını uygulamak ve veritabanındaki odayı buna uygun olarak güncellemektir.

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, teklifi arayandan çıkarıp uzaktan açıklama olarak ayarladığımız bir RTCSessionDescription oluşturarak başlarız. Ardından, yanıtı oluşturur, yerel açıklama olarak ayarlar ve veritabanını güncelleriz. Veritabanı güncellemesi, arayan tarafında onSnapshot geri çağırmayı tetikler. Bu da uzaktan açıklamayı arayanın yanıtına göre ayarlar. Bu, arayan ve arayan kişi arasındaki RTCSessionDescription nesnelerinin exchange'ini tamamlar.

8 ICE adaylarını toplama

Arayanın ve çağrı yapanın birbirine bağlanabilmesi için önce WebRTC'ye uzaktaki eşe nasıl bağlanacağını bildiren ICE adaylarını da exchange'lerle paylaşmaları gerekir. Sonraki göreviniz, ICE adaylarını dinleyen ve bunları veritabanındaki bir koleksiyona ekleyen kodu uygulamaktır. collectIceCandidates işlevini bulun ve aşağıdaki kodu ekleyin:

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

Bu işlev iki şey yapar. WebRTC API'sinden ICE adaylarını toplayıp veritabanına ekler ve uzaktaki eşten eklenen ICE adaylarını dinleyip bunları RTCPeerConnection örneğine ekler. Yeni eklenen her şeyi filtrelemek için veritabanı değişikliklerini dinlerken önemlidir. Zira tekrar tekrar ICE adaylarını tekrar tekrar eklerdik.

9. Sonuç

Bu codelab'de Cloud Firestore kullanarak WebRTC sinyalinin nasıl uygulanacağını ve basit bir görüntülü sohbet uygulaması oluşturmak için nasıl kullanılacağını öğrendiniz.

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

  1. FirebaseRTC Kaynak Kodu
  2. WebRTC örnekleri
  3. Cloud Firestore