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

由于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

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