[react-native]비디오 가로 세로 싸이즈 저장하기 (portrait/landscape) - 싸이즈 이상 표현

리액트 네이티브 구현하면서 겪었던 ... 다른분들은 안겪었으면 해서 남기는 글

앱에서 비디오 업로드를 할때 imagePicker라던지 ... 여튼 picker를 사용할 것이다.

picker로 파일을 선택하는 순간 해당 비디오 파일의 width/height/duration 등등의 기본정보를 가져온다.

값을 담아서 서버로 예쁘게 쏘아줬다.

난 이게 끝인줄 알았다.

이제 목록을 만들어 표시를 해보자.

어.... 비디오 높이가 둘쑥날쑥한다.

디버깅을 한다.

우리는 핸드폰으로 촬영할때 가로 또는 세로로 촬영을 한다.

이걸 핸드폰이 알아서 이쁘게 세로모드로 찍었으면 height가 길게 가로모드면 width가 길게 저장해주면 얼마나 쉽겠냐만은 ... 현실은 x이다.

이제 어떻게 정확한 값을 잡아 오는지 언급하겠다.

<Video onLoad={video => video.naturalSize }/> 

naturalSize : 
{orientation: 'portrait' | 'landscape' , width: number, height: number}

비디오가 로딩되면서 비디오 고유값을 가져올수 있다.
여기에 들어오는 값이 정확하다.

landscape : 가로모드, width / height 값이 정확하다.
ex. landsacpe / width : 700 / height : 300

portrait : 세로모드 , width / height 값이 반대다.
ex. portrait / width: 700 / height : 300

저장할때 portrait 이면 가로 세로 값을 교차해서 전달하면 된다.

끝.

인줄 알았지만 안드로이드는 별개다.

주의: 똑같은 파일을 로딩했지만 방향/가로/세로 값의 정보는 다르다. !!!!

landscape : 가로모드, width / height 값이 정확하다.
ex. landsacpe / width : 700 / height : 300

portrait : 세로모드 , width / height 값이 정확하다.
ex. portrait / width: 300 / height : 700

OS별로 다르게 적용하길 바란다.
아래는 OS 확인하는 법 / 리액트 네이티브 내장 함수다.

Platform.OS === 'android' 

진짜 끝.