WebRTC - RTCPeerConnection API'leri

RTCPeerConnection API, tarayıcıların her biri arasındaki eşler arası bağlantının temelidir. RTCPeerConnection nesnelerini oluşturmak için şunu yazın:

var pc = RTCPeerConnection(config);

nerede yapılandırma argümanı en azından anahtarı iceServers olarak barındırmaktadır. ICE adaylarının bulunması sırasında kullanılan, STUN ve TURN sunucuları hakkında bilgi içeren bir URL nesneleri dizisidir. Kullanılabilir genel STUN sunucularının bir listesini code.google.com adresinde bulabilirsiniz.

Arayan veya aranan uç olmanıza bağlı olarak, RTCPeerConnection nesnesi, bağlantının her iki tarafında biraz farklı bir şekilde kullanılır.

İşte kullanıcının akışına bir örnek -

• Kayıt onicecandidate işleyicisi. ICE adaylarını alındıkları gibi diğer meslektaşlarına gönderir.

• Kayıt onaddstream işleyicisi. Uzaktaki eşten alındığında video akışının görüntülenmesini yönetir.

• Kayıt mesajı işleyicisi. Sinyal verme sunucunuz ayrıca diğer eşten alınan mesajlar için bir işleyiciye sahip olmalıdır. Mesaj RTCSessionDescription nesnesini içeriyorsa , setRemoteDescription () yöntemi kullanılarak RTCPeerConnection nesnesine eklenmelidir . Mesaj RTCIceCandidate nesnesini içeriyorsa , addIceCandidate () yöntemi kullanılarak RTCPeerConnection nesnesine eklenmelidir .

• Yararlanın getUserMedia () yerel medya akışını ayarlamak ve eklemek için RTCPeerConnection kullanarak nesne addStream () yöntemini.

• Teklif / cevap görüşme sürecini başlatın. Bu, arayan ucun akışının aranan ucun akışından farklı olduğu tek adımdır. Arayan, createOffer () yöntemini kullanarak görüşmeyi başlatır ve RTCSessionDescription nesnesini alan bir geri aramayı kaydeder . Daha sonra bu geri çağırma, setLocalDescription () kullanarak bu RTCSessionDescription nesnesini RTCPeerConnection nesnenize eklemelidir . Ve son olarak, arayan kişi bu RTCSessionDescription'ı sinyal verme sunucusunu kullanarak uzaktaki eşe göndermelidir . Öte yandan, aranan uç aynı geri aramayı kaydeder, ancak createAnswer () yönteminde. Aranan uç akışının yalnızca arayan kişiden teklif alındıktan sonra başlatıldığına dikkat edin.

RTCPeerConnection API

Özellikleri

• RTCPeerConnection.iceConnectionState (read only)- Bağlantının durumunu açıklayan bir RTCIceConnectionState numaralandırması döndürür. Bu değer değiştiğinde bir iceconnectionstatechange olayı tetiklenir. Olası değerler -

  • new - ICE temsilcisi uzak adayları bekliyor veya adres topluyor

  • checking - ICE temsilcisinin uzak adayları var, ancak henüz bir bağlantı bulamadı

  • connected - ICE temsilcisi kullanılabilir bir bağlantı buldu, ancak daha iyi bağlantı için hala daha uzak adayı kontrol ediyor.

  • completed - ICE temsilcisi kullanılabilir bir bağlantı buldu ve uzak adayları test etmeyi durdurdu.

  • failed - ICE temsilcisi tüm uzak adayları kontrol etti ancak en az bir bileşen için bir eşleşme bulamadı.

  • disconnected - en az bir bileşen artık hayatta değil.

  • closed - ICE ajanı kapalıdır.

• RTCPeerConnection.iceGatheringState (read only) - Bağlantı için ICE toplama durumunu tanımlayan bir RTCIceGatheringState numaralandırması döndürür -

  • new - nesne yeni oluşturuldu.

  • gathering - ICE acentesi adayları toplama sürecinde

  • complete ICE ajanı toplamayı tamamladı.

• RTCPeerConnection.localDescription (read only)- Yerel oturumu açıklayan bir RTCSessionDescription döndürür. Henüz ayarlanmadıysa boş olabilir.

• RTCPeerConnection.peerIdentity (read only)- Bir RTCIdentityAssertion döndürür. Bir idp (etki alanı adı) ve uzak eşin kimliğini temsil eden bir addan oluşur.

• RTCPeerConnection.remoteDescription (read only)- Uzak oturumu açıklayan bir RTCSessionDescription döndürür. Henüz ayarlanmadıysa boş olabilir.

