เริ่มต้นใช้งานสตรีมระยะไกล

เมื่อเชื่อมต่อ RTCPeerConnection กับเครื่องระยะไกลแล้ว คุณจะทำสิ่งต่อไปนี้ได้ สตรีมเสียงและวิดีโอระหว่างไฟล์ทั้งสอง นี่คือจุดที่เราเชื่อมต่อ สตรีมที่เราได้รับจาก getUserMedia() ไปยัง RTCPeerConnection สื่อ สตรีมประกอบด้วยแทร็กสื่ออย่างน้อย 1 แทร็ก และจะเพิ่มแทร็กเหล่านี้ทีละรายการ ไปยัง 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 จะตรงกันทั้ง 2 ฝั่งของการเชื่อมต่อเพียร์ ซึ่งจะไม่เป็นความจริงสำหรับรหัส MediaStreamTrack

const remoteVideo = document.querySelector('#remoteVideo');

peerConnection.addEventListener('track', async (event) => {
    const [remoteStream] = event.streams;
    remoteVideo.srcObject = remoteStream;
});