这个问题已经有答案了：
Getting empty blob from MediaRecorder when Web Audio API is silent（1个答案）
3天前关闭。
我正在创建一个简单的“记录我的屏幕”应用程序。
一切正常，直到我想添加能够激活麦克风后，录音已经开始的功能。
这可以使用 AudioDestination 作为代理：
const fullStream = new MediaStream();
const audioCtx = new AudioContext();
const audioDestination = audioCtx.createMediaStreamDestination();
const fullAudioTrack = audioDestination.stream.getAudioTracks()[0];
fullStream.addTrack(fullAudioTrack);
const mediaRecorder = new MediaRecorder(fullStream);
mediaRecorder.start();之后我们可以做：
const micStream =
await navigator.mediaDevices.getUserMedia({
video: false,
audio: true
});
const micSource = audioCtx.createMediaStreamSource(micStream);
micSource.connect(audioDestination);这在Firefox中很好用，但在Chrome中不行。
在Chrome（v116.0.5845.187）中，如果我在 AudioDestination 尚未连接任何 * 源 * 的情况下启动 MediaRecorder，则视频无法正常录制。例如，如果我记录10秒，只记录几秒。如果我在录音过程中激活麦克风，只有麦克风激活的部分被记录下来。
工作示例：
const videoElement = document.querySelector("#video-wrapper video");
async function record() {
const fullStream = new MediaStream();
// Add track for fullAudio
const audioCtx = new AudioContext();
const audioDestination = audioCtx.createMediaStreamDestination();
const fullAudioTrack = audioDestination.stream.getAudioTracks()[0];
fullStream.addTrack(fullAudioTrack);
// Getting screenStream
const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
fullStream.addTrack(screenStream.getVideoTracks()[0]);
// Getting micStream
const micStream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true });
const micSource = audioCtx.createMediaStreamSource(micStream);
// micSource.connect(audioDestination); // If I un-comment this line, the recording is made properly. But this connection has to be made after
// Play realtime stream
videoElement.srcObject = fullStream;
videoElement.play();
// Set up MediaRecorder
const recordedChunks = [];
const mediaRecorder = new MediaRecorder(fullStream, { mimeType: "video/webm" });
mediaRecorder.ondataavailable = (event) => {
recordedChunks.push(event.data);
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: "video/webm" });
// Play recorded blob
playBlob(blob);
};
mediaRecorder.start();
// Stop MediaRecorder after 10 seconds
setTimeout(() => {
mediaRecorder.stop();
}, 10000);
}
function playBlob(blob) {
const videoURL = window.URL.createObjectURL(blob);
videoElement.pause();
videoElement.srcObject = null;
videoElement.src = videoURL;
videoElement.muted = false;
videoElement.play();
}
document.querySelector("#record-button").addEventListener("click", () => {
record();
document.querySelector("#record-button").setAttribute("disabled", true);
});#video-wrapper {
position: relative;
width: 500px;
}
#video-wrapper video {
width: 100% !important;
height: auto !important;
}<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Testing MediaRecorder</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="video-wrapper">
<video controls></video>
</div>
<button id="record-button">Record</button>
</body>
<script src="./script.js"></script>
</html>该代码段未得到应有的许可。在CodePen中尝试更具交互性的版本：
在点击“开始录音”之前，只要连接好麦克风。录音做得很好。任何其他组合在Chrome中都失败。但在Firefox中工作。
1条答案
按热度按时间sxissh061#
我找到了一个解决办法，将一个静音音轨附加到AudioDestination。所以总是有一个音轨。
这可以通过为增益设置为0的GainNode创建振荡器来完成，并将此GainNode连接到目标流。
Source