在被 getUserMedia 捕获后，使用 WebRTC 将 MediaStream 发送到主机服务器答案

【问题标题】：Sending a MediaStream to host Server with WebRTC after it is captured by getUserMedia在被 getUserMedia 捕获后，使用 WebRTC 将 MediaStream 发送到主机服务器
【发布时间】：2023-04-10 08:30:01
【问题描述】：

我正在使用 getUserMedia() 捕获音频数据，我想将其发送到我的服务器，以便将其保存为 MySQL 字段中的 Blob。

这就是我想要做的。我已经多次尝试使用 WebRTC 进行此操作，但目前我什至不知道这是否正确，甚至是最好的方法。

任何人可以帮助我吗？

这是我用来从麦克风捕获音频的代码：

navigator.getUserMedia({
    video:false,
    audio:true,
},function(mediaStream){

    // output mediaStream to speakers:
    var mediaStreamSource=audioContext.createMediaStreamSource(mediaStream);
    mediaStreamSource.connect(audioContext.destintion);

    // send mediaStream to server:

    // WebRTC code? not sure about this...
    var RTCconfig={};
    var conn=new RTCPeerConnection(RTCconfig);

    // ???

},function(error){
    console.log('getUserMedia() fail.');
    console.log(error);
});

如何将此mediaStream 发送到服务器？

在谷歌搜索之后，我一直在研究 WebRTC，但这似乎只是为了点对点通信 - 实际上，现在我正在研究更多，我认为这是要走的路。这似乎是从客户端浏览器到主机网络服务器的通信方式，但我尝试的任何方法都无法正常工作。

我一直在经历the W3C documentation（我觉得它太抽象了），我一直在经历this article on HTML5 Rocks（提出的问题多于答案）。显然我需要一种信令方法，谁能建议哪种信令方法最适合发送 mediaStreams、XHR、XMPP、SIP、Socket.io 或其他东西？

服务器上需要什么来支持 WebRTC 的接收？我的网络服务器正在运行一个基本的 LAMP 堆栈。

另外，最好等到mediaStream 完成录制后再将其发送到服务器，还是在录制时发送mediaStream 更好？我想知道我是否以正确的方式去做这件事。我已经用 javascript 和 HTML5 编写了文件上传器，但上传其中一个 mediaStreams 似乎要复杂得多，我不确定我是否正确。

对此的任何帮助将不胜感激。

【问题讨论】：

您只想存储录制的文件吗？如果是这样，您可以将 blob 上传到可以保存它的服务器。或者您是否希望您的服务器能够从客户端获得实时流并让服务器处理录制？
我只是想把录制的文件保存在服务器上。

标签： javascript jquery audio webrtc getusermedia

【解决方案1】：

当直播正在运行时，您无法上传直播本身。这是因为它是实时流。

所以，这给你留下了一些选择。

使用许多录音机之一录制音频流RecordRTC 效果很好。等到流完成后再上传文件。
使用计时器发送较小的录制音频块，然后在服务器端再次合并它们。 This is an example of this
通过 websocket 将音频数据包发送到您的服务器，以便您可以在那里操作和合并它们。 My version of RecordRTC does this。
与您的服务器建立实际的对等连接，以便它可以获取原始 rtp 流，并且您可以使用一些较低级别的代码记录流。这可以通过Janus-Gateway 轻松完成。

至于等待发送流还是分块发送，这完全取决于您录制多长时间。如果是更长的时间，我会说分块发送录音或通过 websockets 主动发送音频包是一个更好的解决方案，因为从客户端上传和存储更大的音频文件对客户端来说可能很困难。

Firefox 实际上有一个 own solution for recording，但它在 chrome 中不受支持，因此它可能不适用于您的情况。

顺便说一句，所提到的信令方法是用于会话的建立/销毁，实际上与媒体本身无关。如果您使用上面显示的可能的解决方案 4，您只会真正担心这一点。

【讨论】：

【解决方案2】：

MediaRecorder API 对您来说是一个不错的 API，但它的支持程度低于 Web Audio API，因此您可以使用 ScriptNode 或使用 Recorder.js（或基于它来构建您自己的 scriptnode）。

【讨论】：

【解决方案3】：

WebRTC 设计为点对点，但peer 可以是浏览器和服务器。所以绝对可以通过 WebRTC 将流推送到服务器，然后将流记录为文件。

流的流向是：

Chrome ----WebRTC--->   Server  ---record---> FLV/MP4

有很多服务器，如SRS、janus 或mediasoup 接受WebRTC 流。请注意，您可能需要将 WebRTC(H.264+Opus) 转换为 MP4(H.264+AAC)，或者选择支持此功能的SRS。

【讨论】：