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

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

Answer 1

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

也就是说，根据底层用例，使用 WebRTC 将音频内容流式传输到服务器可能会更好。

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

Stream audio directly from browser to server

javascript

web-mediarecorder

fetch-api

mediastream

客户端（浏览器）代码

服务器代码