在 WebRTC (peerjs) 通话中添加新媒体流

Question

我正在使用peerjs库制作一个WebRTC视频通话应用程序，每个对等方都可以选择使用哪个流来开始通话，所以我有两个流音频和视频流：

const peer = new Peer()
let remotePeerConnection = null
let audioStream;
let videoStream;
try{
    audioStream = await navigator.mediaDevices.getUserMedia({audio:true})
}
catch(err){
    audioStream = null;
}
try{
    videoStream = await navigator.mediaDevices.getUserMedia({video:true})
}
catch(err){
    videoStream = null;
}

然后我将它们混合在一起

let mixedStream = new MediaStream()
if(audioStream){
   mixedStream.addTrack(audioStream.getAudioTracks()[0])
}
if(videoStream){
   mixedStream.addTrack(videoStream.getVideoTracks()[0])
}
const myVideo = document.getElementById("my-video")
myVideo.srcObject = mixedStream
myVideo.play()

我有一个调用函数可以使用混合流调用其他对等点，该混合流可以只是视频流或音频流或两者，

const call = (peerID) => {
    const call = peer.call(peerID,mixedStream)
    remotePeerConnection = call.peerConnection
    call.on("stream",remoteStream=>{
        const remoteVideo = document.getElementById("remote-video")
        remoteVideo .srcObject = remoteStream
        remoteVideo .play()
    })
}

问题是，如果我想仅使用音频流开始通话，因此混合流仅在开头添加音轨，然后如果我想将视频流添加到通话中，我该怎么做呢？明确不替换现有流，我已经知道，这有点像这个例子：

// assume videoTrack is come from what ever
const sender = remotePeerConnection.getSenders().find(s=>s.track.kind === "video")
if(sender){
   sender.replaceTrack(videoTrack)
}

我尝试在remotePeerConnection上使用addTrack方法添加视频轨道

try{
    videoStream = await navigator.mediaDevices.getDisplayMedia({video:true})
}
catch(err){
   console.log(err)
}
if(videoStream){
    const videoTrack = videoStream.getVideoTracks()[0]
    remotePeerConnection.addTrack(videoTrack)
}

但它似乎不起作用，我怎么能在不关闭呼叫并使用新的混合流重新呼叫的情况下做到这一点。

Answer 1

    // Create a Peer object
    const peer = new Peer({ key: 'your-peerjs-key' });

    // Display the peer ID when it's open
    peer.on('open', (id) => {
        console.log('My peer ID is: ' + id);
    });

    // Handling incoming connections
    peer.on('connection', (conn) => {
        console.log('Incoming connection from ' + conn.peer);

        // Listen for data (you can handle media stream here)
        conn.on('data', (data) => {
            console.log('Received data:', data);
        });
    });

    // Handling errors
    peer.on('error', (err) => {
        console.error(err);
    });

    // Connect to a peer
    function connectToPeer() {
        const remotePeerId = document.getElementById('remotePeerId').value;
        const conn = peer.connect(remotePeerId);

        // Handle the connection
        conn.on('open', () => {
            console.log('Connected to ' + remotePeerId);

            // Check if the local user has a media stream
            const hasMediaStream = true; // Set to true if you have a media stream, false otherwise

            if (hasMediaStream) {
                // You can add your media stream handling here
                navigator.mediaDevices.getUserMedia({ video: true, audio: true })
                    .then((stream) => {
                        // Send the media stream to the remote peer
                        conn.send({ type: 'mediaStream', stream: stream });
                    })
                    .catch((error) => {
                        console.error('Error getting media stream:', error);
                    });
            } else {
                // Send a message indicating that no media stream is available
                conn.send({ type: 'noMediaStream' });
            }
        });
    }