can be use getUserMedia and getDisplayMedia simultaneously

Question

i want to merge getUserMedia and getDisplayMedia stream. i am using MediaRecorder. when i switch from getUserMedia to getDisplayMedia then MediaRecorder Record video till I am not switching to getDisplayMedia.then getDisplayMedia produces its own stream and when i merge both stream get Corrupted mp4 video.

Answer 1

Start two different streams and add the audio track to the video from getDisplayMedia just like shown below :

    async function startRecording() {
    videoStream = await navigator.mediaDevices.getDisplayMedia({
        video: {MediaSource: "screen"},
    });

    audioStream = await navigator.mediaDevices.getUserMedia({
        audio: {
            sampleSize: 100,
            frameRate: { max: 30 },
            noiseSuppression: true,
            echoCancellation: true,
            channelCount: 2
        }
    });

    var audioTrack = audioStream.getAudioTracks()[0];

    videoStream.addTrack(audioTrack);

    recorder = new MediaRecorder(videoStream);

    const chunks = [];
    recorder.ondataavailable = (e) => chunks.push(e.data);
    recorder.onstop = (e) => {
        const completeBlob = new Blob(chunks, { type: "video/mp4" });
        videoFile = new File([completeBlob], "recording.mp4");
        console.log(videoFile);

        console.log(completeBlob);
        vimeoCall(videoFile);
    };

    recorder.start();
}