• RTCPeerConnection.signalingState (read only)- Yerel bağlantının sinyal durumunu açıklayan bir RTCSignalingState numaralandırması döndürür. Bu durum, SDP teklifini açıklar. Bu değer değiştiğinde bir sinyalleşme durumu değişim olayı tetiklenir. Olası değerler -

  • stable- Başlangıç ​​durumu. Devam eden SDP teklif / cevap alışverişi yok.

  • have-local-offer - bağlantının yerel tarafı yerel olarak bir SDP teklifi uyguladı.

  • have-remote-offer - bağlantının uzak tarafı yerel olarak bir SDP teklifi uyguladı.

  • have-local-pranswer - uzak bir SDP teklifi uygulandı ve yerel olarak bir SDP pranswer uygulandı.

  • have-remote-pranswer - yerel bir SDP uygulandı ve bir SDP pranswer uzaktan uygulandı.

  • closed - bağlantı kapalıdır.

Etkinlik sahipleri

Aşağıda, RTCPeerConnection'ın yaygın olarak kullanılan Olay İşleyicileri verilmiştir.

S.No.	Olay İşleyicileri ve Açıklama
1	RTCPeerConnection.onaddstream Bu işleyici, addstream olayı tetiklendiğinde çağrılır. Bu olay, uzak uç tarafından bu bağlantıya bir MediaStream eklendiğinde gönderilir.
2	RTCPeerConnection.ondatachannel Bu işleyici, datachannel olayı tetiklendiğinde çağrılır. Bu olay, bu bağlantıya bir RTCDataChannel eklendiğinde gönderilir.
3	RTCPeerConnection.onicecandidate Bu işleyici, icecandidate olayı tetiklendiğinde çağrılır. Bu olay, komut dosyasına bir RTCIceCandidate nesnesi eklendiğinde gönderilir.
4	RTCPeerConnection.oniceconnectionstatechange Bu işleyici, iceconnectionstatechange olayı tetiklendiğinde çağrılır. Bu olay, iceConnectionState değeri değiştiğinde gönderilir.
5	RTCPeerConnection.onidentityresult Bu işleyici, Identityresult olayı tetiklendiğinde çağrılır. Bu olay, bir teklif veya getIdentityAssertion () yoluyla bir yanıtın oluşturulması sırasında bir kimlik doğrulaması üretildiğinde gönderilir.
6	RTCPeerConnection.onidpassertionerror Bu işleyici, idpassertionerror olayı tetiklendiğinde çağrılır. Bu olay, IdP (Kimlik Sağlayıcı) bir kimlik doğrulama işlemi oluştururken bir hata bulduğunda gönderilir.
7	RTCPeerConnection.onidpvalidation Bu işleyici, idpvalidationerror olayı tetiklendiğinde çağrılır. Bu olay, IdP (Kimlik Sağlayıcı) bir kimlik onayını doğrularken bir hata bulduğunda gönderilir.
8	RTCPeerConnection.onnegotiationneeded Bu işleyici, pazarlık gerektiren olay tetiklendiğinde çağrılır. Bu olay, gelecekte bir noktada müzakerenin gerekli olacağını bildirmek için tarayıcı tarafından gönderilir.
9	RTCPeerConnection.onpeeridentity Bu işleyici, peeridentity olayı tetiklendiğinde çağrılır. Bu olay, bu bağlantıda bir eş kimliği ayarlandığında ve doğrulandığında gönderilir.
10	RTCPeerConnection.onremovestream Bu işleyici, signalingstatechange olayı tetiklendiğinde çağrılır. Bu olay, signalingState değeri değiştiğinde gönderilir.
11	RTCPeerConnection.onsignalingstatechange Bu işleyici, removeestream olayı tetiklendiğinde çağrılır. Bu olay, bu bağlantıdan bir MediaStream kaldırıldığında gönderilir.

Yöntemler

Aşağıda, RTCPeerConnection'ın yaygın olarak kullanılan yöntemleri verilmiştir.

