实现:录制屏幕同时录制麦克风声音。
由于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