时间戳

首页 > 解决方案 > 将音频直接从浏览器流式传输到服务器

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

问题描述

我想在用户点击Record后立即开始上传从麦克风录制的音频，而不是等到他们完成。浏览器 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")
  })
})

标签： javascriptfetch-apimediastreamweb-mediarecorder

解决方案

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

话虽如此，根据底层用例，使用 WebRTC 将音频内容流式传输到服务器可能会为您提供更好的服务。

推荐阅读