Question

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

我已经对此进行了广泛的搜索，并且真的碰壁了，所以希望有人可以提供帮助。

我可以从window.navigator.getUserMedia API获取音频输入。

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

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

然后将流传递给initializeRecorder函数，该函数利用AudioContext API创建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.createReadStream，然后通过Axios发布端点？据我所知，这只适用于文件，而不是连续的直播流？

服务器

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

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

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

});

不确定这是多么可扩展，但如果你有更好的建议，我对此非常开放。

客户端

现在这就是我真正陷入困境的地方：

在我的客户端上，我正在监听stream事件，并希望在浏览器中将流视为音频输出。我有一个接收事件的函数，但我不知道如何使用正在返回的arrayBuffer对象。

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

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

Answer 1

我流式音频的方式是我可以上传到节点服务器的最佳/唯一方式吗？

不是真的最好，但我已经看到更糟糕了，它不是唯一的方式使用websockets它从视角来看是好的，因为你想要的东西是“活的”而不是每隔5秒发送一次http post请求。

如何监听客户端返回的arrayBuffer对象？

您可以尝试使用此BaseAudioContext.decodeAudioData来收听流式传输的数据，示例非常简单。

从你提供的代码片段中我假设你想从头开始构建一些东西，以了解它是如何工作的。

在这种情况下，您可以尝试MediaStream Recording API以及将块发送到X客户端的websocket服务器，以便它们可以重现音频等。

将时间投入WebRTC API，了解如何从客户端流向另一个客户端是有意义的。

另请查看以下链接以获取一些有用的信息。

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

1 个答案: