현재 웹을 react로 만들고 있고 AWS S3에 영상파일을 저장해서 스트리밍형식으로 재생하고 싶습니다.

ffmpeg를 설치하고 mp4파일을 m3u8과 ts파일로 변환한 다음 S3에 업로드하고 cloufront설정까지 했습니다. 이후 이를 재생하기위해 며칠을 관련자료도 찾아보고 별짓을 다 해봤지만 자료들이 다 예전 react문법(class)이라서 신문법으로 바꿔서 해봐도 제가 변환을 잘못한건지 별의별 오류도 다보고 하다가 애초에 재생이 되긴 하는건가 싶어서 크롬 확장프로그램으로 HLS플레이어 설치해서 재생시켜봤는데도 재생이 안됩니다.

Amazon AWS :: Cloudfront로 HLS 스트리밍 구성하기 (tistory.com) 여기보니까 aws transcoder 사용하라고 해서 들어가봤더니 region이 서울은 지원을 안해서 못하는 것 같습니다.

일단 첫번째 문제로 업로드한 m3u8파일로 영상재생 자체가 안되는 것을 보니 업로드 방식에 문제가 있었던것 같습니다. 검색해보니 m3u8파일은 ts파일들의 정보가 담겨있는 파일이라 했는데 로컬에서 변환 후 업로드하여 m3u8이 ts파일의 위치를 제대로 알려주지 못해서 생기는 문제가 아닐까라고 생각했습니다. 제 생각이 맞는지 맞다면 m3u8파일을 수정할 수 있는지 알려주시면 감사하겠습니다.

두번째로 react에서 hls 재생하는 자료를 찾아서 적용해봐도 안되네요 며칠동안 react-hls-player라이브러리나 react-video-js-player라이브러리, video.js라이브러리 등등 여러 라이브러리 설치한 후 구글링으로 적용시켜봤는데 평생 볼 오류 다봤네요 허허.. hls 스트리밍 react에서 하는 관련자료 있으시면 주시면 감사하겠습니다..