Create MediaStream from Hls.js

Question

我有一个HLS流，我使用HLS .js库将其附加到音频元素。然后我想把这个流输入到Wave.js中。我想使用fromStream方法来构建音频波形可视化器，而不是fromElement，这样我就可以将可选的connectDestination参数设置为false。

为了创建提供给Wave.fromStream()构造函数的媒体流，我遵循这个示例，该示例展示了如何使用captureStream()来镜像音频或视频元素的播放。我捕获流的实现如下:

let audio = this.audioPlayer.nativeElement;
let stream;
if (audio.captureStream) {
stream = audio.captureStream();
} else if (audio.mozCaptureStream) {
stream = audio.mozCaptureStream();
} else {
console.error('Stream capture is not supported');
stream = null;
}

然后将流传递给Wave.fromStream()。

不幸的是，当Wave.fromStream()被执行时，我得到了以下错误:

core.js:6498 ERROR DOMException: Failed to execute 'createMediaStreamSource' on 'AudioContext': MediaStream has no audio track

这意味着传入Wave.fromStream的媒体流没有与之关联的音轨。当我查看我的audio元素时，即使附带了Hls流，也会记录音频。audioTracks返回undefined，即使有一个音频流在播放，并且被那个音频元素控制。因此，从音频元素创建媒体流没有问题，这只是Hls.js如何将流附加到音频元素。

是否有另一种方法从Hls.js创建的Hls流创建媒体流对象?

Answer 1

我找到了一个解决问题的方法，这是创建我自己的自定义版本的@foobar404/wave npm包，并修改它以接受输入参数，这是一个预先存在的音频上下文和上下文中的最终节点。这意味着我可以将波形连接到音频上下文中的最终节点，而无需将波形连接到音频上下文目的地或源，这是我的错误来自何处。

见:https://www.npmjs.com/package/wave-external-audio-context