Adding a new Media Stream in mid of a call in WebRTC (peerjs)

Question

I am making a WebRTC video call application using peerjs library and every peer can chose what stream to start the call with, so I have two streams audio and video stream:

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

And then I mix them together

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()

and I have a call function to call other peer with the mixed stream which can be only video stream or only audio stream or both,

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

the question is if I want to start the call with only audio stream so the mixed stream only has an audio tracks added at the beginning, and then if I want to add video stream to the call How could I do that , to be more clear not replacing an existing stream which I already know, Which kinda looks like this example :

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

I tried adding the video track using addTrack method on the remotePeerConnection

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

but it does not seem to work, how could I do that without closing the call and re-call with a new mixed stream.

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