React로 AWS S3에 있는 영상파일을 스트리밍하고 싶습니다.

Question

현재 웹을 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에서 하는 관련자료 있으시면 주시면 감사하겠습니다..

코지고지 · Accepted Answer

스트리밍에 필요한 방법이 몇개가 잇는데 1. 구간 별로 나눠서 가져오는 기능 1) 파일 1개사용시 - 서버쪽에서 시간대(사용자의 요청)를 바이트 단위로 변환해야함 (N번째 바이트부터 가져온다) - 전체 동영상의 바이트를 알아서 시간으로 계산해서 요청해야됨 2) 동영상N개 사용시 - 서버쪽에서 시간대(사용자의 요청)을 파일명으로 변환해줘야 함 - 불러온 파일을 하나의 동영상 플레이어로 재생해줘야 함 (이건 안해봐서 모르겠네요) - 따라서 분할된 파일들에 대한 이름을 짓는 규칙을 알고 있어야됨 2. 하나의 플레이어에서 재생되도록 하나의 영상으로 인식시키기- 기본적으로 동영상을 구간별로 나눠서 (바이트코드로) 받게 되면, 브라우저에서 이 영상이 하나의 영상인걸 알 수 없습니다. 안그러면 처음 영상만 재생되고 나머지는 재생이 안되요- 동영상 파일 하나를 쓰는 경우에도, 파일을 일반 mp4가 아니라 스트리밍 되는걸로 포맷변환해줘야 되구요- 영상파일 N개를 안써봐서 모르게쎈요. 아마 하나의 영상인걸 브라우저에서 인식시켜주면서 &#43; 어느 구간(시간대)가 어느 파일인지를 알려줘야할거같네요 3. 바닐라 js &#43; HTTP로 동영상파일 스트리밍 하는법은 아시나요?동영상 재생에 꼭 필요한 헤더가 몇개 있을거에요. 시간인가 용량 range랑 response에서 이게 media라는걸 알려주는거던가 그런거 이걸 근데 백엔드 처리없이 쌩 리액트로 되는지는 모르겟어요 (전 백엔드햇음)

NOAH3112 · Answer

그냥 react-player라이브러리 설치해서 사용할때 url로 m3u8파일 넘겨주니까 바로 재생이되네요 허허허...

React로 AWS S3에 있는 영상파일을 스트리밍하고 싶습니다.

2개의 답변

#videojs 목록