直接从浏览器将音频流传输到服务器

Question

当用户点击“录制”按钮时，我希望立即开始上传从麦克风录制的音频，而不是等到录制完成。在浏览器JavaScript中是否可能实现这一点？

为了开始尝试，我尝试了以下代码，但请求立即结束，而不是在记录器继续记录的同时继续。

客户端（浏览器）代码

navigator.mediaDevices.getUserMedia({ audio: true }).then(
  (stream) => {
    const recorder = new MediaRecorder(stream)

    recorder.onstart = async () => {
      await fetch("/stream/upload", {
        method: "POST",
        headers: { "Content-Type": "multipart/form-data" },
        body: stream,
        allowHTTP1ForStreamingUpload: true,
      })

      console.log("Upload complete!")
    }
  },
  (err) => console.error("Error: " + err)
)

服务器代码

const app = express()

app.post("/stream/upload", (req, res, next) => {
  res.status(200)

  req.on("data", (chunk) => {
    // only appears once
    console.log("Data received")
    res.write(chunk)
  })

  req.on("end", () => {
    // and then this appears immediately after
    console.log("Stream ended")
    res.send("Ended")
  })
})

- tvanc

Answer 1

onstart 只在录制开始时调用 - 相反，您需要将数据作为 dataavailable 事件 的一部分上传 - 要使该事件更频繁发生，请使用 start 方法的 timeslice 参数。

话虽如此，根据基本用例，使用 WebRTC 将音频内容流式传输到服务器可能更好。

- dontcallmedom

---

谢谢。我不想使用dataavailable事件，因为那样会为每个事件创建一个新的连接，而不是通过一个连接进行流式传输。不幸的是，通过fetch API进行流式请求的支持还没有准备好。看起来WebRTC是实现我想要的功能的方法。 - undefined

使用WebSocket服务器并通过WebSocket发送字节是使用fetch的替代方法。设置WebSocket端点可能比设置WebRTC连接更容易。 - undefined

谢谢！我也会研究一下。我本以为那会很难，但是现在我受到了进一步研究的激励，我觉得可以比我想象的更简单地完成。 - undefined