web前端视频、音频录制，navigator.mediaDevices.getUserMedia视频、音频合并

家电修理师

已于 2024-08-15 09:16:52 修改

阅读量477

点赞数 3

文章标签： javascript 开发语言 electron vue.js 音视频前端

于 2024-08-14 17:45:39 首次发布

本文链接：https://blog.youkuaiyun.com/zcc88999/article/details/141196419

版权

实现：录制屏幕同时录制麦克风声音。

由于electron录制的是屏幕所以不能使用一个getUserMedia()，如下同时开启video（配置）和audio的话应用会白屏，不清楚什么原因。audio：false的话正常，但是视频没有声音。

navigator.mediaDevices.getUserMedia({
    video: {
            chromeMediaSource: "desktop",
            chromeMediaSourceId: sourceId,
            maxWidth: window.screen.width,
            maxHeight: window.screen.height,
        },
    },
    audio : true
}),

所以只能通过两个getUserMedia（）来实现，一个录制视频，一个录制音频

navigator.mediaDevices.getUserMedia({
    video: {
            chromeMediaSource: "desktop",
            chromeMediaSourceId: sourceId,
            maxWidth: window.screen.width,
            maxHeight: window.screen.height,
        },
    },
})

navigator.mediaDevices.getUserMedia({
    audio : true
})

那么怎么把这两个合并到一块：请看代码

使用的是：electron应用端 vue2语言

// 使用Promise.all同时获取两种媒体
Promise.all([
    navigator.mediaDevices.getUserMedia({
        video: {
            //  你的录屏参数
            mandatory: {
                chromeMediaSource: "desktop",
                chromeMediaSourceId: sourceId,
                maxWidth: window.screen.width,
                maxHeight: window.screen.height,
             },
         },
    }),
    navigator.mediaDevices.getUserMedia({
        audio: true
    })
]).then(function(streams) {
    // streams 是一个包含两个媒体流的数组
    const [cameraStream, microphoneStream] = streams;
    const combinedStream = new MediaStream();
    // 将摄像头和麦克风的追踪器加入到合并的流中
    cameraStream.getTracks().forEach(track => combinedStream.addTrack(track));
    microphoneStream.getTracks().forEach(track => combinedStream.addTrack(track));
    // 使用合并的流进行录制
    var recorder = new MediaRecorder(combinedStream);
})

录制方法参考文档： RecordRTC: Home