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

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()

האתגר של ה-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
    });
}