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

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

יצירת חיבור עם אפליקציות להשוואה

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

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

כאשר מטמיעים אפליקציה באמצעות ה-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
    });
}