Javascript 使用HtmlMediaElement.captureStream（）从视频中获取音频_Javascript_Video_Mediaelement

Javascript 使用HtmlMediaElement.captureStream（）从视频中获取音频

javascript video

Javascript 使用HtmlMediaElement.captureStream（）从视频中获取音频,javascript,video,mediaelement,Javascript,Video,Mediaelement,我正在尝试从视频中捕获音频曲目并单独播放。我编写了如下所示的测试页面。我能够捕获流，并获得readyState==“live”的有效音频曲目，但我什么也没听到。我做错了什么我使用的视频来自这里：。我在本地提供HTML和视频，以避免CORS问题 <head> <script> function captureAudio() { const videoEl = document.getElementById("video") videoEl.volu

我正在尝试从视频中捕获音频曲目并单独播放。我编写了如下所示的测试页面。我能够捕获流，并获得readyState==“live”的有效音频曲目，但我什么也没听到。我做错了什么

我使用的视频来自这里：。我在本地提供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>


函数captureAudio（）{
const videoEl=document.getElementById（“视频”）
videoEl.volume=0.0
const videoStream=videoEl.captureStream（）
const audioTrack=videoStream.getAudioTracks（）[0]
const audioStream=新媒体流（）
audioStream.addTrack（audioTrack）
const audioEl=document.createElement（“音频”）
audioEl.srcObject=音频流
audioEl.autostart=true
audioEl.volume=1.0
audioEl.muted=false
}

如果您设置的音量不同于

（例如，

0.5

）。我已经修改了你的代码并托管了它。当您暂停

音频

（我已连接到DOM以便您可以与之交互）时，您可以清楚地听到不同的声音源，一个来自

视频

，另一个来自

音频


函数captureAudio（）{
const videoEl=document.getElementById（“视频”）；
videoEl.volume=0.5；
const videoStream=videoEl.captureStream（）；
const audioTrack=videoStream.getAudioTracks（）[0]；
const audioStream=新媒体流（）；
audioStream.addTrack（audioTrack）；
const audioEl=document.createElement（“音频”）；
audioEl.controls=true；
文件.正文.附件（audioEl）；
audioEl.srcObject=音频流；
audioEl.play（）；
audioEl.volume=1.0；
audioEl.muted=假；
}

这是一个bug，是我在那里留下评论让他们知道的。您的确切用例是什么？您是否仅使用该视频捕获其中的音频？在这种情况下，AudioContext.decodeAudioData可能是另一种选择。@Kaido感谢您提供的信息。我确实需要播放视频。我的用例是另一个铬问题的解决方法。为了获得视频的回声消除，我捕获音频并通过本地WebRTC循环进行传输。当我使用Shaka Player或hls.js时，这很好，但当我使用普通视频元素时，我正在寻找解决方案。我不想完全遵循。。。您正在尝试让AEC处理从中读取的媒体？我可以从该元素中获取WebRTC循环流，同时使原始元素不发出声音，但我认为您无法在这首曲目上应用回声消除，似乎他们只接受口香糖捕获的曲目。那么，我如何用捕获并处理的曲目替换视频的音频曲目呢？有没有什么方法可以禁用未设置音量为0或静音为true的视频元素的声音？也许可以帮你做到这一点，但我不是这方面的专家。