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

Eş bağlantılar, WebRTC teknik özelliklerinin farklı bilgisayarlardaki iki uygulamayı birbirine bağlayarak iletişim kurmak için eşler arası protokolü kullanır. Akranlar arasındaki iletişim; görüntülü, sesli veya rastgele ikili program verileri (RTCDataChannel API'yi destekleyen istemciler için). İçinde iki iş ortağının nasıl bağlantı kurabileceğini öğrenmek için her iki müşterinin de Sunucu yapılandırması. Bu bir STUN ya da TURN sunucusudur ve rol her müşteriye ICE adayları sağlamak için kullanılır ve bu adaylar da uzaktan kumandaya aktarılır. empatiyle yaklaşır. ICE adaylarının bu şekilde aktarılması genellikle sinyal olarak adlandırılır.

Sinyal

WebRTC spesifikasyonu, ICE (İnternet bağlantı kurma) kullandığınızdan emin olun, ancak sinyal bileşeni somut olarak ortaya koyar. İki iş ortağının nasıl bağlantı kuracaklarını paylaşabilmesi için sinyal gereklidir. Genellikle bu sorun normal bir HTTP tabanlı Web API'si (REST hizmet veya diğer RPC mekanizması) uygulama bilgileri kontrol eder.

Aşağıdaki kod snippet'i, bu kurgusal sinyal hizmetinin şu amaçla nasıl kullanılabileceğini gösterir: eşzamansız olarak ileti gönderip alabilirsiniz. Bu, trafiğin kalan bu kılavuzda verilen örneklere göz atabilirsiniz.

// 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, belirli bir çözümü tercih etmiyor.

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

Her eş bağlantısı bir RTCPeerConnection nesnesi tarafından işlenir. Oluşturucu bu sınıfın parametresi olarak tek bir RTCConfiguration nesnesi alır. Bu nesne, eş bağlantısının nasıl ayarlandığını tanımlar ve nesnede bilgi içermelidir hakkında da bilgi verelim.

RTCPeerConnection oluşturulduktan sonra bir SDP teklifi oluşturmamız veya arayan emsal mi yoksa alıcı akran mı olduğumuza bağlı olarak cevap vermelidir. SDP teklif veya yanıt oluşturulduğunda kullanabilirsiniz. SDP nesnelerini uzak eşlere iletmeye sinyal ve WebRTC spesifikasyonu kapsamında değildir.

Eş bağlantısı kurulumunu çağrı tarafından başlatmak için RTCPeerConnection nesnesini ifade edin ve ardından, aşağıdakileri oluşturmak için createOffer() yöntemini çağırın: RTCSessionDescription nesne. Bu oturum açıklaması yerel setLocalDescription() kullanılarak ve ardından sinyalimiz üzerinden gönderilir alıcı tarafa da ekler. Sinyallerimiz için bir dinleyici ayarlıyoruz. sağladığımız oturuma ilişkin açıklamamıza bir yanıt alındığında kabul etmeli.

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, yeni bir teklif oluşturmadan önce RTCPeerConnection örneği. Bu işlem tamamlandığında, aldığımız teklifi setRemoteDescription() Sonra, şuna bir yanıt oluşturmak için createAnswer() numarasını arayacağız: teklif alır. Bu yanıt, setLocalDescription() ve ardından sinyalimiz aracılığıyla arayan tarafa iletildi. sunucu.

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 grup hem yerel hem de uzak oturum açıklamalarını belirledikten sonra ne kadar yetenekli olduğunu bilir. Bu, bağlantı kalitesinin empati gösterebilirsiniz. Bunun işe yaraması için ICE verilerini toplamamız gerekir. diğer adaylara aktarıp (sinyal kanalı üzerinden) empatiyle yaklaşır.

ICE adayları

İki sınıf arkadaşının WebRTC kullanarak iletişim kurabilmesi için bağlantı bilgileri. Ağ koşulları bağlı olarak değişebileceğinden harici bir hizmet genellikle sorunları tespit etmek için kullanılır. olası adayları ifade eder. Bu hizmetin adı ICE ve STUN veya TURN sunucusu kullanarak. STUN, Oturum Geçişi anlamına gelir NAT için yardımcı programlardır ve genellikle çoğu WebRTC uygulamasında dolaylı olarak kullanılır.

TURN (Geçiş NAT'yi Kullanarak Geçiş), STUN protokolleri ve çoğu ticari WebRTC tabanlı hizmet bir TURN sunucusu kullanır. akranlar arasında bağlantı kurmayı sağlar. WebRTC API, STUN'un her ikisini de destekler ve TURN doğrudan DÖNÜŞTÜRÜLÜK ve daha kapsamlı İnternet terimi altında Bağlantı Kurma. WebRTC bağlantısı oluştururken genellikle için yapılandırmada bir veya daha fazla ICE sunucusu RTCPeerConnection nesne algılandı.

Trickle ICE

Bir RTCPeerConnection nesnesi oluşturulduktan sonra temel çerçeve, bağlantı kuruluşu için adayları toplamak üzere ICE sunucularını sağladı (ICE adayları) gösterir. RTCPeerConnection sinyallerindeki icegatheringstatechange etkinliği ICE toplantısı hangi durumda (new, gathering veya complete) olduğunu belirtin.

Bir iş arkadaşınızın ICE toplantısının tamamlanmasını beklemesi mümkün olsa da "karmaşık buz" kullanmak genellikle çok daha verimlidir. teknik ve iletim her ICE adayını uzaktaki meslektaşla paylaştırır. Bu, eş bağlantısı için kurulum süresini önemli ölçüde kısaltır ve videonun geri ya da ile çalışmaya başlayın.

ICE adaylarını toplamak için icecandidate etkinliği için bir işleyici eklemeniz yeterlidir. Bu dinleyiciye yayınlanan RTCPeerConnectionIceEvent şunları içerecek: yeni bir adayı temsil eden candidate özelliği (Sinyal simgesine 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 benzer adayın durumunu değerlendirmemiz gerekir. bağlantı durumu "bağlı" durumuna geçer. Bunu tespit etmek için RTCPeerConnection dinleyenler arasında connectionstatechange. etkinlikler.

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

RTCPeerConnection API'sı belgeleri