S.No.	Yöntemler ve Açıklama
1	RTCPeerConnection() Yeni bir RTCPeerConnection nesnesi döndürür.
2	RTCPeerConnection.createOffer() Uzak bir eş bulmak için bir teklif (istek) oluşturur. Bu yöntemin ilk iki parametresi, başarı ve hata geri aramalarıdır. İsteğe bağlı üçüncü parametre, ses veya video akışlarını etkinleştirmek gibi seçeneklerdir.
3	RTCPeerConnection.createAnswer() Teklif / cevap pazarlığı sürecinde uzak tarafın aldığı teklife bir cevap oluşturur. Bu yöntemin ilk iki parametresi, başarı ve hata geri aramalarıdır. İsteğe bağlı üçüncü parametre, cevabın oluşturulmasına yönelik seçeneklerdir.
4	RTCPeerConnection.setLocalDescription() Yerel bağlantı açıklamasını değiştirir. Açıklama, bağlantının özelliklerini tanımlar. Bağlantı hem eski hem de yeni açıklamaları destekleyebilmelidir. Yöntem üç parametre alır: RTCSessionDescription nesnesi, açıklama değişikliği başarılı olursa geri arama, açıklama değişikliği başarısız olursa geri arama.
5	RTCPeerConnection.setRemoteDescription() Uzak bağlantı açıklamasını değiştirir. Açıklama, bağlantının özelliklerini tanımlar. Bağlantı hem eski hem de yeni açıklamaları destekleyebilmelidir. Yöntem üç parametre alır: RTCSessionDescription nesnesi, açıklama değişikliği başarılı olursa geri arama, açıklama değişikliği başarısız olursa geri arama.
6	RTCPeerConnection.updateIce() Uzak adaylara ping atma ve yerel adayları toplama ICE aracısı sürecini günceller.
7	RTCPeerConnection.addIceCandidate() ICE temsilcisine uzak bir aday sağlar.
8	RTCPeerConnection.getConfiguration() Bir RTCConfiguration nesnesi döndürür. RTCPeerConnection nesnesinin yapılandırmasını temsil eder.
9	RTCPeerConnection.getLocalStreams() Bir dizi yerel MediaStream bağlantısı döndürür.
10	RTCPeerConnection.getRemoteStreams() Bir dizi uzak MediaStream bağlantısı döndürür.
11	RTCPeerConnection.getStreamById() Verilen kimliğe göre yerel veya uzak MediaStream'i döndürür.
12	RTCPeerConnection.addStream() Yerel bir video veya ses kaynağı olarak bir MediaStream ekler.
13	RTCPeerConnection.removeStream() Bir MediaStream'i yerel video veya ses kaynağı olarak kaldırır.
14	RTCPeerConnection.close() Bir bağlantıyı kapatır.
15	RTCPeerConnection.createDataChannel() Yeni bir RTCDataChannel oluşturur.
16	RTCPeerConnection.createDTMFSender() Belirli bir MediaStreamTrack ile ilişkilendirilmiş yeni bir RTCDTMFSender oluşturur. Bağlantı üzerinden DTMF (Çift tonlu çok frekanslı) telefon sinyali göndermeye izin verir.
17	RTCPeerConnection.getStats() Bağlantıyla ilgili istatistikleri içeren yeni bir RTCStatsReport oluşturur.
18	RTCPeerConnection.setIdentityProvider() IdP'yi ayarlar. Üç parametre alır - ad, iletişim için kullanılan protokol ve isteğe bağlı bir kullanıcı adı.
19	RTCPeerConnection.getIdentityAssertion() Bir kimlik iddiası toplar. Uygulamada bu yöntemle ilgilenilmesi beklenmemektedir. Bu nedenle, sadece ihtiyacı önceden tahmin etmek için açıkça çağırabilirsiniz.

Bir Bağlantı Kurmak

Şimdi bir örnek uygulama oluşturalım. İlk olarak, "sinyalleşme sunucusu" eğitiminde oluşturduğumuz sinyalleme sunucusunu "düğüm sunucusu" üzerinden çalıştırın.

Sayfada biri giriş, diğeri bağlanmak istediğimiz kullanıcı adı olmak üzere iki metin girişi olacaktır. Bir index.html dosyası oluşturun ve aşağıdaki kodu ekleyin -

<html lang = "en"> 
   <head> 
      <meta charset = "utf-8" /> 
   </head>
	
   <body> 
	
      <div> 
         <input type = "text" id = "loginInput" /> 
         <button id = "loginBtn">Login</button> 
      </div> 
	
      <div> 
         <input type = "text" id = "otherUsernameInput" />
         <button id = "connectToOtherUsernameBtn">Establish connection</button> 
      </div> 
		
      <script src = "client2.js"></script>
		
   </body>
	
</html>

Bir giriş için metin girişini, giriş düğmesini, diğer eş kullanıcı adı için metin girişini ve ona bağlan düğmesini eklediğimizi görebilirsiniz. Şimdi bir client.js dosyası oluşturun ve aşağıdaki kodu ekleyin -

var connection = new WebSocket('ws://localhost:9090'); 
var name = ""; 
 
