I make a call request to get a link for a video saved in my S3, the permission for the bucket is set to public and I’m able to view it through it’s object URL, but for some reason, when I create a Blob to save the video, the video gets saved but corrupted(I can’t view it).

error: The file may be corrupt, or the extension is incorrect.

The file is neither corrupt, nor is the extension incorrect.

Here is my code:

  function downloadVideo() {
    const data = celebmessage; // this logs a link to my S3, and I can view the vide.
    const blob = new Blob([data], { type: "video/webm" });

    const url = window.URL.createObjectURL(blob);
    setMsg(data);
    const link = document.createElement("a");
    link.href = url;
    document.body.appendChild(link);
    link.setAttribute("download", `${celebName}-Video-${requestid}.webm`); //set file name
    link.click();
  }

//jsx

 ) : reqtype == "video" ? (
            <>
              <video
                className="recorded w-1/2   "
                src={celebmessage}
                controls
              />
              {celebmessage}
              <button
                onClick={downloadVideo}
                className="px-5 py-3 bg-blue-300 rounded-md relative top-10"
              >
                Download Video
              </button>

Note: The extension on the S3 is webm.

Recognized by AWS

It looks like the problem might be that the celebmessage variable is holding a link to your S3 bucket instead of the actual video data. When creating the Blob, you need to fetch the video data from that link first.

async function downloadVideo() {
try {
const response = await fetch(celebmessage); 
const videoData = await response.blob();

const blob = new Blob([videoData], { type: "video/webm" });

const url = window.URL.createObjectURL(blob);
setMsg(url); // Update setMsg to the URL
const link = document.createElement("a");
link.href = url;
document.body.appendChild(link);
link.setAttribute("download", `${celebName}-Video-${requestid}.webm`); // Set file name
link.click();
} catch (error) {
 console.error("Error fetching video data:", error);
  }
}

By using the fetch function, you’re getting the actual video data from the S3 link, and then you can create the Blob as before. This should resolve the issue of downloading a corrupted video.