如何将 getUsermedia 音频流转换为 blob 或缓冲区？答案

【问题标题】：how to convert getUsermedia audio stream into a blob or buffer?如何将 getUsermedia 音频流转换为 blob 或缓冲区？
【发布时间】：2015-08-13 08:49:10
【问题描述】：

我从 getUserMeda 获取音频流，然后将其转换为 blob 或缓冲区，并在音频正在发送时将其发送到服务器我正在使用 socket.io 将其发送到服务器我如何将音频媒体流转换为缓冲区？

下面是我写的代码

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

如何将流转换为缓冲区并将其发送到node.js服务器，因为流来自getusermedia函数？

【问题讨论】：

使用 MediaRecorder API（仅限 Firefox）或 WebAudio hacks（特定于 Chrome）。 Recorder.js 非常有名。您甚至可以查看 RecordRTC 和 MediaStreamRecorder.js。简而言之：您需要记录流，获取基于间隔或完整 blob 并使用 FormData 或 DataURL 上传到服务器。
@MuazKhan 我只是想开发一种方式音频广播应用程序，只有在实时发送音频流时才有可能。我已经使用 RecordRTC 我已经] 每 1 秒录制一次音频并将其发送到服务器问题是浏览器窗口在 30 或 40 秒后崩溃。
您可以直接将stream 添加到WebRTC Peer 连接中。
@NaumanBashir 是的。罗伯特是对的。您可以使用 RTCPeerConnection API 进行实时广播。有什么理由不使用它吗？也许想支持 NON-WebRTC 浏览器/设备作为查看器？顺便说一句，MediaStreamRecorder.js 不应该崩溃！ RecordRTC 可以录制 5 分钟或更短的时间。
你可以在两者之间使用一个使用 WebRTC 的服务器。因此，只需将 webrtc 数据流式传输到服务器，然后服务器将其流式传输到您的客户端。没问题！

标签： javascript buffer blob webrtc audio-streaming

【解决方案1】：

根据@MuazKhan 的评论，使用 MediaRecorder（在 Firefox 中，最终将在 Chrome 中）或 RecordRTC/etc 将数据捕获到 blob 中。然后您可以通过以下几种方法之一将其导出到服务器进行分发：WebSockets、WebRTC DataChannels 等。请注意，这些方法不能保证实时传输数据，而且 MediaRecorder 还没有比特率控制。如果传输延迟，数据可能会在本地累积。

如果实时（重新）传输很重要，强烈考虑使用 PeerConnection 代替服务器（根据@Robert 的评论），然后将其转换为流。（如何完成将取决于服务器，但您应该对 Opus 数据进行编码以重新打包或解码并重新编码。）虽然重新编码通常不好，但在这种情况下，您最好通过 NetEq 解码（ webrtc.org 堆栈的 jitter-buffer 和 PacketLossConcealment 代码）并获得干净的实时音频流以重新编码以进行流式传输，处理丢失和抖动。

【讨论】：

嗨。在我的项目中，我使用 recorder.js 来捕获音频流并通过 websockets 将其发送到基于 Java 的远程服务器。然而，在合并块后我在服务器中获得的最终音频，我注意到很多噪音和抖动。我怎样才能避免它？其次，WebRTC DataChannels 会比 websocket 更好吗？如果是，为什么？提前致谢。
首先，试试beta 47，看看音频性能是否更好；我们在 Firefox 的 47 和 48 中对 MediaRecorder 进行了重大改进。其次，如果您要传输到服务器，websockets 或数据通道将起作用，并且它们具有非常相似的 API（故意）。 DataChannels 将允许一些额外的选项，尤其是在未来，但对于服务器情况，它们是相似的，特别是如果您只需要一个通道。

【解决方案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' });
 .......

【讨论】：

添加 cmets 将解释您的答案。
嗨！欢迎来到 StackOverflow！请提供Minimal, Reproducible Example，我相信我们很乐意为您提供帮助。