Not: Projenizin ana sayfasına giderseniz bunu Ayarlar ve gt;Proje Ayarları (veya URL'ye bakın!)
Proje oluştur'u tıklayın.
Geliştireceğiniz uygulama, web'de bulunan iki Firebase hizmeti kullanır:
Yapılandırılmış verileri Cloud'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 özel codelab'de, klonlayacağınız projede Firebase Hosting'i zaten yapılandırmıştı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ını almak için Cloud Firestore'u kullanır.
Cloud Firestore'u etkinleştirmeniz gerekir:
Firebase konsolu menüsünün Geliştirme bölümünde Veritabanı'nı tıklayın.
Cloud Firestore bölmesinde Veritabanı oluştur 'u tıklayın.
Test modunda başlat seçeneğini belirleyin ve 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 özgürce yazmanızı sağlar.
Bu codelab'in ilerleyen bölümlerinde veritabanımızı daha güvenli hale getireceğiz.
3. Örnek kodu alın
GitHub veri deposunu komut satırından klonlayın:
git clone https://github.com/webrtc/FirebaseRTC
Örnek kod, FirebaseRTC dizinine klonlanmış olmalıdır.
Komut satırınızın bundan sonra bu dizinden çalıştırıldığından emin olun:
cd FirebaseRTC
Başlangıç uygulamasını içe aktarın
Düzenleyicinizdeki FirebaseRTC klasöründeki dosyaları açın ve aşağıdaki talimatlara göre bu dosyaları değiştirin. Bu dizin, henüz işlevsel olmayan bir WebRTC uygulamasından oluşan codelab'in başlangıç kodunu içerir. Bu codelab'de çalışmasını sağlayacağız.
4. Firebase Komut Satırı Arayüzünü Yükleme
Firebase Komut Satırı Arayüzü (CLI), web uygulamanızı yerel olarak sunmanıza ve web uygulamanızı Firebase Hosting'e dağıtmanıza olanak tanır.
Not: CLI'yı yüklemek için genellikle Node.js ile birlikte gelen npm'yi yüklemeniz gerekir.
Aşağıdaki npm komutunu çalıştırarak CLI'yı yükleyin:
sh
npm -g install firebase-tools
Not: Çalışmıyor mu? Komutu bunun yerine sudo komutunu çalıştırmanız gerekebilir.
Aşağıdaki komutu çalıştırarak CLI'nin doğru şekilde yüklendiğini doğrulayın:
sh
firebase --version
Firebase CLI'nın 6.7.1 veya sonraki bir sürümünü kullandığından emin olun.
Aşağıdaki komutu çalıştırarak Firebase CLI'yı yetkilendirin:
sh
firebase login
Web uygulaması şablonunu, uygulamanızın Firebase için yapılandırmasını çekerek uygulamanızın yerel dizininden ve dosyalarından barındırabilirsiniz. Ancak bunun için uygulamanızı Firebase projenizle ilişkilendirmeniz gerekir.
Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:
sh
firebase use --add
İstendiğinde Proje Kimliğinizi seçin, ardından Firebase projenize bir takma ad verin.
Takma ad, birden fazla ortamınız varsa (üretim, hazırlık vb.) yararlıdır.
Ancak bu codelab'de default takma adını kullanalım.
Komut satırınızda kalan talimatları uygulayın.
5. Yerel sunucuyu çalıştırma
Uygulamamızda çalışmaya başlamaya hazırsınız. Uygulamayı yerel olarak çalıştıralım!
Aşağıdaki Firebase CLI komutunu çalıştırın:
sh
firebase serve --only hosting
Komut satırında şu yanıt gösterilmelidir:
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'den kullanılabilir olmalıdır.
http://localhost:5000 adresinde uygulamanızı açın.
Firebase projenize bağlı FirebaseRTC kopyasını görmeniz gerekir.
Uygulama otomatik olarak Firebase projenize 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 bir oda oluşturabilir. Bu işlem, 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 ve her iki taraftan da ICE adayları bulunan iki ayrı koleksiyon bulunur.
İlk göreviniz, arayanın ilk teklifiyle yeni bir oda oluşturmak için eksik kodu uygulamaktır. public/app.js sayfasını açıp //
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 eden bir RTCSessionDescription oluşturur. Daha sonra bu, yerel açıklama olarak ayarlanır ve son olarak, Cloud Firestore'daki yeni oda nesnesine yazılır.
Ardından, veritabanındaki değişiklikleri dinler ve davetlinin yanıtının eklendiğini belirleriz.
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);
}
});
Arayan, yanıt için RTCSessionDescription yazana kadar bunu bekler ve bunu, arayanda uzaktan açıklama olarak ayarlar.RTCPeerConnection
7. Bir odaya katılma
Sonraki adım, mevcut bir odaya katılma mantığını uygulamaktır. Kullanıcı, Odaya katıl düğmesini tıklayıp katılacak odanın kimliğini girerek bunu yapar. Burada sizin göreviniz, yanıt için RTCSessionDescription öğesinin oluşturulmasını uygulamak ve veritabanında ilgili odayı 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şlıyoruz. Ardından, yanıtı oluşturur, yerel açıklama olarak ayarlarız ve veritabanını güncelleriz. Veritabanının güncellenmesi çağrı yapan tarafın tarafındaki onSnapshot geri çağırmasını tetikler. Bu da arayanın yanıtına bağlı olarak uzak açıklamayı ayarlar.
Bu işlem, RTCSessionDescription nesnesini arama
8. ICE adaylarını toplayın
Arayan ve arayanın birbirine bağlanabilmesi için öncelikle WebRTC'nin uzaktaki eşe nasıl bağlanacağını anlatan ICE adaylarını takas etmeleri gerekir.
Bir sonraki göreviniz, ICE adaylarını dinleyen ve 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());
peerConnection.addIceCandidate(candidate);
}
});
})
}
Bu işlev iki şey yapar: WebRTC API'den ICE adaylarını toplayıp veritabanına ekler ve uzaktaki ICE adaylarını dinler ve bunları RTCPeerConnection örneğine ekler. Veritabanı değişikliklerine uyarlarken yeni bir ekleme olmayan her şeyi filtrelemek, aksi takdirde aynı ICE adaylarını tekrar tekrar ekleyebilmemiz açısından önemlidir.
9. Sonuç
Bu codelab'de, Cloud Firestore'u kullanarak WebRTC için sinyalleri nasıl uygulayacağınızı ve basit bir görüntülü sohbet uygulaması oluşturmak için bu sinyali nasıl kullanacağınızı öğrendiniz.
Daha fazla bilgi edinmek için aşağıdaki kaynakları ziyaret edebilirsiniz:
FirebaseRTC Kaynak Kodu WebRTC örnekleri Cloud Firestore
