Cycle.js: Getting Stream, Expecting Blob

Question

I'm trying to create a record audio stream. I'm creating a promise stream from navigator mediaDevices.getUserMedia then mapping that stream to a media recorder stream. Finally I want to create a blob stream with the media recorder stream.

What I'm running into is that the blob variable in the subscribe function is a stream not a blob.

What is the correct way to take the results from addEventListener and turn it into a stream of blobs?

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

Your approach is almost correct, including the xs.create, but if you map to a stream you now have a stream of streams of events. To get a normal stream of events out, just add .flatten() after the map.