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

Question

我想在用户点击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")
})
})

Answer 1

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

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