티스토리 뷰

반응형

만들고 있는 앱에 새로운 기능이 필요하다. 

사진을 찍는 기능과 동영상을 찍는 기능이다. 

 

구글에서 검색해보니 카메라를 사용할 수 있게 해주는 플러그인은 Flutter 에서 만들어준 것 하나 밖에 없는 듯하다. 

https://pub.dev/packages/camera

 

camera | Flutter Package

A Flutter plugin for controlling the camera. Supports previewing the camera feed, capturing images and video, and streaming image buffers to Dart.

pub.dev

고민할 대안이 없으니 바로 사용을 해보았다. 패키지에 설명된 사용방법으로는 빠르게 실험해보기에 부족해서 구글링을 해보았다. 그중에서 코드와 함께 바로 따라 할수 있는 것이 있어 링크를 아래에 남겨 본다. 

 

https://medium.com/@fernnandoptr/how-to-use-camera-in-flutter-flutter-camera-package-44defe81d2da

 

How to Use Camera in Flutter — Flutter Camera Package

Nowadays, almost every mobile app out there requires working with the device’s cameras to perform various tasks. To access the device’s…

medium.com

위 링크에 있는 설명과 함께 코드를 사용하면 동작은 잘 한다. 

 

문제는 카메라에서 지원하는 카메라의 가로 세로 비율을 설정하는 기능이 없어서 아쉽다. 

좀 더 자세히 설명하면, 

 

샤오미의 경우 카메라 앱을 실행한 뒤 옵션을 열어보면 아래 사진처럼,세로모드(portrait)일때 가로x세로 비율이 1:1, 3:4, 9:16, Full  이렇게 4가지 를 선택할 수 있다. (해상도는 '사진의 품질' 에서 선택이 가능하며, 테스트 중에는 높음, 보통, 낮음 중에서 높음으로 설정하였다.)

Full 로 설정하고 사진을 찍으면 사진의 세로x가로 비율은 4208x2632

16:9 일때는 4208x2368,

4:3 일때는 4208x3120,

1:1 일때는 3120x3120, 

인 것을 확인할 수 있다. 

따라서 후면 카메라 렌즈의 최대 해상도는 4208X3120 인 것으로 생각되어진다. 

 

문제는, 

카메라 플러그인을 사용하면, 초기화시에 해상도를 선택할 수는 있지만, 가로 세로 비율을 선택할 수 있는 방법이 없다는 것이다.

위의 코드를 보면 카메라 컨트롤러의 인스턴스를 생성할때 입력할 수 있는 파라미터중 ResolutionPreset 이 있는데 이는, 다음과 같이 정의 되어있다.  

즉, 화면의 가로 세로 비율은 미리 위와 같이 정의되어있기 때문에 내가 원하는 비율로 설정 할 수 가 없다. 

위에서 설정가능한 모든 해상도에 대해서 사진을 찍어서 가로x세로 픽셀 값을 확인해보니 아래와 같았다.

 

low 로 찍었을 때 320 x 240

medium 으로 찍었을 때 720 x 480

high 로 찍었을 때 1280 x 720

veryHigh 로 찍었을 때 1920 x 1080

ultraHigh 로 찍었을 때 x 3840 x 2160  (샤오미에서는 화면 바뀔때 이미지 로딩 딜레이가 많이 느껴지기 시작. 약 1초)

max로 찍었을 때 3840 x 2160

 

높은 해상도가 필요해서 해상도를 veryHigh 로 설정할 경우, 세로모드에서 사진을 찍었을 때 1080x1920사진이 나오게되고 이는 9:16의 비율을 가진다. 

그런데 화면에서 사진을 표시할 위젯의 가로 세로 비율이 3:4 이거나 1:1 이면?

  • 방법1. 위젯의 가로에 맞춰서 이미지를 그린뒤 위젯의 세로를 벗어나는 부분은 자르기(clipping)
  • 방법2. 위젯의 바탕색을 흰색 또는 검정색으로 설정한뒤 위젯의 세로에 맞춰서 이미지를 그리기 (세로부분에 채워지지 않는 영역이 생김)

방법1은 이미지의 일부가 화면에 표시되지 않고, 방법2는 사진을 표시하려는 위젯을 꽉채우지 않고 여백이 생기는 문제가 있다. 그래도 사진이 짤리는 것(=정보 손실) 보다 낫기 때문에 보통 방법2 를 선택한다.

반응형

'Dart & Flutter > Widget & Package' 카테고리의 다른 글

Riverpod 공부  (0) 2024.07.03
Deferred Components  (0) 2023.03.20
iOS 와 안드로이드에서의 파일 저장 위치  (0) 2023.02.08
month의 week number를 계산하는 extention  (0) 2022.08.09
Getx 정리  (0) 2022.04.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/07   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함