stream.addTrack 在 Firefox 中工作但不在 Chrome

Question

我在为我兄弟的公司工作的一个项目中遇到问题，想看看是否有人对如何解决它有任何想法。

公司为企业活动、非营利组织等举办虚拟会议，人们需要 pre-record 使用 powerpoint 幻灯片进行演示，这与这些事情很常见。对于 non-tech 精明的客户（这是他们的大多数客户），实现这一目标的唯一方法是聘请承包商与客户一对一地合作，以录制他们的视频。我的目标是建立一个网站，客户可以轻松地自己录制视频和幻灯片，这将大大降低他们的成本。

它仍在进行中，但我目前拥有的是住在这里：https://ezav-redesign-hf4d3.ondigitalocean.app/

问题是，虽然录音功能在 Firefox 上运行良好，但在 Chrome 上它总是没有音频结束。你可以在现场看到完整的源代码，但这里是我认为应该是相关的部分：

const video = document.createElement("video");
video.muted = true;
video.srcObject = stream;
video.play();
function update() {
ctx.drawImage(video, 300, 0, 720, 720, 1547, 297, 357, 355);
ctx.drawImage(
presentationCanvas,
0,
0,
presentationCanvas.width,
presentationCanvas.height,
20,
125,
presentationCanvas.width * 0.754,
presentationCanvas.height * 0.745
);
requestAnimationFrame(update); // wait for the browser to be ready to present another animation fram.
}
video.addEventListener("loadeddata", function () {
update(); //Start rendering
});
/* RECORDING */
const recStream = canvas.captureStream(30);
var audioCtx = new AudioContext();
// create a stream from our AudioContext
var dest = audioCtx.createMediaStreamDestination();
audioStream = dest.stream;
// connect our video element's output to the stream
var sourceNode = audioCtx.createMediaElementSource(video);
sourceNode.connect(dest);
recStream.addTrack(audioStream.getAudioTracks()[0]);

我周末的大部分时间都在谷歌上搜索和修补，试图解决这个问题，并在 3 台不同的机器上对其进行了测试，但我似乎无处可去。由于控制台没有显示任何错误，我不确定如何准确指出它出错的地方。任何想法将不胜感激。谢谢！

Answer 1

这是 Chrome 中已知的 bug/limitation，他们根本不再将静音 MediaElements 的音频流传递给图表。

幸运的是，在您的情况下，您似乎完全不需要通过 MediaElement，因为您可以访问原始 MediaStream。所以你所要做的就是完全摆脱 AudioContext 部分，然后做

stream.getAudioTracks().forEach( (track) => recStream.addTrack( track ) );

stream.addTrack 在 Firefox 中工作但不在 Chrome

stream.addTrack working in Firefox but not Chrome

javascript

html5-canvas

webrtc

mediastream

web-audio-api