从 Hls.js 创建 MediaStream

Question

我有一个 HLS 流，我使用 Hls.js library. I want to then take that stream and feed it into Wave.js 附加到音频元素。我想使用 fromStream 方法而不是 fromElement 来构造音频波形可视化器，这样我就可以将可选的 connectDestination 参数设置为 false。

为了创建馈送到 Wave.fromStream() 构造函数的媒体流，我正在关注 this example，它展示了如何使用 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 returns 未定义，即使有一个音频流正在播放并由该音频元素控制。因此，从音频元素创建媒体流没有问题，这就是 Hls.js 将流附加到音频元素的方式。

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

Answer 1

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

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

从 Hls.js 创建 MediaStream

Create MediaStream from Hls.js

javascript

typescript

html5-audio

http-live-streaming

hls.js