RTCPeerConnection
הוא הממשק המרכזי ב-WebRTC API. הוא מייצג את החיבור בין השותף המקומי לשותף המרוחק, ומספק את כל הפונקציות והאירועים הנדרשים כדי ליצור את החיבור.
יצירת חיבור בין עמיתים
אפליקציות שמטמיעות את הפונקציונליות של WebRTC בדרך כלל מסתמכות במידה רבה על הממשק RTCPeerConnection
. מצד מבצע הקריאה החוזרת (כלומר, הצד שמתחיל את החיבור), התהליך ליצירת חיבור הוא בדרך כלל:
- יוצרים מכונה חדשה של
RTCPeerConnection
עם ההגדרות המתאימות של ICE. - יוצרים תיאור SDP מקומי באמצעות
RTCPeerConnection.createOffer()
. - מגדירים את תיאור ה-SDP המקומי באמצעות
RTCPeerConnection.setLocalDescription()
. - מעבירים (באמצעות שירות איתות) את תיאור ה-SDP המקומי לשותף המרוחק.
- רושמים מעבד אירועים לאירועי
icecandidate
ב-RTCPeerConnection
. - לכל אירוע
icecandidate
, מעבירים אותו (באמצעות שירות איתות) לשותף המרוחק. - ממתינים לתיאור SDP מרוחק נכנס משירות האותות ומגדירים אותו באמצעות
RTCPeerConnection.setRemoteDescription()
. - ממתינים לקבלת מועמדים מרוחקים ל-ICE משירות האותות ומוסיפים אותם באמצעות
RTCPeerConnection.addIceCandidate()
בצד הקריאה, התהליך שונה במקצת.
- יוצרים מכונה חדשה של
RTCPeerConnection
עם ההגדרות המתאימות של ICE. - ממתינים לתיאור SDP מרוחק נכנס משירות האותות ומגדירים אותו באמצעות
RTCPeerConnection.setRemoteDescription()
. - יוצרים תשובה לתיאור ה-SDP המרוחק באמצעות קריאה ל-
RTCPeerConnection.createAnswer()
. - העברת התשובה (באמצעות שירות איתות) לשותף הרחוק.
- רושמים מעבד אירועים לאירועי
icecandidate
ב-RTCPeerConnection
. - לכל אירוע
icecandidate
, מעבירים אותו (באמצעות שירות איתות) לשותף המרוחק. - ממתינים לקבלת מועמדים מרוחקים ל-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
});
}