개발자
프론트엔드에서 업로드 동영상 된 프레임(fps) 정보 확인하는 법 있나요?
동영상 업로드 후 동영상 이동 버튼에 프레임 단위로 이동하는 버튼을 만들고자 합니다. 그래서 동영상 업로드 이후 24fps 29.97fps 이렇게 추출해서 1/24 1/29.97 이동 버튼으로 1프레임 단위씩 이동하는 것이 목표입니다. 지금 생각 중인 방법은 3가지 입니다. 1. FFmpeg.js 으로 프론트엔드에서 처리 하는 방법 2. 동영상을 백엔드 서버에 전송 후 백엔드 서버에서 로직 처리 후 정확한 값(fps) 요청해서 받아 오는 방법 3. js코드 근사치에 가까운 값 추출해서 사용하기 (정확도 너무 낮습니다. 24fps 인데 추출 결과 10fps, 29.97fps의 경우 17fps)
답변 1
FFprobe를 사용하시면 됩니다. 아래 괜찮게 구현된 오픈소스가 있어 공유드립니다. https://github.com/alfg/ffprobe-wasm
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 04월 26일
프론트엔드에서 동영상의 프레임(fps) 정보를 확인하는 것은 어렵습니다. React나 JavaScript로는 비디오의 메타데이터를 바로 획득하기가 불가능하며, 프레임 비율이라는 데이터는 일반적으로 파일 자체 또는 인코딩 과정에서만 알 수 있습니다. 그래서 제시해주신 방법 중 하나인 "2. 동영상을 백엔드 서버에 전송 후 백엔드 서버에서 로직 처리 후 정확한 값(fps) 요청해서 받아 오는 방법"이 가장 현실적인 해결책으로 보입니다. 1번과 3번의 방법도 가능하지만, 이 경우 추가적인 외부 패키지(Ffmpeg.js 등)가 필요하거나 정확도가 떨어집니다. 특히 3번 방법의 경우 실제 비디오 품질에 영향을 줘 사용자 경험이 좋지 않을 수 있음을 고려해야 합니다. 따라서 제안드리고 싶은 접근 방식은 백엔드에서 FFmpeg와 같은 도구를 사용하여 비디오 업로드 시 FPS 정보를 추출하고 API 응답을 통해 프론트엔드에 전달하는 것입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!