如何解决音频流未添加到 html 画布
我有一个在 p5 中创建的 html 画布,我想向其中添加一个音轨,以便我可以使用 webrtc 连接对其进行流式传输。我目前可以流式传输视觉效果,但不能流式传输音频。
我将音频流添加到我的画布中,如下所示:
let canvasSource = document.getElementById('canvas-viz');
navigator.mediaDevices.getUserMedia({
audio: true
}).then(audioStream => {
audioStream.getAudioTracks().forEach(
track => {
canvasSource.captureStream().addTrack(track)
})
console.log("canv source: ",canvasSource.captureStream().getAudioTracks()); // prints []
})
所以我的主要问题是当我调用 canvasSource.captureStream().getAudioTracks()
时,我得到 []
。所以看起来 addTrack
不能正常工作。我尝试在开发工具中调用 canvasSource.captureStream().getAudioTracks()
,以防发生一些异步傻瓜,然后转到 []
。我还在开发工具中尝试了以下内容:
audioTracks = audioStream.getAudioTracks();
canvasSource.captureStream().addTrack(audioTracks[0]);
但这也不起作用,在查看 []
时返回 getAudioTracks()
。调用 audioStream.getAudioTracks()
时,我的麦克风输入流得到一个大小为 1 的数组。
我遵循了如下所示的方法: how to add a audio stream on canvas stream in webrtc
我正在 Chrome 中开发这个。就我而言,目前它不需要在 Firefox 中交叉兼容。
解决方法
canvasSource.captureStream()
在每次调用时返回一个 new MediaStream。您已将音轨添加到无法再访问的 MediaStream。
将画布 MediaStream 存储在可访问的变量中,并将轨道添加到该 MediaStream。
Kaiido 的解决方案应该有效。作为替代方案,我所做的只是创建一个新的 MediaStream,其中包含来自其他两个流的曲目...
new MediaStream([
canvasVideoTrack,audioTrack
]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。