如何将HTML5麦克风输入捕捉到Icecast？

Question

如何通过HTML5 / Javascript（无需Flash）捕获麦克风音频流，并将其发送到已设置的icecast服务器，以下是具体步骤：

1. 在HTML中使用getUserMedia API访问麦克风。
2. 创建一个新的MediaRecorder对象来录制音频流。
3. 使用XMLHttpRequest对象将数据流发送到服务器。
4. 在服务器上，将接收音频流的数据并将其推送到icecast服务器。

解决方案必须仅基于浏览器/网络，不需要额外的软件。服务器运行Rails 5.0.0.1。

如何开始？我在努力寻找相关信息，但所有内容都涉及上传/录制完整文件而非流。

- Irdes

Answer 1

解决方案必须完全基于浏览器/网络，不能使用其他软件。 目前这是不可能的，因为无法进行流式HTTP PUT请求。也就是说，要通过XHR或Fetch进行HTTP请求，请求体必须是不可变的。 现在有一个新的标准ReadableStream即将推出，允许您创建一个可读流（您编码的音频）并将其PUT到服务器上。一旦它可用，这就成为可能。 服务器在Rails 5.0.0.1上。

不确定为什么你提到这个，因为你说所有内容都必须在浏览器中运行。无论如何，让我告诉你我是如何使用服务器端代理实现的。

客户端需要使用getUserMedia()捕获音频。(一定要使用adapter.js, 因为规范最近已更改，您不想手动处理约束对象更改。) 一旦你有了它，你可以发送PCM样本(我建议先从32位浮点数减少到16位有符号)，或者你可以在客户端使用像AAC或MP3这样的编解码器。如果你在客户端做编解码器，你只能发送一个或两个流。如果你在服务器端做编解码器，由于CPU需求，你可以得到尽可能多的流，但你将根据你派生的流而占用更多的带宽。

对于客户端的编解码器，您可以使用MediaRecorder，或者通过emscripten（或类似工具）编译为JavaScript的编解码器。Aurora.js有一些用于解码的编解码器，但我认为其中至少一个编解码器也具备编码功能。

要将数据发送到服务器，您需要使用二进制WebSocket。

在服务器端，如果您想在那里保留编解码器，FFmpeg会使这变得容易。

一旦您拥有了编码后的音频，您需要向Icecast或类似的服务器进行HTTP PUT请求，并将元数据更新到带有PUT请求的容器中，或者通过其他方式进行更新。

---

自我推广：如果您不想自己完成所有这些工作，我有一些代码可以授权给您使用，名为AudioPump Web Encoder，它可以完全满足您的要求。您可以根据需要进行修改，将组件嵌入到您的项目中等等。如果您感兴趣，请发送电子邮件至[e-mail]。

- Brad