Benzerler arasında bağlantıları kullanmaya başlama

Eşler arası bağlantılar, eşler arası protokol kullanarak iletişim kurmak için farklı bilgisayarlara iki uygulamayı bağlamayı sağlayan WebRTC spesifikasyonlarının bir parçasıdır. Eşler arasındaki iletişim video, ses veya rastgele ikili veriler olabilir (RTCDataChannel API'sini destekleyen istemciler için). İki benzer istemcinin nasıl bağlanabileceğini keşfetmek için her iki istemcinin de ICE Server yapılandırması sağlaması gerekir. Bu bir STUN veya TURN sunucusudur ve rolleri her bir müşteriye ICE adayları sağlayarak uzaktaki eşe aktarılır. ICE adaylarının aktarılmasına genellikle sinyal denir.

Sinyal

WebRTC spesifikasyonu, ICE (İnternet Bağlantı Kurma) Sunucusu ile iletişim kurmak için kullanılan API'leri içerir ancak sinyal bileşeni bu bileşenin bir parçası değildir. İki benzer kullanıcının nasıl bağlantı kurması gerektiğini belirtmek için sinyal gerekir. Bu sorun genellikle web uygulamalarının benzerler bağlantısı başlatılmadan önce gerekli bilgileri iletebileceği normal bir HTTP tabanlı Web API'si (REST hizmeti veya başka bir RPC mekanizması) üzerinden çözülür.

Aşağıdaki kod snippet'i, bu hayali sinyal hizmetinin eşzamansız olarak mesaj göndermek ve almak için nasıl kullanılabileceğini gösterir. Bu, gerektiğinde bu kılavuzun kalan örneklerinde kullanılacaktır.

// Set up an asynchronous communication channel that will be
// used during the peer connection setup
const signalingChannel = new SignalingChannel(remoteClientId);
signalingChannel.addEventListener('message', message => {
    // New message from remote client received
});

// Send an asynchronous message to the remote client
signalingChannel.send('Hello!');

Sinyal birçok farklı şekilde uygulanabilir ve WebRTC spesifikasyonu belirli bir çözümü tercih etmez.

Benzer bağlantılar başlatılıyor

Her bir eş bağlantısı bir RTCPeerConnection nesnesi tarafından yönetilir. Bu sınıfın oluşturucusu, parametresi olarak tek bir RTCConfiguration nesnesi alır. Bu nesne, eş bağlantısının nasıl kurulduğunu tanımlar ve kullanılacak ICE sunucuları hakkında bilgi içermelidir.

RTCPeerConnection oluşturulduğunda, eşi veya arayan eşi olmamıza bağlı olarak bir SDP teklifi veya yanıtı oluşturmamız gerekir. SDP teklifi veya yanıtı oluşturulduktan sonra farklı bir kanal aracılığıyla uzak eşlemeye gönderilmelidir. SDP nesnelerinin uzak eşlere iletilmesine sinyal denir ve WebRTC spesifikasyonunun kapsamında değildir.

Eşleme tarafı eşlemesini çağrı tarafında başlatmak için bir RTCPeerConnection nesnesi oluştururuz ve ardından bir RTCSessionDescription nesnesi oluşturmak için createOffer() nesnesini çağırırız. Bu oturum açıklaması, setLocalDescription() kullanılarak yerel açıklama olarak ayarlanır ve daha sonra, alıcı kanalımıza sinyal kanalı üzerinden gönderilir. Ayrıca, teklif edilen oturum açıklamamıza alıcı tarafı yanıt aldığımızda sinyal kanalımız için bir dinleyici oluşturduk.

async function makeCall() {
    const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]}
    const peerConnection = new RTCPeerConnection(configuration);
    signalingChannel.addEventListener('message', async message => {
        if (message.answer) {
            const remoteDesc = new RTCSessionDescription(message.answer);
            await peerConnection.setRemoteDescription(remoteDesc);
        }
    });
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    signalingChannel.send({'offer': offer});
}

Alıcı tarafta, RTCPeerConnection örneğimizi oluşturmadan önce gelen teklifi bekleriz. Bu işlem tamamlandıktan sonra, alınan teklifi setRemoteDescription() kullanarak ayarladık. Ardından, gelen teklife yanıt oluşturmak için createAnswer() adresine çağrı yapıyoruz. Bu yanıt, setLocalDescription() kullanılarak yerel açıklama olarak ayarlanır ve daha sonra, sinyal sunucumuz üzerinden çağrı tarafına gönderilir.

