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

问题描述

我正在尝试从视频中捕获音轨并单独播放。我写了如下所示的测试页面。我能够捕获流,并通过 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>

解决方法

如果您设置的音量不同于 a(例如 0),它会起作用。我已修改您的代码并将其托管 on Glitch。当您暂停 0.5(我已将其附加到 DOM 以便您可以与它进行交互)时,您可以清楚地听到不同的声音来源,一种来自 audio,另一种来自 {{1 }}。

video

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...