Cycle.js：獲取流，期待 Blob

Question

我正在嘗試創建記錄音頻流。 我正在從導航器mediaDevices.getUserMedia創建一個承諾流，然后將該流映射到媒體記錄器流。 最后我想用媒體記錄器流創建一個 blob 流。

我遇到的是 subscribe 函數中的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() 。