const peerConnection = new RTCPeerConnection(configuration);
signalingChannel.addEventListener('message', async message => {
    if (message.offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        signalingChannel.send({'answer': answer});
    }
});

İki eş, hem yerel hem de uzak oturum açıklamalarını ayarladıktan sonra uzak benzerin yeteneklerini bilir. Bu, eşler arasındaki bağlantının hazır olduğu anlamına gelmez. Bunu yapmak için her bir eşte ICE adaylarını toplamamız ve bu sinyali (eşleme kanalı üzerinden) diğer eşe aktarmamız gerekir.

ICE adayları

İki benzer iş ortağının WebRTC kullanarak iletişim kurabilmesi için bağlantı bilgilerini gönderip almaları gerekir. Ağ koşulları çeşitli faktörlere göre değişebileceğinden, bir benzerle bağlantı kurmak için olası adayları keşfetmek amacıyla genellikle harici bir hizmet kullanılır. Bu hizmete ICE adı verilir ve bir STUN veya TURN sunucusu kullanılır. STUN, Oturum Geçişi anlamına gelir NAT için Yardımcı Programlar'ı temsil eder ve genellikle çoğu WebRTC uygulamasında dolaylı olarak kullanılır.

turn (Transport NAT'yi Kullanma) STUN protokollerini içeren daha gelişmiş bir çözümdür ve ticari amaçlı çoğu WebRTC hizmeti, eşler arasında bağlantı kurmak için bir TURN sunucusu kullanır. WebRTC API hem STUN'u hem de turn'ü doğrudan destekler ve daha kapsamlı bir şekilde internet bağlantısı kurulması altında toplanır. WebRTC bağlantısı oluştururken genellikle RTCPeerConnection nesnesinin yapılandırmasında bir veya birkaç ICE sunucusu sağlarız.

Trickle ICE

RTCPeerConnection nesnesi oluşturulduktan sonra temel çerçeve, bağlantı kuruluşuna (ICE adayları) adayları toplamak için sağlanan ICE sunucularını kullanır. RTCPeerConnection tarihindeki icegatheringstatechange etkinliği, ICE toplamanın (new, gathering veya complete) hangi durumda olduğunu belirtir.

Bir benzerin ICE toplaması tamamlanana kadar beklemesi mümkün olsa da genellikle "cevap" buz tekniği kullanmak ve keşfedilen her uzak ICE adayına iletmek çok daha etkilidir. Bu sayede benzerler için kurulum süresi önemli ölçüde azalır ve görüntülü görüşmeler daha az gecikmeyle başlayabilir.

ICE adaylarını toplamak için icecandidate etkinliğinde bir dinleyici eklemeniz yeterlidir. Bu işleyicide yayınlanan RTCPeerConnectionIceEvent, uzaktan eşe gönderilmesi gereken yeni bir adayı temsil eden candidate özelliğini içerir (Sinyallere bakın).

// Listen for local ICE candidates on the local RTCPeerConnection
peerConnection.addEventListener('icecandidate', event => {
    if (event.candidate) {
        signalingChannel.send({'new-ice-candidate': event.candidate});
    }
});

// Listen for remote ICE candidates and add them to the local RTCPeerConnection
signalingChannel.addEventListener('message', async message => {
    if (message.iceCandidate) {
        try {
            await peerConnection.addIceCandidate(message.iceCandidate);
        } catch (e) {
            console.error('Error adding received ice candidate', e);
        }
    }
});

Bağlantı kuruldu

ICE adayları alındıktan sonra, eş eşleme durumumuz bağlı bir duruma dönüşecektir. Bunu algılamak için RTCPeerConnection cihazınıza, connectionstatechange etkinliklerini dinlediğimiz bir işleyici ekleriz.

// Listen for connectionstatechange on the local RTCPeerConnection
peerConnection.addEventListener('connectionstatechange', event => {
    if (peerConnection.connectionState === 'connected') {
        // Peers connected!
    }
});

RTCPeerConnection API dokümanları