CODEWITHSUNDEEP
javascriptnode.jsxmlhttprequestweb-audio-apiicecast
Stretch0
Stretch0

Reputation: 9285

How to stream live audio from browser to Icecast server

Is there a way I can send live audio input from browser to an Icecast server?

I am using getUserMedia API to receive the audio input and I want this to be a live stream to an Icecast server.

getAudioInput(){
  const constraints = { 
    video: false, 
    audio: {deviceId: this.state.deviceId ? {exact: this.state.deviceId} : undefined},
  };

  window.navigator.getUserMedia(
    constraints, 
    this.streamAudio, 
    this.handleError
  );
}

In my streamAudio function, I want to stream this to the Icecast server. Can I do this with some sort of xmlhttprequest or does it need to be done over socket?

Upvotes: 0

Views: 2818

Answers (1)

Brad
Brad

Reputation: 163603

Unfortunately, this isn't directly possible today. See also: Fetch with ReadableStream as Request Body

Basically, browsers don't allow a streamable HTTP request body. Therefore, you can't do a long-running HTTP PUT with data generated on the fly. The request body has to be fully resolved before the request is sent.

The specifications around Fetch and the Streams interface in-browser state that it should be possible to use a stream as a request body, but no browsers implement it today.

There are only two ways to get streams out of browsers today. One of which is to use Web Sockets. This is the easiest method, and requires you to handle the encoding of your media data (usually through the MediaRecorder API). The second method is to use WebRTC. With WebRTC, you can either use its MediaStream handling directly (difficult to do server-side), or use its data streams. There is no real benefit to using the data streams vs. Web Sockets if you're just sending data directly to a server.

I've built web-based clients in the past which use the WebSocket method. See also: https://stackoverflow.com/a/40073233/362536

Upvotes: 2

Related Questions