WebRTC - الهندسة المعمارية

تتميز بنية WebRTC الشاملة بمستوى كبير من التعقيد.

WebRTC Architecture

هنا يمكنك العثور على ثلاث طبقات مختلفة -

API لمطوري الويب - تحتوي هذه الطبقة على جميع مطوري الويب APIs المطلوبين، بما في ذلك RTCPeerConnection و RTCDataChannel وMediaStrean الكائنات.
API لصانعي المتصفح
API القابلة للتجاوز، والتي يمكن لصانعي المستعرض ربطها.

وتسمح مكونات النقل بإنشاء اتصالات عبر أنواع مختلفة من الشبكات في حين أن محركات الصوت والفيديو هي أطر عمل مسؤولة عن نقل تدفقات الصوت والفيديو من بطاقة الصوت والكاميرا إلى الشبكة. بالنسبة لمطوري الويب ، فإن الجزء الأكثر أهمية هو WebRTC API.

إذا نظرنا إلى بنية WebRTC من جانب الخادم العميل يمكننا أن نرى أن أحد النماذج الأكثر استخداما مستوحاة من SIP (بروتوكول بدء الدورة) شبه منحرف.

SIP Trapezoid

في هذا الطراز، يقوم كلا الجهازين بتشغيل تطبيق ويب من خوادم مختلفة. تكوين الكائن RTCPeerConnection التدفقات بحيث يمكن الاتصال ببعضها البعض، نظير إلى نظير. يتم ذلك الإشارات عبر HTTP أو WebSockets.

ولكن النموذج الأكثر استخداما هو المثلث -

Triangle Model

في هذا الطراز كلا الجهازين استخدام نفس تطبيق ويب. فهو يعطي مطور الويب المزيد من المرونة عند إدارة اتصالات المستخدم.

واجهة برمجة تطبيقات WebRTC

وهو يتألف من عدد قليل من الكائنات جافا سكريبت الرئيسية -

RTCPeerConnection
ميديا ستريم
قناة RTCDataChannel

كائن الاتصال RTCPeer

هذا الكائن هو نقطة الإدخال الرئيسية إلى API WebRTC. فهو يساعدنا على الاتصال بالأقران، و تهيئة الاتصالات وإرفاق تدفقات الوسائط. كما أنه يدير اتصال UDP مع مستخدم آخر.

المهمة الرئيسية للكائن RTCPeerConnection هو الإعداد وإنشاء اتصال نظير. يمكننا بسهولة ربط نقاط المفاتيح من الاتصال لأن هذا الكائن تشغيل مجموعة من الأحداث عند ظهورها. هذه الأحداث تعطيك الوصول إلى تكوين الاتصال لدينا -

RTCPeerConnection object

وRTCPeerConnection هو كائن جافا سكريبت بسيطة، والتي يمكنك ببساطة إنشاء بهذه الطريقة -

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

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

[code/]

يقبل الكائن RTCPeerConnection معلمة conf، والتي سوف تغطي لاحقا في هذه الدروس. يتم تشغيل الحدث onaddstream عند المستخدم البعيد بإضافة دفق صوت أو فيديو إلى اتصال النظير الخاص بهم.

ميديا ستريم API

المتصفحات الحديثة إعطاء وصول المطور إلى getUserMedia API، المعروف أيضا باسم MEDIAStream API. هناك ثلاث نقاط رئيسية من الوظائف -

فهو يعطي المطور الوصول إلى كائن تيار التي تمثل دفق الفيديو والصوت
وهو يدير اختيار أجهزة المستخدم الإدخال في حالة مستخدم لديه عدة كاميرات أو ميكروفونات على جهازه
ويوفر مستوى الأمان يسأل المستخدم في كل وقت انه يريد جلب تيار ق

لاختبار هذا API دعونا إنشاء صفحة HTML بسيطة. وسوف تظهر عنصر واحد <الفيديو> ، وطلب إذن المستخدم لاستخدام الكاميرا وعرض بث مباشر من الكاميرا على الصفحة. إنشاء فهرس.html ملف وإضافة -

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

ثم إضافة ملف .js العميل -

[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]

الآن افتح الفهرس.html وسترى بث الفيديو الذي يعرض وجهك.

ولكن كن حذراً، لأن WebRTC يعمل فقط على جانب الملقم. إذا كنت ببساطة فتح هذه الصفحة مع المتصفح انها لن تعمل. تحتاج إلى استضافة هذه الملفات على خوادم Apache أو Node، أو أي منها تفضلها.

كائن RTCDataChannel

بالإضافة إلى إرسال تدفقات الوسائط بين الأقران، يمكنك أيضاً إرسال بيانات إضافية باستخدام DataChannel API. API هذا هو بسيط مثل MEDIAStream API. المهمة الرئيسية هي إنشاء قناة قادمة من كائن RTCPeerConnection موجود -

[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]

هذا كل ما تحتاجه، فقط سطرين من التعليمات البرمجية. يتم كل شيء آخر على طبقة المتصفح الداخلية. يمكنك إنشاء قناة في أي اتصال نظير حتى يتم إغلاق كائن RTCPeerConnectionject.

موجز

يجب أن يكون لديك الآن فهم راسخ للهندسة المعمارية WebRTC. كما قمنا بتغطية MediaStream و RTCPeerConnection و RTCDataChannel APIs. واجهة برمجة تطبيقات WebRTC هي هدف متحرك ، لذا دائمًا ما تواكب أحدث المواصفات.

الصفحة التالية الصفحة السابقة

بحث هذه المدونة الإلكترونية

webrtc بالعربي