var loginInput = document.querySelector('#loginInput'); 
var loginBtn = document.querySelector('#loginBtn'); 
var otherUsernameInput = document.querySelector('#otherUsernameInput'); 
var connectToOtherUsernameBtn = document.querySelector('#connectToOtherUsernameBtn'); 
var connectedUser, myConnection;
  
//when a user clicks the login button 
loginBtn.addEventListener("click", function(event){ 
   name = loginInput.value; 
	
   if(name.length > 0){ 
      send({ 
         type: "login", 
         name: name 
      }); 
   } 
	
});
  
//handle messages from the server 
connection.onmessage = function (message) { 
   console.log("Got message", message.data);
   var data = JSON.parse(message.data); 
	
   switch(data.type) { 
      case "login": 
         onLogin(data.success); 
         break; 
      case "offer": 
         onOffer(data.offer, data.name); 
         break; 
      case "answer": 
         onAnswer(data.answer); 
         break; 
      case "candidate": 
         onCandidate(data.candidate); 
         break; 
      default: 
         break; 
   } 
};
  
//when a user logs in 
function onLogin(success) { 

   if (success === false) { 
      alert("oops...try a different username"); 
   } else { 
      //creating our RTCPeerConnection object 
		
      var configuration = { 
         "iceServers": [{ "url": "stun:stun.1.google.com:19302" }] 
      }; 
		
      myConnection = new webkitRTCPeerConnection(configuration); 
      console.log("RTCPeerConnection object was created"); 
      console.log(myConnection); 
  
      //setup ice handling
      //when the browser finds an ice candidate we send it to another peer 
      myConnection.onicecandidate = function (event) { 
		
         if (event.candidate) { 
            send({ 
               type: "candidate", 
               candidate: event.candidate 
            }); 
         } 
      }; 
   } 
};
  
connection.onopen = function () { 
   console.log("Connected"); 
};
  
connection.onerror = function (err) { 
   console.log("Got error", err); 
};
  
// Alias for sending messages in JSON format 
function send(message) { 

   if (connectedUser) { 
      message.name = connectedUser; 
   } 
	
   connection.send(JSON.stringify(message)); 
};

Sinyal sunucumuza bir soket bağlantısı kurduğumuzu görebilirsiniz. Bir kullanıcı oturum açma düğmesine tıkladığında, uygulama kullanıcı adını sunucuya gönderir. Oturum açma başarılı olursa, uygulama RTCPeerConnection nesnesini oluşturur ve bulunan tüm icecandidates'i diğer eşe gönderen onicecandidate işleyicisini kurar. Şimdi sayfayı açın ve giriş yapmayı deneyin. Aşağıdaki konsol çıktısını görmelisiniz -

Bir sonraki adım, diğer akran için bir teklif oluşturmaktır. Aşağıdaki kodu client.js dosyanıza ekleyin -

//setup a peer connection with another user 
connectToOtherUsernameBtn.addEventListener("click", function () { 
 
   var otherUsername = otherUsernameInput.value; 
   connectedUser = otherUsername;
	
   if (otherUsername.length > 0) { 
      //make an offer 
      myConnection.createOffer(function (offer) { 
         console.log(); 
         send({ 
            type: "offer", 
            offer: offer 
         });
			
         myConnection.setLocalDescription(offer); 
      }, function (error) { 
         alert("An error has occurred."); 
      }); 
   } 
}); 
 
//when somebody wants to call us 
function onOffer(offer, name) { 
   connectedUser = name; 
   myConnection.setRemoteDescription(new RTCSessionDescription(offer)); 
	
   myConnection.createAnswer(function (answer) { 
      myConnection.setLocalDescription(answer); 
		
      send({ 
         type: "answer", 
         answer: answer 
      }); 
		
   }, function (error) { 
      alert("oops...error"); 
   }); 
}
  
//when another user answers to our offer 
function onAnswer(answer) { 
   myConnection.setRemoteDescription(new RTCSessionDescription(answer)); 
} 
 
//when we got ice candidate from another user 
function onCandidate(candidate) { 
   myConnection.addIceCandidate(new RTCIceCandidate(candidate)); 
}

Bir kullanıcı "Bağlantı kur" düğmesini tıkladığında uygulamanın diğer eşe bir SDP teklifinde bulunduğunu görebilirsiniz. Ayrıca onAnswer ve onCandidate işleyicilerini de ayarladık . Sayfanızı yeniden yükleyin, iki sekmede açın, iki kullanıcıyla oturum açın ve aralarında bağlantı kurmaya çalışın. Aşağıdaki konsol çıktısını görmelisiniz -

Şimdi eşler arası bağlantı kuruldu. Sonraki eğitimlerde, metin sohbet desteğinin yanı sıra video ve ses akışları da ekleyeceğiz.