javascript - 使用 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>
解决方案
如果您设置的音量不同于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>
推荐阅读
- mongodb - 根据每日数据查询mongodb中满足某个条件的定长周期
- python - 通过 Python 中的 Gmail API 获取给定日期之间的电子邮件列表(发件人的电子邮件、主题和正文)
- chart.js - 如何制作多个水平条形图js
- javascript - 我正在处理 JavaScript 日期,我坚持将月份转换为周开始日期和结束日期
- c++ - 在 VSCODE 上打开/更新 CGI 文件(用 C++ 编写)
- azure - 已达到表单识别器用户的限制?
- javascript - javascript有没有办法确定以前的浏览器历史记录项是否在我的域中?
- search - 递归查找具有特定文件扩展名和内容的文件
- recursion - 如何在 django rest API 中将一个简单的函数更改为递归函数
- linux - 使用 execvp 将命令行参数读取为命令错误