חיבורים לאפליקציות דומות

RTCPeerConnection הוא הממשק המרכזי של WebRTC API. הוא מייצג את החיבור בין אפליקציות דומות לבין אפליקציות מרוחקות, ותומך בכל הפונקציות והאירועים הנדרשים ליצירת החיבור.

יצירת חיבור בין אפליקציות דומות

אפליקציות המטמיעות פונקציונליות של WebRTC בדרך כלל מסתמכות במידה רבה על הממשק של RTCPeerConnection. בצד של המתקשרים (כלומר, העמית להשוואה) תהליך החיבור הוא בדרך כלל:

1. יש ליצור מכונה חדשה מסוג RTCPeerConnection עם התצורה המתאימה ל-ICE.
2. אפשר ליצור תיאור SDP מקומי באמצעות RTCPeerConnection.createOffer().
3. מגדירים את תיאור ה-SDP המקומי באמצעות RTCPeerConnection.setLocalDescription().
4. יש להעביר את תיאור ה-SDP המקומי (באמצעות שירות אותות) אל העמיתים המרוחקים.
5. רישום event listener לאירועים 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. רישום event listener לאירועים icecandidate בRTCPeerConnection.
6. עבור כל icecandidate אירועים, יש להעביר אותו (באמצעות שירות אותות) אל העמיתים המרוחקים.
7. יש להמתין למועמדי ה-ICE המרוחקים שמגיעים משירות האותות ולהוסיף אותם באמצעות RTCPeerConnection.addIceCandidate()

האתגר עם ה-API הזה הוא שרוב הפעולות האלה הן אסינכרוניות, שלרוב הן מורכבות בפועל של יישום של WebRTC. פונקציות רבות מחזירות Promise שצריך לפתור אותן לפני שהשלב הבא בתהליך יכול להמשיך.

מומלץ להטמיע אפליקציה באמצעות ה-API הזה. המפתח צריך להשתמש ב-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
    });
}