How can I send a list of videos from Node.js to React.js?

152 Views Asked by At

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:

enter image description here

But if I navigate to the URL that I printed in the console, the video isn't there:

enter image description here

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.

0

There are 0 best solutions below