Using React, I'm uploading a video file for conversion in a Node server using Fluent FFMPEG. The file is uploaded correctly and the conversion is taking place, but I'm trying to run two things during and after. I've got progress of the conversion in my console and would like to send that back to the frontend to display in bar graph, second, I want to download the file when it's completed, that seems to be failing. I can place another file in the download function and that's sent to the browser console, but this video file won't trigger a download in the browser. The video file is successfully uploaded, it's converted and the watermark is created. Just need a way to send back progress and eventually download the file once completed.
/// Route
router.post("/", upload.single("file"), controller.getVideo);
/// Controller
const getVideo = async (req, res) => {
try {
if (!req.file) {
throw new Error("No file selected");
}
await transcodeAndWatermarkVideo(
req.file.path,
req.file.filename,
"prores",
"Watermark name"
).then((message) => {
console.log("MESSAGE", message); // Undefined
const file = `convertedMedia/${req.file.filename}-vsiwm.mov`;
res.download(file);
});
} catch (e) {
res.status(404).send(e);
}
};
/// Helper function
const transcodeAndWatermarkVideo = function (
path,
originalName,
codec,
watermark
) {
return new Promise((resolve, reject) => {
ffmpeg()
.input(path)
.videoCodec(codec)
.size("1920x1080")
.videoFilters(
`drawtext='fontsize=100:fontcolor=white@0.4:fontfile=FreeSerif.ttf:text=${watermark}:x=if(eq(mod(t\,05)\,0)\,rand(0\,(w-text_w))\,x):y=if(eq(mod(t\,05)\,0)\,rand(0\,(h-text_h))\,y)'`
)
.format("mov")
.on("error", function (err) {
console.log("An error occurred: " + err.message);
})
.on("progress", function (progress) {
console.log("Processing: " + progress.percent + "% done");
})
.on("end", function () {
fs.unlink(path, (err) => {
if (err) {
console.error(err);
return;
}
console.log("Original video deleted");
resolve(console.log("Conversion completed"));
});
})
.save(`convertedMedia/${originalName}-vsiwm.mov`);
});
};