RTCPeerConnection
هي الواجهة المركزية في WebRTC API. ويمثّل
الاتصال بين المضيف المحلي والمضيف البعيد، ويقدّم كل الوظائف والأحداث اللازمة لإنشاء الاتصال.
إنشاء اتصال بين الأجهزة
ستعتمد التطبيقات التي تُنفِّذ وظائف WebRTC عادةً بشكل كبير على واجهة
RTCPeerConnection
. من جانب المتصلين (أي المثيل الذي بدأ عملية الربط)، تكون عملية الربط عادةً كالتالي:
- أنشئ مثيلًا جديدًا من
RTCPeerConnection
باستخدام إعدادات ICE المناسبة. - أنشئ وصفًا لبروتوكول وصف الجلسة (SDP) على الجهاز باستخدام
RTCPeerConnection.createOffer()
. - اضبط وصف SDP المحلي باستخدام
RTCPeerConnection.setLocalDescription()
. - نقل وصف SDP المحلي (باستخدام خدمة إرسال الإشارات) إلى العميل بعيد
- سجِّل أداة مراقبة أحداث
icecandidate
علىRTCPeerConnection
. - لكل حدث من أحداث
icecandidate
، يجب نقله (باستخدام خدمة إرسال الإشارات) إلى الجهاز البعيد. - انتظِر وصف SDP عن بُعد واردًا من خدمة الإشارات و
اضبطه باستخدام
RTCPeerConnection.setRemoteDescription()
. - انتظِر وصول مرشحات ICE البعيدة الواردة من خدمة الإشارات وأضِفها باستخدام
RTCPeerConnection.addIceCandidate()
.
في ناحية المُستخدَم، تختلف العملية قليلاً.
- أنشئ مثيلًا جديدًا من
RTCPeerConnection
باستخدام إعدادات ICE المناسبة. - انتظِر وصف SDP عن بُعد واردًا من خدمة الإشارات و
اضبطه باستخدام
RTCPeerConnection.setRemoteDescription()
. - أنشئ إجابة لوصف SDP البعيد عن طريق الاتصال بالرقم
RTCPeerConnection.createAnswer()
. - نقل الإجابة إلى المُشارك عن بُعد (باستخدام خدمة إرسال الإشارات)
- سجِّل أداة مراقبة أحداث
icecandidate
علىRTCPeerConnection
. - لكل حدث من أحداث
icecandidate
، يجب نقله (باستخدام خدمة إرسال الإشارات) إلى الجهاز البعيد. - انتظِر وصول مرشحات ICE البعيدة الواردة من خدمة الإشارات وأضِفها باستخدام
RTCPeerConnection.addIceCandidate()
.
يكمن التحدي في واجهة برمجة التطبيقات هذه في أنّ معظم هذه العمليات غير متزامنة،
ما يجعل التنفيذ الفعلي لتطبيق WebRTC معقّدًا في أغلب الأحيان.
تعرض العديد من الدوالّ Promise
الذي يجب حلّه قبل المتابعة إلى
الخطوة التالية في العملية.
عند تنفيذ تطبيق باستخدام واجهة برمجة التطبيقات هذه، ننصح المطوّر باستخدام async
وawait
بدلاً من تسجيل المستمعين
(باستخدام Promise.then()
)، لأنّ ذلك يسهّل متابعة الرمز البرمجي. راجِع المثال التالي:
function createAndSendOffer(peerConnection, signallingService) {
peerConnection.createOffer()
.then(offer => {
signallingService.send({
type: 'offer',
data: offer
});
});
}
عند كتابة الرمز البرمجي أعلاه باستخدام async
وawait
، نحصل على ما يلي:
async function createAndSendOffer(peerConnection, signallingService) {
const offer = await peerConnection.createOffer();
signallingService.send({
type: 'offer',
data: offer
});
}