1. Giriş
Bu codelab'de, JavaScript'i kullanarak basit bir görüntülü sohbet Tarayıcınızda WebRTC API'yi ve sinyal için Cloud Firestore'u kullanın. İlgili içeriği oluşturmak için kullanılan adlı uygulamanın adı FirebaseRTC'dir ve basit bir örnek olarak uygulamalar geliştirmenin temellerini anlatacağım.
Neler öğreneceksiniz?
- WebRTC kullanarak bir web uygulamasında görüntülü görüşme başlatma
- Cloud Firestore kullanarak uzak tarafa sinyal gönderme
Gerekenler
Bu codelab'i başlatmadan önce şunları yüklediğinizden emin olun:
- Genellikle Node.js ile birlikte gelen npm - Düğüm LTS önerilir
2. Firebase projesi oluşturma ve ayarlama
Firebase projesi oluşturma
- Firebase konsolunda Ekle'yi tıklayın Firebase projesine FirebaseRTC adını verin.
Firebase projenizin proje kimliğini unutmayın.
- Proje oluştur'u tıklayın.
Derleyeceğiniz uygulama, mevcut iki Firebase hizmetini kullanıyor web'de:
- Buluta yapılandırılmış verileri kaydetmek ve anında almak için Cloud Firestore Veriler güncellendiğinde bildirim
- Statik öğelerinizi barındırmak ve yayınlamak için Firebase Hosting
Bu codelab'de Firebase Hosting'i şurada yapılandırmışsınızdır: proje türünden bahsedeceğiz. Ancak Cloud Firestore için size Firebase konsolunu kullanarak hizmetlerin yapılandırılması ve etkinleştirilmesi.
Cloud Firestore'u etkinleştir
Uygulama, sohbet mesajlarını kaydetmek ve yeni sohbetler almak için Cloud Firestore'u kullanır mesaj.
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 Create database'i (Veritabanı oluştur) tıklayın.
- Test modunda başlat seçeneğini belirleyin, ardından şunu okuduktan sonra Etkinleştir'i tıklayın: sorumluluk reddi beyanı.
Test modu, geliştirme sırasında veritabanına serbestçe yazabilmenizi sağlar. Bu codelab'in ilerleyen bölümlerinde veritabanımızı daha güvenli hale getireceğiz.
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ı.
Artık 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
Dosyaları düzenleyicinizde FirebaseRTC uygulamasında açın ve gereken şekilde değiştirin
lütfen aşağıdaki talimatları uygulayın. Bu dizinde,
henüz işlevsel olmayan bir WebRTC uygulamasından oluşan codelab'den yararlanabilirsiniz. Başaracağız
fonksiyonel fonksiyonlara değineceğiz.
4. Firebase komut satırı arayüzünü yükleme
Firebase Komut Satırı Arayüzü (KSA), web uygulamanızı sunmanızı sağlar yerel olarak ve web uygulamanızı Firebase Hosting'e dağıtın.
- Aşağıdaki npm komutunu çalıştırarak CLI'yı yükleyin:
sh npm -g install firebase-tools.
- Aşağıdaki komutu çalıştırarak CLI'ın doğru şekilde yüklendiğini doğrulayın
komut:
sh firebase --version.
Firebase CLI'ın 6.7.1 veya sonraki bir sürümü olduğundan emin olun.
- Aşağıdaki komutu çalıştırarak Firebase CLI'ı yetkilendirin:
sh firebase login.
Uygulamanızın Firebase yapılandırmasını almak için web uygulaması şablonunu oluşturdunuz Uygulamanızın yerel dizininden ve dosyalarından barındırma. Ama bunu yapmak için uygulamanızı Firebase projenizle ilişkilendirebilirsiniz.
Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin. komut:
sh firebase use --add.İstendiğinde proje kimliğinizi seçin ve ardından Firebase projenize bir takma ad'dır.
Takma ad, birden fazla ortamınız varsa (üretim, hazırlık vb.) kullanışlıdır.
Ancak bu codelab için default takma adını kullanalım.
Komut satırınızdaki kalan talimatları uygulayın.
5. Yerel sunucuyu çalıştırma
Uygulamamız üzerinde çalışmaya başlamak için hazırsınız! Şimdi 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ınız aşağıdaki yanıtı görüntülemelidir:
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 olacaktır.
- Uygulamanızı http://localhost:5000 adresinden açın.
Firebase projesi.
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. Bir kullanıcı oluşturabilir yeni bir oda ekleyebilirler. Bu işlem, kimlik oluşturur Uzak tarafın aynı odaya katılmak için kullanabileceği bir şifre sistemi. Kimlik, anahtar olarak kullanılır Cloud Firestore'da kullanılabilir.
Her odada hem teklif hem de teklif için RTCSessionDescriptions bulunur
yanı sıra her partiden ICE adaylarının yer aldığı iki ayrı koleksiyon hazırlanır.
İlk göreviniz, yeni bir oda oluşturmak için eksik kodu uygulamaktır.
arayanın ilk teklifi. public/app.js sayfasını açın ve //
Add code for creating a room here yorumunu bulup 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, teklifi temsil edecek bir RTCSessionDescription oluşturur
yardımcı olabilir. Bu, daha sonra yerel açıklama olarak ayarlanır ve son olarak
yeni oda nesnesini ekler.
Ardından, veritabanında yapılan değişiklikleri dinler ve arayan eklendi.
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 işlem, çağrı alan kullanıcı için RTCSessionDescription
cevapla ve bunu arayanın uzaktan açıklaması olarak ayarla
RTCPeerConnection.
7. Bir odaya katılma
Sonraki adım, mevcut bir odaya katılma mantığını uygulamaktır. Kullanıcı
Bunu, Odaya katıl düğmesini tıklayıp odanın kimliğini girerek yapabilir.
tıklayın. Burada göreviniz,
Yanıt için RTCSessionDescription ve veritabanındaki odayı güncelleyin
buna göre hazırlar.
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, ilk olarak, arayan kişiden teklifi alıp
uzak açıklama olarak ayarladığımız bir RTCSessionDescription. Ardından,
bu yanıtı yerel açıklama olarak ayarlayın ve veritabanını güncelleyin. Güncelleme
arayan tarafında onSnapshot geri çağırmasını tetikler. Bu da
ardından, aranan kişinin yanıtına göre uzaktaki açıklamayı ayarlar.
Bu işlem, RTCSessionDescription nesnelerinin
ve aranan kişiye atanır.
8. ICE adaylarını toplayın
Arayan ve arayanın birbiriyle bağlantı kurabilmesi için öncelikle şunları yapması gerekir:
webRTC'ye uzaktaki benzer ile nasıl bağlantı kurulacağını anlatan ICE adayları gibi
Bir sonraki göreviniz, ICE adaylarını dinleyen ve yeni öğeleri dahil eden
veritabanındaki bir koleksiyona taşımanızı sağlar. collectIceCandidates fonksiyonunu 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. ICE adaylarını WebRTC API'den toplar ve
bunları veritabanına ekler ve eklenen ICE adaylarını uzaktan kumandadan dinler
eşlenir ve RTCPeerConnection örneğine ekler. Proje planınızda
veritabanı değişikliklerini dinlemek, yeni bir ekleme işlemi olmayan her şeyi filtrelemek,
Aksi takdirde, aynı ICE adaylarını tekrar tekrar ekleyecektik.
tekrar.
9. Sonuç
Bu codelab'de Cloud'u kullanarak WebRTC için sinyal uygulamayı nasıl uygulayacağınızı öğrendiniz Firestore ve basit bir görüntülü sohbet oluşturmak için nasıl kullanılacağı bir uygulamadır.
Daha fazla bilgi edinmek için aşağıdaki kaynakları ziyaret edin: