जब कोई 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
को किसी रिमोट पीयर से कनेक्ट करने से पहले ही उसमें ट्रैक जोड़े जा सकते हैं. इसलिए, कनेक्शन पूरा होने का इंतज़ार करने के बजाय, इस सेटअप को जल्द से जल्द पूरा करना बेहतर होता है.
रिमोट ट्रैक जोड़ना
दूसरे पीयर ने जो रिमोट ट्रैक जोड़े हैं उन्हें पाने के लिए, हम track
इवेंट के लिए, लोकल RTCPeerConnection
पर एक लिसनर रजिस्टर करते हैं. RTCTrackEvent
में MediaStream
ऑब्जेक्ट का एक कलेक्शन होता है. इन ऑब्जेक्ट की MediaStream.id
वैल्यू, पीयर की उसी लोकल स्ट्रीम की वैल्यू जैसी होती है. हमारे उदाहरण में, हर ट्रैक सिर्फ़ एक स्ट्रीम से जुड़ा है.
ध्यान दें कि MediaStream
आईडी, पीयर कनेक्शन के दोनों तरफ़ मैच करते हैं, लेकिन आम तौर पर MediaStreamTrack
आईडी ऐसा नहीं करते.
const remoteVideo = document.querySelector('#remoteVideo');
peerConnection.addEventListener('track', async (event) => {
const [remoteStream] = event.streams;
remoteVideo.srcObject = remoteStream;
});