How to capture HTML5 microphone input to icecast?

Question

What are the steps and means of capturing microphone audio stream through HTML5 / Javascript (no flash) and then sending it to an already set up icecast server?

The solution must be solely browser/web-based, no additional software. The server is on Rails 5.0.0.1.

Where should I start?

I'm struggling to find any relevant info online as everything talks about uploading/recording audio files as complete files, not streams.

Answer 1

The solution must be solely browser/web-based, no additional software.

That's not possible at the moment, because there is no way to make a streaming HTTP PUT request. That is, to make an HTTP request either via XHR or Fetch, the request body has to be immutable.

There is a new standard of ReadableStream which will be available any day now, allowing you to make a ReadableStream (your encoded audio) and PUT it to a server. Once that is available, this is possible.

The server is on Rails 5.0.0.1.

Not sure why you mention that since you said it has to all live in the browser. In any case, let me tell you how I implemented this, with a server-side proxy.

Client-side, you need to capture the audio with getUserMedia(). (Be sure to use adapter.js, as the spec has recently changed and you don't want to have to deal with the constraints object changes manually.) Once you have that, you can either send PCM samples (I'd recommend reducing from 32-bit float to 16-bit signed first), or you can use a codec like AAC or MP3 client-side. If you do the codec in the client, you're only going to be able to send one or two streams. If you do the codec server-side, you can derive as many as you want, due to CPU requirements, but you will take more bandwidth depending on the streams you're deriving.

For the codec on the client, you can either use MediaRecorder, or a codec compiled to JavaScript via emscripten (or similar). Aurora.js has some codecs for decoding, but I believe at least one of the codecs in there also had encoding.

To get the data to the server, you need a binary web socket.

On the server side, if you're keeping the codecs there, FFmpeg makes this easy.

Once you have the encoded audio, you need to make your HTTP PUT request to Icecast or similar, as well as update the metadata either out-of-band, or muxed into the container that you're PUT-ing to the server.

---

Self Promotion: If you don't want to do all of that yourself, I have some code you can license from me called the AudioPump Web Encoder, which does exactly what you ask for. You can modify it for your needs, take components and embed them into your project, etc. E-mail me at [email protected] if you're interested.