发送webm blob到nodejs并保存在服务器上

Question

我在将传入的webm blob保存到服务器时遇到麻烦。我在NextJS上使用react-video-recorder，像这样:

<VideoRecorder
onRecordingComplete={(videoBlob) => {
// Do something with the video...
fetch("/api/video", 
method: "post",
body: videoBlob,
})
.then(function (response) {
console.log("done");
return response;
})
.catch(function (err) {
console.log('error', err);
});
console.log(url); 
// output: blob:http://localhost:3000/99a5b711-f3d5-481d-9e04-8981d1be3727 

console.log(videoBlob); 
// output Blob {size: 307028, type: "video/webm;codecs="vp8,opus""}
}}
/>

在api端，我试图像这样保存文件。它确实保存了一些东西，但只是第一个块或缓冲区。如何捕获文件并将其写入服务器?

export default async (req, res) => {
fs.writeFile('test.webm', req.body, function (err) {
if (err) return console.log(err);
console.log('video saved');
} );
}

Answer 1

我是这样做的。我保存recordingChunks/Video blob到一个状态，然后从Reactjs前端发送到Nodejs服务器

前端代码:

const blob = new Blob(context.data.recordedChunks, {
type: "video/webm",
});
const fd = new FormData()
fd.append('video', blob)
axios.post(`${process.env.REACT_APP_BASE_URL}/video/blob_video`, fd)
.then((res) => console.log(res.data))
.catch((err) => console.log(err))

后端代码:

router.post('/blob_video', async (req, res) => {
try {
if (req.files.video !== undefined) {
const video = req.files.video // this is your file do what ever you want with it
const videoname = Date.now() + req.files.video.name + ".webm"
video.mv(`${__dirname}/../your_path/${videoname}`, err => {
if (err) {
console.log(err)
return res.json({ err })
}
})
}

res.json(req.body)
} catch (err) {
res.json({ success: false, err: err, msg: "Server error" })
console.log(err)
}
})

使用express-fileupload上传文件，你可以选择你最喜欢的。