תחילת העבודה עם שידורים מרוחקים

אחרי ש-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;
});