Camera 사용해 보기 (사진 & 동영상 촬영하기)

camera | Flutter Package
image_gallery_saver | Flutter Package

이번 글에서는 디바이스 카메라 기능을 만들어보는 방법에 대해서 살펴보도록 하겠다.

일반적으로 카메라는 디바이스에 기본적으로 제공되는 기능인데, image_picker 라이브러리를 사용하면 디바이스 카메라를 오픈하여 사진을 찍고 동영상을 촬영할 수 있다. 하지만 디바이스 카메라 기본 앱을 사용해야 하기에, 앱 내에 넣을 수 없다. 직접 카메라를 개발할 수 있는데 camera 라이브러리를 사용하면 개발할 수 있다.

재미삼아 카메라 기능의 앱을 만들어보려고 하는데, 개발 전 기술 체크 차원에서 camera 라이브러리에 대해서 사전에 살펴보려고 한다.

여기서는 camera 라이브러리에서만 살펴볼 것이기 때문에, 사진 및 저장소 관련된 퍼미션에 대해서는 다루지 않도록 하겠다. 이 부분은 camera 라이브러리 문서에 자세히 나와있으니 문서를 참고하길 바란다.

Camera

camera 라이브러리를 사용해서 사진 및 동영상 촬영을 하고 파일을 저장하기 위해 image_gallery_saver 라이브러리를 사용했다.

dependencies

dependencies:
	camera: ^0.10.5+5
	image_gallery_saver: ^2.0.3

availableCameras

카메라 기능을 사용하기 위해 먼저, 사용 가능한 카메라를 가져와야 한다.

디바이스의 카메라 기능이 없을 수는 없겠지만 전/후면 카메라의 어떤 카메라를 사용할지를 지정하여야 하기 때문에 반드시 필요한 작업이다.

availableCameras() 기능을 사용하면 디바이스의 사용가능 카메라 목록을 얻을 수 있다.

일반적으로 리스트 목록의 첫 번째 인덱스가 후면 카메라이고, 두번 째 인덱스 카메라가 전면 카메라이다.

List<CameraDescription> descriptions = await availableCameras();

initialize

카메라를 사용하기 위해 CameraController를 사용해야 하는데, 초기 값을 지정해주고 초기화 과정을 진행해야 한다.

CameraController를 선언할 때에 CameraDescription, ResolutionPreset 초기 값을 지정해야 한다.

CameraDescription이 바로 위에서 가져온 카메라 목록 중 어떤 카메라를 선택할지에 대한 값이다.

ResolutionPreset 뜻 그대로 사전 해상도를 지정하는 것인데, 사전 해상도는 low, medium, high, veryHigh, ultraHigh, max 해상도를 선택 할 수 있다.

late CameraController controller;
controller = CameraController(widget.descriptions[0], ResolutionPreset.high)
      ..initialize();

// ResolutionPreset.low
// ResolutionPreset.medium
// ResolutionPreset.high
// ResolutionPreset.veryHigh
// ResolutionPreset.ultraHigh
// ResolutionPreset.max

setDescription

카메라 전환 기능을 만들고 싶다면 availableCameras()에서 가져온 카메라 목록의 카메라 값을 넣어주면 된다.

CameraController의 setDescription() 기능을 사용할 수 있다.

    if (controller.description.lensDirection == CameraLensDirection.back) {
      controller.setDescription(widget.descriptions[1]);
    } else {
      controller.setDescription(widget.descriptions[0]);
    }

setZoomLevel

줌 기능은 CameraController의 setZoomLevel()에 원하는 레벨 값을 넣어주면 되는데, 디바이스 마다 최소/최대 줌의 레벨이 다르기 때문에 줌 레벨을 먼저 알고 있어야 한다.

최소 줌 레벨보다 낮게 설정하면 에러가 발생한다.

getMinZoomLevel

controller.getMinZoomLevel();

getMaxZoomLevel

controller.getMaxZoomLevel();

double offset;
controller.setZoomLevel(offset);

setExposureOffset

카메라 노출 값 설정도 가능하다. 사용 방법은 zoom 사용법과 동일하게 사용하면 된다.

getMinExposureOffset

controller.getMinExposureOffset();

getMaxExposureOffset

controller.getMaxExposureOffset();

double offset;
controller.setExposureOffset(offset);

takePicture

가장 중요한 기능인 사진을 찍어보도록 하자. 사용법은 간단하다. takePicture()를 호출하면 된다.

await controller.takePicture();

하지만 이렇게 사진을 촬영하더라도 저장은 각자가 원하는 방식으로 해야한다.

디바이스 저장소에 저장할 수도 있고, 서버에 저장을 할 수도 있다.

takePicture()는 반환 값으로 XFile 객체를 반환하게 된다. XFile 객체의 path 값을 사용해서 디바이스 이미지 저장소에 저장을 하도록 하자.

저장소에 파일 데이터를 쉽게 저장하기 위해 image_gallery_server 라이브러리를 사용하였다.

dependencies

dependencies:
	image_gallery_saver: ^2.0.3

saveFile() 기능을 사용해서 저장을 쉽게 할 수 있다. 추가로 File 데이터 뿐만 아니라 Image 데이터를 Unit8List 타입으로 저장할 수 있다.

XFile? rawImage = await controller.takePicture();
await ImageGallerySaver.saveFile(rawImage.path);

Recording

마지막으로 동영상 촬영에 대해서 살펴보도록 하겠다. 동영상은 start와 stop을 사용하면 된다. 중간에 멈출 수도 있다.

startVideoRecording

await controller.startVideoRecording()

stopVideoRecording

await controller.stopVideoRecording()

resumeVideoRecording

await controller.resumeVideoRecording()

동영상 촬영도 사진 촬영과 마찬가지로 촬영이 끝난 파일을 어딘가에 저장을 해야할 것이다.

동영상 촬영은 start, resume 기능에는 반환 값이 없지만, stop 기능에 반환 값으로 XFile 객체를 얻을 수 있다.

  Future<void> stopRecording() async {
    XFile? file = await controller.stopVideoRecording();
    await ImageGallerySaver.saveFile(file.path);
  }

마무리

간단하게 camera 라이브러리에 대해서 살펴 봤는데, 인앱으로 카메라 기능이 필요한 경우를 제외하고는 단순히 영상을 찍게하고 사진을 촬영한 이미지만 필요한 경우에는 디바이스 카메라 앱을 사용하는게 더 퀵하게 개발할 수 있을 것 같다.

camera 라이브러리도 충분히 사용성 좋게 배포되어 있고, 저는 인앱에 카메라 기능을 포함하여야 하기 때문에, 다음 번에는 좀 더 자세하게 다뤄보고 공유하도록 하겠다.