How to correctly stream videos from a S3 bucket using HLS format

I am totally confused about a video streaming app I have been making for fun.

I have:

  • Node JS server
  • Minio Buckets
  • Javascript Client
  • HLS ()H.264 and MP4 version of uploading and streaming.

Should I be:

  1. Streaming the video from bucket to client using the bucket URL and letting it handle chunks of data sent back? Or,
  2. Streaming from my bucket to my server and then to my frontend with the server managing sending back chunks? The server sends back one .m3u8 file and then sends the rest as .ts chunks.

My server originally sent the mp4 files in chunks based on the range in headers. Now the .m3u8 files are already broken down into chunks of .ts.

I found someone online who lets you see the frontend code and I can tell that the client makes one request for a .m3u8 file and then in the network tab a series of .ts chunks are being sent back as well. So I can’t tell what the server is doing to make these chunks.

I might also be a little confused about how buckets really work but thats a different problem.

The frontend code is very basic React setup and this is all that’s needed to call a video:

const playerRef = useRef<HTMLVideoElement>(null);

const [hlsUrl, setHlsUrl] = useState(
    'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
);

return (
    <ReactHlsPlayer
      playerRef={playerRef}
      src={hlsUrl}
      autoPlay={true}
      controls={false}
      width='60%'
      height='auto'
    />
)

I tried sending it through the same system to send back an mp4 but it sent the m3u8 and then couldn’t send the .ts files

If it’s not too clear, I’m badly trying to ask how do people set up a server to work with streaming, hls and buckets all in one?

I don’t need code just guidance.