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

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

יצירת חיבור בין עמיתים

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

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

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

מומלץ למפתחים להשתמש ב-async וב-await במקום לרשום מאזינים (באמצעות Promise.then()) כשמטמיעים אפליקציה באמצעות ה-API הזה, כי כך קל יותר לעקוב אחרי הקוד. דוגמה:

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
    });
}