التطبيقات المشابهة

RTCPeerConnection هي الواجهة المركزية في WebRTC API. يمثّل هذا العنصر الاتصال بين الجهاز المحلي والجهاز البعيد، ويوفر جميع الوظائف والأحداث اللازمة لإنشاء الاتصال.

إنشاء اتصال بين جهازين

تعتمد التطبيقات التي تنفّذ وظائف WebRTC عادةً بشكل كبير على واجهة RTCPeerConnection. من جهة المتصلين (أي النظير الذي يبدأ الاتصال)، تكون عملية إنشاء اتصال عادةً كما يلي:

1. أنشئ مثيلاً جديدًا من RTCPeerConnection مع إعدادات ICE المناسبة.
2. أنشئ وصفًا محليًا لبروتوكول وصف الجلسة (SDP) باستخدام RTCPeerConnection.createOffer().
3. اضبط وصف SDP المحلي باستخدام RTCPeerConnection.setLocalDescription().
4. نقل وصف SDP المحلي (باستخدام خدمة إرسال إشارات) إلى الجهاز البعيد
5. تسجيل أداة معالجة الحدث icecandidate في RTCPeerConnection
6. بالنسبة إلى كل أحداث icecandidate، يجب نقلها (باستخدام خدمة إرسال إشارات) إلى الجهاز البعيد.
7. انتظِر وصفًا واردًا لبروتوكول وصف الجلسة (SDP) عن بُعد من خدمة الإشارات، واضبطه باستخدام RTCPeerConnection.setRemoteDescription().
8. انتظِر مرشّحي ICE الواردين عن بُعد من خدمة الإشارات وأضِفهم باستخدام RTCPeerConnection.addIceCandidate()

تختلف العملية قليلاً على جهاز المتلقّي.

1. أنشئ مثيلاً جديدًا من RTCPeerConnection مع إعدادات ICE المناسبة.
2. انتظِر وصفًا واردًا لبروتوكول وصف الجلسة (SDP) عن بُعد من خدمة الإشارات، واضبطه باستخدام RTCPeerConnection.setRemoteDescription().
3. أنشِئ وصفًا لبروتوكول وصف الجلسة (SDP) عن بُعد من خلال استدعاء RTCPeerConnection.createAnswer().
4. نقل الردّ (باستخدام خدمة إرسال الإشارات) إلى الجهاز البعيد
5. تسجيل أداة معالجة الحدث icecandidate في RTCPeerConnection
6. بالنسبة إلى كل أحداث icecandidate، يجب نقلها (باستخدام خدمة إرسال إشارات) إلى الجهاز البعيد.
7. انتظِر مرشّحي 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
    });
}