node.js - 可以同时使用 getUserMedia 和 getDisplayMedia

标签 node.js reactjs webrtc

我想合并 getUserMedia 和 getDisplayMedia 流。我正在使用 MediaRecorder。当我从 getUserMedia 切换到 getDisplayMedia 然后 MediaRecorder 录制视频直到我不切换到 getDisplayMedia 时。然后 getDisplayMedia 产生自己的流,当我合并两个流时得到损坏的 mp4 视频。

最佳答案

启动两个不同的流并将音轨添加到来自 getDisplayMedia 的视频中,如下所示:

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

关于node.js - 可以同时使用 getUserMedia 和 getDisplayMedia,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62792024/

相关文章:

node.js - 如何通过id将新对象添加到mongoDB集合中?

javascript - 参数在 RN typescript 中隐式具有任何类型

javascript - 找不到变量 : _objectSpread

java - 使用 WebSockets 实现 WebRTC 信令

javascript - 如何以 angularjs 方式将视频的 src 更改为 blob?

javascript - 带有 If-Match header 的 Node.js PATCH 请求

css - 如何为 MUI TextField 赋予条件样式?

javascript - 如何在 ReactJS 中指定 null prop 类型?

swift - TokBox视频位置

javascript - JavaScript 中的完全限定名称