0

我正在尝试创建记录音频流。我正在从导航器创建一个承诺流，mediaDevices.getUserMedia然后将该流映射到媒体记录器流。最后，我想用媒体记录器流创建一个 blob 流。

我blob遇到的是订阅函数中的变量是流而不是blob。

从中获取结果addEventListener并将其转换为 blob 流的正确方法是什么？

const mediaSource$ = xs.fromPromise(
  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
)

const mediaRecorder$ = mediaSource$
  .map( mediaSource => {
    const mediaRecorder = new window.MediaRecorder(
      mediaSource,
      {mimeType: 'audio/webm'}
    )
    return mediaRecorder
  })

const blob$ = mediaRecorder$
  .map( (mediaRecorder) =>
    xs.create({
      start: (listener) => {
        mediaRecorder.addEventListener('dataavailable', (e) => {
          console.log('Data Available', e.data)
           listener.next(e.data)
        })
      },
      stop: () => {}
    })
  )


xs.combine(action$, mediaRecorder$, blob$).subscribe({
  next: ([action, mediaRecorder, blob]: [any, any, any]) => {

    console.log('BOLB', blob); // getting a stream, not a blob

    if(action.key === 'start_recording') mediaRecorder.start()
    if(action.key === 'stop_recording') mediaRecorder.stop()
  }
})
4

1 回答 1

2

您的方法几乎是正确的，包括 xs.create，但如果您map使用流，您现在拥有事件流。要获得正常的事件流，只需.flatten()在地图之后添加。

于 2020-01-29T07:36:48.707 回答