我正在创建一个简单的“录制我的屏幕”应用程序。
一切工作正常，直到我想添加在录音开始后能够激活麦克风的功能。
可以使用 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) 中，如果我启动 MediaRecorder 而 AudioDestination 仍未连接任何 source，则视频无法正常录制。例如，如果我录制 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 中使用。
我找到了一种解决方法，将静音音轨附加到 AudioDestination。所以总是有一个音轨。
这可以通过为增益节点创建一个振荡器来完成，其增益为 设置为 0，并将此 GainNode 连接到您的目标流。
// Adding a silent audioTrack to overpass chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1490888
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0;
oscillator.connect(gainNode);
gainNode.connect(audioDestination);