在getUserMedia捕获MediaStream后,使用WebRTC将MediaStream发送到主机服务器

时间:2014-08-27 09:17:06

标签: javascript jquery audio webrtc getusermedia

我正在使用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的接收?我的Web服务器正在运行一个基本的LAMP堆栈。

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

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

2 个答案:

答案 0 :(得分:44)

您无法在运行时自行上传实时流。这是因为它是一个LIVE流。

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

  1. 使用众多录音机中的一个录制音频流RecordRTC运行良好。等到流完成后再上传文件。
  2. 使用计时器发送较小的录制音频块并将其再次合并到服务器端。 This is an example of this
  3. 将通过websockets发送的音频数据包发送到您的服务器,以便您可以在那里操作和合并它们。 My version of RecordRTC does this
  4. 与您的服务器建立实际的对等连接,以便它可以获取原始rtp流,您可以使用一些较低级别的代码记录流。这可以通过Janus-Gateway轻松完成。
  5. 至于等待发送流而不是以块的形式发送它,这一切都取决于你录制的时间。如果它是一段较长的时间,我会说以块的形式发送录音或通过websockets主动发送音频数据包是一个更好的解决方案,因为从客户端上传和存储更大的音频文件对于客户来说是非常艰难的。

    Firefox实际上有一个own solution for recording,但Chrome不支持它,所以它可能不适用于您的情况。

    顺便说一下,提到的信令方法是用于会话构建/销毁,并且实际上与媒体本身无关。如果您使用上面显示的解决方案编号4,您只会真的担心这一点。

答案 1 :(得分:3)

一个很好的API将是MediaRecorder API,但它不如Web Audio API支持,因此您可以使用ScriptNode或使用Recorder.js(或基于它来构建自己的API) scriptnode)。