使用 HtmlMediaElement.captureStream() 从视频中获取音频答案

【问题标题】：Using HtmlMediaElement.captureStream() to get the audio from a video使用 HtmlMediaElement.captureStream() 从视频中获取音频
【发布时间】：2021-05-11 18:25:10
【问题描述】：

我正在尝试从视频中捕获音轨并单独播放。我写了如下所示的测试页面。我能够捕获流，并且我得到了一个带有 readyState == "live" 的有效音轨，但我什么也没听到。我做错了什么？

我使用的视频来自这里：http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4。我在本地提供 HTML 和视频以避免 CORS 问题。

<head>
<script>
function captureAudio() {
 const videoEl = document.getElementById("video")
 videoEl.volume = 0.0
 
 const videoStream = videoEl.captureStream()
 const audioTrack = videoStream.getAudioTracks()[0]

 const audioStream = new MediaStream()
 audioStream.addTrack(audioTrack)

 const audioEl = document.createElement("audio")
 audioEl.srcObject = audioStream
 audioEl.autostart = true
 audioEl.volume = 1.0
 audioEl.muted = false
}
</script>
<body>
<video id="video" src="http://localhost:3000/BigBuckBunny.mp4" controls onplay="captureAudio()" />
</body>
</html>

【问题讨论】：

这是一个错误，由bugs.chromium.org/p/chromium/issues/detail?id=764133#c17 引起，我在此留言让他们知道。您的确切用例是什么？您是否仅使用该视频来捕获其中的音频？在这种情况下，AudioContext.decodeAudioData 可能是一个替代方案。
@Kaiido 感谢您的信息。我确实需要显示视频。我的用例是另一个铬问题的解决方法，bugs.chromium.org/p/chromium/issues/detail?id=687574。为了获得视频的回声消除，我捕获了音频并将其通过本地 WebRTC 循环传输。这在我使用 Shaka Player 或 hls.js 时效果很好，但我正在寻找使用普通视频元素时的解决方案。
我不打算完全遵循...您正试图让 AEC 处理从

标签： javascript video mediaelement

【解决方案1】：

如果您设置的音量与 0 不同（例如，0.5），它会起作用。我已修改您的代码并将其托管on Glitch。当您暂停 audio（我已附加到 DOM，以便您可以与之交互）时，您可以清楚地听到不同的声音来源，一种来自 video，另一种来自audio。

<html>
  <head>
    <script>
      function captureAudio() {
        const videoEl = document.getElementById("video");
        videoEl.volume = 0.5;

        const videoStream = videoEl.captureStream();
        const audioTrack = videoStream.getAudioTracks()[0];

        const audioStream = new MediaStream();
        audioStream.addTrack(audioTrack);

        const audioEl = document.createElement("audio");
        audioEl.controls = true;
        document.body.append(audioEl);
        audioEl.srcObject = audioStream;
        audioEl.play();
        audioEl.volume = 1.0;
        audioEl.muted = false;
      }
    </script>
  </head>
  <body>
    <video
      id="video"
      crossorigin
      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      controls
      onplay="captureAudio()"
    />
  </body>
</html>

【讨论】：

那么，如何将视频的音轨替换为我捕获和处理的音轨？是否有某种方法可以禁用未设置 volume = 0 或 muted = true 的视频元素的声音？
可能WebCodecs 可以让你到达那里，但我不是这方面的专家。