ברגע ש-RTCPeerConnection
מחובר לעמית מרוחק, ניתן
לשדר אודיו ווידאו ביניהם. זוהי הנקודה שבה אנחנו מחברים
את השידור שאנחנו מקבלים מ-getUserMedia()
אל RTCPeerConnection
. זרם
של מדיה מורכב ממסלול מדיה אחד לפחות, והשידורים האלה מתווספים אל RTCPeerConnection
בכל פעם שאנחנו רוצים לשדר את המדיה לשותף
מרוחק.
const localStream = await getUserMedia({video: true, audio: true});
const peerConnection = new RTCPeerConnection(iceConfig);
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
אפשר להוסיף טראקים ל-RTCPeerConnection
לפני שמתחברים לעמית מרחוק, לכן הגיוני לבצע את ההגדרה הזו בהקדם האפשרי במקום לחכות להשלמת החיבור.
הוספת טראקים מרחוק
כדי לקבל את הטראקים המרוחקים שנוספו על ידי אפליקציות דומות, אנחנו רושמים
מאזינים לאירוע RTCPeerConnection
המקומי ומאזינים לאירוע track
. השדה RTCTrackEvent
מכיל מערך של MediaStream
אובייקטים עם ערכי MediaStream.id
זהים לאלה של המקורות המקומיים המקבילים לעמיתים. בדוגמה שלנו, כל טראק משויך רק לשידור אחד.
חשוב לזכור ש-MediaStream
מזהים תואמים בשני צידי החיבור, אבל בדרך כלל זה לא נכון עבור MediaStreamTrack
.
const remoteVideo = document.querySelector('#remoteVideo');
peerConnection.addEventListener('track', async (event) => {
const [remoteStream] = event.streams;
remoteVideo.srcObject = remoteStream;
});