如何使用Javascript创建实时媒体流

Question

我想创建一个从一个设备到一个节点服务器的实时音频流，然后可以将该实时提要广播到几个前端。

我已经为此进行了广泛的搜索，并且真的碰壁了，所以希望有人能帮忙。

我能够得到我的音频输入从window.navigator.getUserMediaAPI。

getAudioInput(){
  const constraints = { 
    video: false, 
    audio: {deviceId: this.state.deviceId ? {exact: this.state.deviceId} : undefined},
  };

  window.navigator.getUserMedia(
    constraints, 
    this.initializeRecorder, 
    this.handleError
  );
}

然后将流传递给initializeRecorder函数，该函数使用AudioContextAPI创建createMediaStreamSource`

initializeRecorder = (stream) => {
  const audioContext = window.AudioContext;
  const context = new audioContext();
  const audioInput = context.createMediaStreamSource(stream);
  const bufferSize = 2048;
  // create a javascript node
  const recorder = context.createScriptProcessor(bufferSize, 1, 1);
  // specify the processing function
  recorder.onaudioprocess = this.recorderProcess;
  // connect stream to our recorder
  audioInput.connect(recorder);
  // connect our recorder to the previous destination
  recorder.connect(context.destination);
}

在我的recorderProcess函数中，我现在有一个AudioProcessingEvent对象，我可以流式处理它。

目前，我通过套接字连接以流的形式发送音频事件，如下所示：

recorderProcess = (e) => {
  const left = e.inputBuffer.getChannelData(0);
  this.socket.emit('stream', this.convertFloat32ToInt16(left))
}

这是最好的方法还是唯一的方法？使用fs有更好的方法吗。创建ReadStream，然后通过Axios发布endpoint？据我所知，这只适用于文件，而不是连续的实时流？

服务器

我有一个非常简单的套接字服务器运行在快递上面。目前，我监听流事件，然后发出相同的输入回：

io.on('connection', (client) => {

  client.on('stream', (stream) => {
    client.emit('stream', stream)
  });

});

不确定这是如何扩展，但如果你有更好的建议，我非常愿意接受。

客户端

这就是我真正被困的地方：

在我的客户端上，我正在侦听流事件，并希望在浏览器中以音频输出的形式侦听流。我有一个接收事件的函数，但我无法确定如何使用返回的arrayBuffer对象。

retrieveAudioStream = () => {
  this.socket.on('stream', (buffer) => {
     // ... how can I listen to the buffer as audio
  })
}

1. 我流音频的方式是我上传到节点服务器的最佳/唯一方式吗？
2. 如何监听客户端返回的arrayBuffer对象？

Answer 1

1. 我上传音频的方式是上传到节点服务器的最佳/唯一方式吗

这并不是最好的，但我看到了更糟的情况，这不是使用WebSocket的唯一方法。从观点上看，这被认为是可行的，因为您希望事情“实时”，而不是每5秒发送一次http post请求。

你可以试试这个BaseAudioContext。解码音频数据以收听数据流，示例非常简单。

从你提供的代码片段中，我假设你想从头开始构建一些东西来学习事物是如何工作的。

在这种情况下，您可以尝试使用MediaStream录制API和websocket服务器，该服务器将数据块发送给X客户端，以便它们能够重现音频，等等。

将时间投入到WebRTC API中，学习如何从客户机流式传输到另一个客户机是有意义的。

还可以查看下面的链接以获取一些有用的信息。

• （stackoverflow）从NodeJS服务器向客户端获取实时流媒体音频
• （github）视频会议webrtc
• 抽搐。电视技术堆栈文章
• rtc。木卫一