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

เมื่อ 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 ด้านของการเชื่อมต่อแบบ Peer แต่โดยทั่วไปแล้วรหัส MediaStreamTrack จะไม่ตรงกัน

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

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