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



我正在尝试从视频中捕获音轨并单独播放。我写了下面的测试页面。我能够捕获流,并且我用readyState="获得有效的音轨;活";,但我什么也没听到。我做错了什么?

我使用的视频来自这里: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>

如果您设置的卷不同于0(例如,0.5(,则会起作用。我已经修改了你的代码,并在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>

最新更新