从MediaStream创建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的媒体流没有与其相关联的音轨。当我查看我的音频元素时，即使它附带了Hls流，日志记录Audio.audioTracks也会返回未定义的，即使有一个音频播放流并由该音频元素控制。因此，从音频元素创建媒体流没有问题，这正是Hls.js将流附加到音频元素的方式。

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

Answer 1

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

请参阅：https://www.npmjs.com/package/wave-external-audio-context