Bắt đầu sử dụng tính năng phát trực tiếp từ xa

Sau khi kết nối RTCPeerConnection với một ứng dụng ngang hàng từ xa, bạn có thể phát trực tuyến âm thanh và video giữa các ứng dụng đó. Đây là điểm mà chúng tôi kết nối luồng chúng tôi nhận được từ getUserMedia() đến RTCPeerConnection. Một luồng nội dung nghe nhìn bao gồm ít nhất một bản nhạc đa phương tiện và những mục này được thêm riêng lẻ vào RTCPeerConnection khi chúng tôi muốn truyền nội dung nghe nhìn đó đến ứng dụng ngang hàng từ xa.

const localStream = await getUserMedia({video: true, audio: true});
const peerConnection = new RTCPeerConnection(iceConfig);
localStream.getTracks().forEach(track => {
    peerConnection.addTrack(track, localStream);
});

Bạn có thể thêm bản nhạc vào RTCPeerConnection trước khi kết nối với một ứng dụng ngang hàng từ xa, vì vậy, bạn nên thực hiện thiết lập này càng sớm càng tốt thay vì đợi kết nối hoàn tất.

Thêm bản nhạc từ xa

Để nhận được các bản nhạc từ xa do bên kia cung cấp, chúng tôi đăng ký một người nghe trên RTCPeerConnection địa phương để theo dõi sự kiện track. RTCTrackEvent chứa một mảng các đối tượng MediaStream có cùng giá trị MediaStream.id giống như các luồng cục bộ tương ứng của luồng ngang hàng. Trong ví dụ của chúng tôi, mỗi bản nhạc chỉ được liên kết với một luồng duy nhất.

Xin lưu ý rằng mặc dù mã nhận dạng MediaStream khớp với cả hai bên của đường kết nối ngang hàng, nhưng mã nhận dạng MediaStreamTrack thường không đúng.

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

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