रिमोट स्ट्रीम की सुविधा का इस्तेमाल शुरू करना

जब कोई 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;
});