In my Node backend, I have an endpoint where I get a few videos from where I have them stored in Google Cloud, then return these videos as the response. Here is my code for that:
app.get("/getGalleryVideos", async (req, res) => {
const [files] = await bucket.getFiles(bucketName, { prefix: req.query.user });
const fileNames = files.map((file) => file.name);
const sumFiles = [];
for (let i = 0; i < fileNames.length; i++) {
await bucket
.file(fileNames[i])
.download()
.then((data) => {
sumFiles.push(data);
});
}
res.json(sumFiles);
});
Then when I receive these videos as the response in the React frontend, I want to convert them into a format that they can be used as the source for HTML video tags. For now I am just trying to get one video to work so when I receive the response as a list, I just take the first item and work with that. Here is my code for that:
function getGalleryVideos() {
var user = "undefined";
if (typeof Cookies.get("loggedInUser") != "undefined") {
user = Cookies.get("loggedInUser");
}
axios({
method: "get",
url: `http://localhost:3001/getGalleryVideos`,
params: {
user: user,
},
timeout: 100000,
}).then((res) => {
console.log("res");
console.log(res);
console.log("res.data");
console.log(res.data);
console.log("res.data[1]");
console.log(res.data[1]);
console.log("res.data[1][0]");
console.log(res.data[1][0]);
console.log("res.data[1][0].data");
console.log(res.data[1][0].data);
const vid = new Blob(res.data[1][0].data, { type: "video/mp4" });
console.log("vid");
console.log(vid);
console.log("url");
console.log(URL.createObjectURL(vid));
setVideo(URL.createObjectURL(vid));
});
}
Now this is what I receive in the React frontend console when I make this request:
But if I navigate to the URL that I printed in the console, the video isn't there:
Now I'm not sure why this is happening, but one thing I have noticed is my prints in the console show that the size of the buffer before I convert it to a blob, is 773491 and then after I convert it, it is 1987122 which seems quite far off.
Please help explain how I can fix this, or provide a different way I can send these videos over so that I can display them.