[Flutter] 회전 메타데이터 문제 해결 - Android에서 동영상이 이상하게 회전돼서 나올 때 (feat. FFmpeg)

📢 문제 상황

 

Flutter로 만든 앱에서 세로 비율 동영상을 재생하려고 했는데, 그림이 다음과 같이 회전해서 나오는 문제가 발생했다.

계속 그러는건 아니고 어떨땐 세로로 잘 나오다가도 어떨땐 저렇게 가로로 누워서 나왔다.

 

처음에는 자동회전 설정에서 MediaQuery나 OrientationBuilder가 빌드 타이밍보다 늦게 orientation 정보를 반영해서 발생하는 문제인 줄 알았다.

특히 initState 또는 초기 빌드 타이밍에서 기기의 실제 orientation 정보와 일치하지 않는 값이 들어오는 경우가 생긴다길래,  WidgetsBinding.instance.addPostFrameCallback부터 LayoutBuilder, AspectRatio 등등 다 시도해도 고쳐지지 않았다.

사실 그 문제라고 하기에는 화면 비율을 기준으로 지정한 아이콘 여백이나 크기는 멀쩡하다는걸 의심했어야 했다..

 

그러다가 video_player 라이브러리의 로그를 보다가 다음과 같은 문제를 발견했다.

동영상의 크기는 width = 1000, height = 1150 으로 설정했는데, 디코더에서는 반대로 인식되고 있던 것이었다.

D/CCodecBuffers:   int32_t width = 1150
D/CCodecBuffers:   int32_t height = 1000

 

그래서 ffmpeg 을 설치하여 영상 메타데이터를 확인해봤다.

 

💡 해결 방법

✅ 1. FFmpeg 설치

설치는 아래 블로거분 내용 참고하였습니다.

https://angelplayer.tistory.com/351

[FFmpeg] FFmpeg 설치 방법 (Windows OS)

 

FFmpeg 사이트

https://ffmpeg.org/

FFmpeg

 

 

 

✅ 2. FFmpeg으로 확인해보기

터미널에서 아래 명령어로 영상 메타데이터를 확인해보았다!

ffmpeg -i "경로/파일이름.mp4"

 

[결과]

✨ rotate:90 이라는 회전 메타데이터가 붙어 있었던 것!

즉, 영상 자체는 1150 X 1000으로 저장돼 있고, 플레이어가 이걸 90도로 돌려서 세로로 보여주도록 메타데이터만 붙어 있었다.

 

 

✅ 3. FFmpeg으로 회전 메타데이터 제거

ffmpeg -i "원본 경로/파일이름" ^
-vf "scale=1000:1150" -metadata:s:v rotate=0 ^
-c:v libx264 -crf 18 -preset veryslow ^
"수정 경로/파일이름"

 

옵션 설명:

• -vf "scale=1000:1150": 영상 크기를 강제로 1000x1150으로 재조정 (가로 1000, 세로 1150)
• -metadata:s:v rotate=0: 회전 메타데이터 완전 제거
• -c:v libx264 -crf 18 -preset veryslow: 고화질 인코딩 
•  

 

 

📢 결과

변환된 파일을 앱에 넣어 다시 확인해보니 다음과 같이 정상적으로 디코딩 되고, 화면도 잘 나오는걸 확인할 수 있었다.

 

 

 

🐸 마무리

애니메이션을 만들 때, 간단한 영상 편집 앱(FlipaClip)을 사용하여 저렇게 테블릿을 눕혀서 작업했는데, 아마 이때 메타데이터에 rotate가 들어간 것 같다.

근데, 보여지는건 저렇게 가로세로 비율이 멀쩡해서...진짜....FFmpeg으로 안까봤으면...모를 일.......

만약 다른건 다 멀쩡한데, 동영상만 이상하게 나온다면 비디오 자체의 메타데이터를 살펴보는 것을 꼭꼭 추천한다.

 

 

 

아무튼 결론은..

"로그 잘 보자!!!!"