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