Read from s3 bucket an mp4 file in and play in browser

[ivory musk]

Hello,

I'm a beginner in nextjs and am trying desperately to read an mp4 from my s3 bucket and play it in the browser.
Unfortunately I always get the message "File not found, error 404".
The credentials are correct. There is no message about incorrect credentials.
I don't understand it anymore. 🥺
The api function looks like this:

import AWS from 'aws-sdk';

const s3 = new AWS.S3({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  region: process.env.AWS_REGION,
  endpoint: process.env.S3_ENDPOINT,
  s3ForcePathStyle: true, 
});

export default async function handler(req, res) {
  const params = {
    Bucket: process.env.S3_BUCKET_NAME,
    Key: 'vids/air.mp4',
  };

  try {
    await s3.headObject(params).promise();
    
    const data = await s3.getObject(params).promise();
    const fileContent = data.Body.toString('utf-8');
    res.status(200).json({ content: fileContent });
  } catch (error) {
    if (error.code === 'NotFound') {
      console.error('File not found:', error);
      res.status(404).json({ error: 'File not found' });
    } else {
      console.error('file read error:', error);
      res.status(500).json({ error: 'file read error' });
    }
  }
}

The file exists and the path is also correct.
I can access the folder using the "commander one" software and can see the file.
The file is called as follows:

"use client";

import { useEffect, useState } from 'react';

export default function HeroHome() {
  const [fileContent, setFileContent] = useState('');

  useEffect(() => {
    async function fetchFileContent() {
      const response = await fetch('/api/readFile');
      const data = await response.json();
      setFileContent(data.content);
    }

    fetchFileContent();
  }, []);
........
........
.... {fileContent}....

Can you please help me ? I'm really desperate....😢
Thanks

[long walrus]

Hi @ivory musk. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

I understand your frustration and I'm here to help. The issue you're facing might be due to the way you're trying to serve the video file. In your current setup, you're reading the file from S3 and then trying to send it as a string in the response. This approach might not work well for binary files like videos.

Instead, you should consider directly streaming the video file from S3 to the client. Unfortunately, the knowledge sources provided do not contain a direct example of how to do this. However, they do provide some guidance on how to handle video files in Next.js and how to use AWS SDK with Next.js.

Here's a general idea of how you can approach this:

1. Upload the video to S3: You can upload your video to S3 and make it publicly accessible. You can follow the instructions provided in the EXIF Photo Blog guide (https://vercel.com/templates/next.js/photo-blog) to set up your S3 bucket and upload files to it.

2. Display the video in Next.js: Once the video is uploaded and stored, you can display it in your Next.js application. You can use the <video> tag to display the video, as shown in the Video Optimization guide (https://nextjs.org/docs/app/building-your-application/optimizing/videos#using-vercel-blob-for-video-hosting). You just need to replace the src attribute with the URL of your video file in S3.

Here's an example:

export function Video() {
  return (
    <video width="320" height="240" controls preload="none">
      <source src="<https://your-s3-bucket-url/your-video.mp4"> type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  )
}

Please note that this is a general guidance and might need to be adjusted based on your specific use case and setup. If you're still facing issues, I would recommend checking the AWS SDK documentation or seeking help from the Next.js community.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: