0

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()
  }
})
bloodyKnuckles
  • 11,551
  • 3
  • 29
  • 37
PAT-O-MATION
  • 1,907
  • 1
  • 20
  • 20

1 Answers1

2

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.

Jan van Brügge
  • 742
  • 8
  • 13
  • Thank you Jan van Brügge. Adding ```flatten()``` onto the ```map``` makes sense. I was getting a stream of streams. I missed that in the documentation. I guess I didn't understand what I was getting from the blob stream. Thanks again! – PAT-O-MATION Jan 29 '20 at 12:17