在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)
}

我尝试使用AddTrack方法添加视频轨道在RemotepeerConnection上，

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' });
            }
        });
    }