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

Question

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

我对此进行了广泛的搜索，但确实遇到了困难，所以希望有人能提供帮助。

我能够从 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 发布端点是否有更好的方法？据我所知，这仅适用于文件而不是连续直播？

服务器

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

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
  })
}

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

Answer 1

1. Is the way I am streaming audio the best / only way I can upload to the node server?

不是最好的，但我见过更糟的，它不是使用 websockets 的唯一方法，从 Angular 来看它被认为是好的，因为你希望事情是“实时的”，而不是每 5 秒发送一次 http post 请求。

2. How can I listen to the arrayBuffer object that is being returned on my client side?

你可以试试这个 BaseAudioContext.decodeAudioData 来监听数据流，这个例子很简单。

---

根据您提供的代码片段，我假设您想从头开始构建一些东西以了解其工作原理。

在这种情况下，您可以尝试将 MediaStream Recording API 与将 block 发送到 X 客户端的 websocket 服务器一起使用，以便它们可以再现音频等。

将时间花在 WebRTC API 上，学习如何从一个客户端流式传输到另一个客户端是有意义的。

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

• (stackoverflow) Get live streaming audio from NodeJS server to clients
• (github) video-conference-webrtc
• twitch.tv tech stack article
• rtc.io