אחרי ש-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
לפני שהוא מתחבר לשותף מרוחק, לכן מומלץ לבצע את ההגדרה הזו מוקדם ככל האפשר במקום להמתין להשלמת החיבור.
הוספת רצועות מרחוק
כדי לקבל את הטראקים מרחוק שנוספו על ידי השותף השני, אנחנו רושמים listener ב-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;
});