how to convert getUsermedia audio stream into a blob or buffer?

Question

I am getting audio stream from getUserMeda and then convert it into a blob or buffer and send it to server as audio is comming I am using socket.io to emit it to server how can i convert audio mediastream into buffer?

Following is the code that i have written yet

navigator.getUserMedia({audio: true, video: false}, function(stream) {
webcamstream = stream;
var media = stream.getAudioTracks();
socket.emit("sendaudio", media);
},
function(e){
   console.log(e);
  }
});

How to convert stream into buffer and emit it to node.js server as stream comes from getusermedia function?

Jurdi

Use MediaRecorder API (Firefox-only) or WebAudio hacks (Chrome-specific). Recorder.js is very much famous. You can even look at RecordRTC and MediaStreamRecorder.js. In simple words: You need to record stream, get interval-based or full-blob and upload to server using FormData or DataURL. – Dulcy

@MuazKhan I simply want to develop one way audio broadcasting app that is only possible when if audio stream is sent in real time. I have used RecordRTC i have ] recorded audio for every 1 second and send it to server the problem is browser window got crashed after 30 or 40 secs. – Jurdi

You can directly add the stream to a WebRTC Peer connection. – Ethnology

@NaumanBashir Yep. Robert is right. You can use RTCPeerConnection API for realtime broadcasting. Is there any reason NOT using it? Maybe wanna support NON-WebRTC browsers/devices as the viewers? BTW, MediaStreamRecorder.js shouldn't crash! RecordRTC works with 5 min or less recording. – Dulcy

Correct me if I am wrong the audio will be broadcasted to minimum 50 users so sending browser will have to open 50 peer connections that means sending data to 50 people at the samet ime and also that will require alot of bandwidthl. The other problem can be non webrtc browsers. BTW thank you guys for you guidance. Cheers – Jurdi

You just can use a server in between that uses WebRTC. So just Stream webrtc data to the server and the server streams it to your clients. No problem! – Ethnology

@Ethnology What are you using server-side for manipulating WebRTC? Any way to capture the audio server-side? – Wakeful

@NaumanBashir As an alternative to what you are doing now, see my notes here: https://mcmap.net/q/551892/-stream-recorded-audio-from-browser-to-server – Wakeful

Answer 1

Per @MuazKhan's comment, use MediaRecorder (in Firefox, eventually will be in Chrome) or RecordRTC/etc to capture the data into blobs. Then you can export it via one of several methods to the server for distribution: WebSockets, WebRTC DataChannels, etc. Note that these are NOT guaranteed to transfer the data in realtime, and also MediaRecorder does not yet have bitrate controls. If transmission is delayed, data may build up locally.

If realtime (re)transmission is important, strongly consider using instead a PeerConnection to a server (per @Robert's comment) and then transform it there into a stream. (How that is done will depend on the server, but you should have encoded Opus data to either repackage or decode and re-encode.) While re-encoding is generally not good, in this case you would do best to decode through NetEq (webrtc.org stack's jitter-buffer and PacketLossConcealment code) and get a clean realtime audio stream to re-encode for streaming, with loss and jitter dealt with.

Lifetime

Hi. In my project, I am using recorder.js to capture audio stream and sending it to a java based remote server via websockets in small chunks. However the final audio which I get in the server after merging the chunks, I notice a lot of noise and jitter. How can I avoid it? Secondly, will WebRTC DataChannels be a better option over websocket. if yes, why? Thanks in advance. – Leix

First, try beta 47 and see if the audio performance is better; we made major improvements to MediaRecorder in 47 and 48 in Firefox. Second, if you're transferring to a server, websockets or datachannels will work, and they have very similar APIs (on purpose). DataChannels will allow for some additional options, especially in the future, but for the server case they're similar, especially if you only need one channel. – Lifetime

Answer 2

mediaRecorder = new MediaRecorder(stream);//Cria um elemento para gavar a Stream 

let chunks = [];//Cria uma matriz para receber as parte.
mediaRecorder.ondataavailable = data => 
{
chunks.push(data.data)//Vai adicionando as partes na matriz
}
mediaRecorder.onstop = () => {//Quando ativar a função parar a gravação
//Cria o BLOB com as partes acionadas na Matriz
const blob = new Blob(chunks, { type: 'audio/wav' });
}

//Voce pode ainda criar um leitor
var reader = new FileReader();
//Passa o BLOB como parametro
reader.readAsText(blob);
//Pode visualizar os dados gerados em texto
alert(reader.result);
//Pode passar o dados para uma variável
var enviar_dados = reader.result;
 //Pode passa via AJAX e ou JQUERY para o servidor, salvar no banco de dados...

 PS-> O Type pode ser 
 //const blob = new Blob(chunks, { type: 'audio/ogg; code=opus' });
 //const blob = new Blob(chunks, { type: 'application/octet-binary' });
 //const blob = new Blob(chunks, { type: 'text/plain' });
 //const blob = new Blob(chunks, { type: 'text/html' });
 .......

Comedy

Add comments which will explain your answer. – Pfeifer

Hi! Welcome to StackOverflow! Please provide a Minimal, Reproducible Example and I'm sure that we would be glad to help you. – Egbert