WebRTC - Mimari

Genel WebRTC mimarisi büyük bir karmaşıklık düzeyine sahiptir.

Burada üç farklı katman bulabilirsiniz -

API for web developers - bu katman, RTCPeerConnection, RTCDataChannel ve MediaStrean nesneleri dahil olmak üzere ihtiyaç duyulan tüm API web geliştiricilerini içerir.
Tarayıcı üreticileri için API
Tarayıcı üreticilerinin bağlayabileceği geçersiz kılınabilen API.

Aktarım bileşenleri, çeşitli ağ türleri arasında bağlantı kurulmasına izin verirken, ses ve video motorları ses ve video akışlarını bir ses kartı ve kameradan ağa aktarmaktan sorumlu çerçevelerdir. Web geliştiricileri için en önemli kısım WebRTC API'dir.

WebRTC mimarisine istemci-sunucu tarafından bakarsak, en sık kullanılan modellerden birinin SIP (Session Initiation Protocol) Trapezoidinden esinlendiğini görebiliriz.

Bu modelde, her iki cihaz da farklı sunuculardan bir web uygulaması çalıştırmaktadır. RTCPeerConnection nesnesi, akışları birbirine eşler arası bağlanabilmeleri için yapılandırır. Bu sinyalleme HTTP veya WebSockets aracılığıyla yapılır.

Ancak en yaygın kullanılan model Üçgendir -

Bu modelde her iki cihaz da aynı web uygulamasını kullanır. Kullanıcı bağlantılarını yönetirken web geliştiricisine daha fazla esneklik sağlar.

WebRTC API

Birkaç ana javascript nesnesinden oluşur -

RTCPeerConnection
MediaStream
RTCDataChannel

RTCPeerConnection nesnesi

Bu nesne, WebRTC API'sinin ana giriş noktasıdır. Eşlere bağlanmamıza, bağlantıları başlatmamıza ve medya akışları eklememize yardımcı olur. Ayrıca başka bir kullanıcıyla bir UDP bağlantısını yönetir.

RTCPeerConnection nesnesinin ana görevi, bir eş bağlantı kurmak ve oluşturmaktır. Bağlantının anahtar noktalarını kolayca bağlayabiliriz çünkü bu nesne göründüklerinde bir dizi olayı tetikler. Bu olaylar, bağlantımızın yapılandırmasına erişmenizi sağlar -

RTCPeerConnection, bu şekilde kolayca oluşturabileceğiniz basit bir javascript nesnesidir -

[code] 
var conn = new RTCPeerConnection(conf); 

conn.onaddstream = function(stream) { 
   // use stream here 
}; 

[/code]

RTCPeerConnection nesnesi , bu öğreticilerde daha sonra ele alacağımız bir conf parametresini kabul eder . Onaddstream uzak kullanıcı kendi akran bağlantısına bir video veya ses akışı eklediğinde olayı harekete geçirilir.

MediaStream API

Modern tarayıcılar, geliştiriciye MediaStream API olarak da bilinen getUserMedia API'sine erişim sağlar . İşlevselliğin üç temel noktası vardır -

Bir geliştiriciye video ve ses akışlarını temsil eden bir akış nesnesine erişim sağlar
Bir kullanıcının cihazında birden fazla kamera veya mikrofon olması durumunda giriş kullanıcı cihazlarının seçimini yönetir
Kullanıcıya her zaman s akışını getirmek istediği zaman soran bir güvenlik seviyesi sağlar

Bu API'yi test etmek için basit bir HTML sayfası oluşturalım. Tek bir <video> öğesi gösterecek, kullanıcıdan kamerayı kullanma iznini isteyecek ve sayfada kameradan canlı bir akış gösterecektir. Bir index.html dosyası oluşturun ve şunu ekleyin -

[code] 
<html>
 
   <head> 
      <meta charset = "utf-8"> 
   </head>
	
   <body> 
      <video autoplay></video> 
      <script src = "client.js"></script> 
   </body> 
	 
</html> 
[/code]

Ardından bir client.js dosyası ekleyin -

[code] 
//checks if the browser supports WebRTC 

function hasUserMedia() { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia 
      || navigator.mozGetUserMedia || navigator.msGetUserMedia; 
   return !!navigator.getUserMedia; 
}
 
if (hasUserMedia()) { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia || navigator.msGetUserMedia;
		
   //get both video and audio streams from user's camera 
   navigator.getUserMedia({ video: true, audio: true }, function (stream) { 
      var video = document.querySelector('video'); 
		
      //insert stream into the video tag 
      video.src = window.URL.createObjectURL(stream); 
   }, function (err) {}); 
	
}else {
   alert("Error. WebRTC is not supported!"); 
}
[/code]

Şimdi index.html'yi açın ve yüzünüzü gösteren video akışını görmelisiniz.

Ancak dikkatli olun, çünkü WebRTC yalnızca sunucu tarafında çalışır. Bu sayfayı tarayıcı ile açarsanız çalışmaz. Bu dosyaları Apache veya Node sunucularında veya hangisini tercih ettiğinizde barındırmanız gerekir.

RTCDataChannel nesnesi

Eşler arasında medya akışları göndermenin yanı sıra, DataChannel API kullanarak ek veriler de gönderebilirsiniz . Bu API, MediaStream API kadar basittir. Ana iş, mevcut bir RTCPeerConnection nesnesinden gelen bir kanal oluşturmaktır -

[code] 
var peerConn = new RTCPeerConnection(); 

//establishing peer connection 
//... 
//end of establishing peer connection 
var dataChannel = peerConnection.createDataChannel("myChannel", dataChannelOptions); 

// here we can start sending direct messages to another peer 
[/code]

Tek ihtiyacınız olan bu, sadece iki satır kod. Diğer her şey tarayıcının dahili katmanında yapılır. RTCPeerConnection nesnesi kapanana kadar herhangi bir eş bağlantıda bir kanal oluşturabilirsiniz .

Özet

Artık WebRTC mimarisini sağlam bir şekilde kavramış olmalısınız. MediaStream, RTCPeerConnection ve RTCDataChannel API'lerini de ele aldık. WebRTC API hareketli bir hedeftir, bu nedenle her zaman en son spesifikasyonları takip edin.