我正在使用
MediaRecorder
JS 类将动画画布 (WebGL) 和 Web 音频 API 输出一起录制为视频。如果正在播放某些音频,一切都会按预期工作,但如果没有播放,那么在停止 MediaRecorder
实例时我会得到空的斑点。
以下是我的代码的一部分:
const chunks = [];
var recorder = null, captureStream = null;
function dataAvailable(event) {
chunks.push(event.data);
}
function startCapture() {
const streamDestination = audio.context.createMediaStreamDestination();
masterGain.connect(streamDestination);
captureStream = canvas.captureStream();
// This line adds audio to the recording if audio is playing
// but if audio isn't playing at the moment, I get empty chunks
// at the end of recording
captureStream.addTrack(streamDestination.stream.getAudioTracks()[0]);
recorder = new MediaRecorder(captureStream);
recorder.ondataavailable = dataAvailable;
recorder.onstop = exportVideo;
recorder.start();
}
function exportVideo() {
// Here chunks will be empty if Web Audio API
// didn't played anything during recording
new Blob(chunks, {'type': 'video/webm'});
...
}
网络音频无声时如何正确录音?
在 Windows 10 上使用 Chrome v92。
我相信这是我一个月前打开的https://crbug.com/1223382,但从那时起它就没有太大的吸引力。
基本上,他们在处理静音曲目时仍然遇到很多麻烦。
作为解决方法,您可以通过将振荡器连接到增益设置为
GainNode
的 0
,并将此 GainNode
连接到您的目标流来强制轨道永远不会静音。
const streamDestination = audio.context.createMediaStreamDestination();
const osc = audio.context.createOscillator();
const gainNode = audio.context.createGain();
gainNode.gain.value = 0;
osc.connect(gainNode);
gainNode.connect(streamDestination);
osc.start(0);
// then your current code
masterGain.connect(streamDestination);
captureStream = canvas.captureStream();
...
摆弄这个片段,修复错误报告中的重现案例。
注意事项:
Ps:您可能还想在
MediaRecorder.start(timeslice)
中传递一个(相对较小的)时间片来解决这个其他相关错误,如果由于某种原因您的画布或音频流之一被静音(例如,如果您停止在画布上绘画超过 5 秒)。