s3-react-video-stream

A React component for streaming videos from Amazon S3 in a Next.js environment.
This component uses environment variables on the client side, so be aware of potential security implications before exposing your AWS credentials in a public environment.

Features

• Easy S3 Video Streaming – uses AWS SDK’s pre-signed URLs to deliver video files.
• React Query Integration – handles loading and error states gracefully.
• Customizable – pass in props for autoPlay, controls, muted, and more.

Installation

npm install s3-react-video-stream
# or
yarn add s3-react-video-stream

Environment Variables

To use this component, you need to expose your S3 credentials to the client (only recommended for publicly accessible, read-only buckets):

NEXT_PUBLIC_S3_REGION=region
NEXT_PUBLIC_S3_READ_ACCESS=your-access-key-id
NEXT_PUBLIC_S3_READ_SECRET=your-secret-access-key

⚠️ Do not use sensitive AWS credentials in a public or production client-side environment.

Usage in Next.js

Setup React Query

Ensure you have @tanstack/react-query set up in your app:

// pages/_app.tsx or app/layout.tsx (for Next.js App Router)
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

Use the Component

import { VideoPlayer } from "s3-react-video-stream";

export default function MyPage() {
  return (
    <VideoPlayer
      bucketName="your-s3-bucket-name"
      videoKey="path/to/video.mp4"
      autoPlay
      controls
      muted
      loop
      className="max-w-3xl"
    />
  );
}

Props

| Prop | Type | Default | Description | | ---------- | --------- | ------- | ----------------------------------- | | bucketName | string | — | Name of the S3 bucket | | videoKey | string | — | Key of the video file in the bucket | | className | string | "" | Tailwind or custom class styling | | autoPlay | boolean | false | Whether to autoplay the video | | controls | boolean | true | Whether to show video controls | | muted | boolean | false | Whether the video is muted | | loop | boolean | false | Whether to loop the video |

Security Considerations

This component uses credentials in a client-side environment. For public, read-only use cases (e.g. video courses, promo content), this is acceptable, but never expose sensitive write permissions or confidential data.

Contributing

Contributions, issues and feature requests are welcome!
Feel free to check the issues page or submit a PR.

License

MIT