Cycle.js：获取流，期待 Blob

Question

我正在尝试创建录制音频流。我正在从导航器 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()
  }
})

Answer 1

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

Cycle.js：获取流，期待 Blob

Cycle.js: Getting Stream, Expecting Blob

cyclejs

xstream-js