音频流未添加到 html canvas

Question

我有一个在 p5 中创建的 html canvas，我想向它添加一个音轨，以便我可以使用 webrtc 连接流式传输它。我目前可以流式传输视觉效果，但不能流式传输音频。

我正在将音频流添加到我的 canvas，如下所示：

let canvasSource = document.getElementById('canvas-viz');

navigator.mediaDevices.getUserMedia({
      audio: true
    }).then(audioStream => {
      audioStream.getAudioTracks().forEach(
        track => { 
          canvasSource.captureStream().addTrack(track) 
        })
      console.log("canv source: ",canvasSource.captureStream().getAudioTracks()); // prints  []
    })

所以我的主要问题是，当我调用 canvasSource.captureStream().getAudioTracks() 时，我得到 []。所以似乎 addTrack 没有正常工作。我尝试在开发工具中调用 canvasSource.captureStream().getAudioTracks()，以防发生一些异步的傻事，然后再调用 []。我还在开发工具中尝试了以下内容：

audioTracks = audioStream.getAudioTracks();
canvasSource.captureStream().addTrack(audioTracks[0]);

但这也不起作用，在查看 getAudioTracks() 时返回 []。调用 audioStream.getAudioTracks() 时，我的麦克风输入流得到一个大小为 1 的数组。

我正在按照以下所示的方法进行操作：

我正在 Chrome 开发这个。出于我的目的，目前，它不需要在 Firefox 中交叉兼容。

Answer 1

canvasSource.captureStream() returns 每次调用 new MediaStream。您已将音轨添加到无法再访问的 MediaStream。
将 canvas MediaStream 存储在可在那里访问的变量中，并将曲目添加到该 MediaStream。

Answer 2

Kaiido 的解决方案应该有效。作为替代方案，我所做的只是用其他两个流中的曲目创建一个新的 MediaStream...

new MediaStream([
  canvasVideoTrack,
  audioTrack
]);

音频流未添加到 html canvas

audio stream not being added to html canvas

javascript

audio

canvas

audio-streaming