如何从浏览器到 S3 的 stream 麦克风音频

Question

I want to stream the microphone audio from the web browser to AWS S3. Got it working

this.recorder = new window.MediaRecorder(...);
this.recorder.addEventListener('dataavailable', (e) => {
  this.chunks.push(e.data);
});

and then when user clicks on stop upload the chunks new Blob(this.chunks, { type: 'audio/wav' }) as multiparts to AWS S3.

But the problem is if the recording is 2-3 hours longer then it might take exceptionally longer and user might close the browser before waiting for the recording to complete uploading.

Is there a way we can stream the web audio directly to S3 while it's going on?

Things I tried but can't get a working example:

1. Kineses video streams, looks like it's only for real time streaming between multiple clients and I have to write my own client which will then save it to S3.
2. Thought to use kinesis data firehose but couldn't find any client data producer from brower.
3. Even tried to find any resource using aws lex or aws ivs but I think they are just over engineering for my use case.

Any help will be appreciated.

Answer 1

You can set the timeslice parameter when calling start() on the MediaRecorder . The MediaRecorder will then emit chunks which roughly match the length of the timeslice parameter.

You could upload those chunks using S3's multipart upload feature as you already mentioned.

Please note that you need a library like extendable-media-recorder if you want to record a WAV file since no browser supports that out of the box.