Flutter의 카메라(Camera) 사용법

Flutter 애플리케이션에서 카메라를 사용하면 사진을 찍거나 비디오를 녹화할 수 있습니다. 이는 다양한 멀티미디어 애플리케이션에서 필수적인 기능입니다. 이번 글에서는 Flutter에서 카메라를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. 카메라 패키지 설치

Flutter 애플리케이션에서 카메라를 사용하기 위해 camera 패키지를 설치합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  camera: ^0.10.0+1
  path_provider: ^2.0.6
  path: ^1.8.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. Android 설정

Android 프로젝트에서 카메라를 사용하려면 AndroidManifest.xml 파일을 수정해야 합니다. android/app/src/main/AndroidManifest.xml 파일에 다음 권한을 추가합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_project_name">
    <application>
        ...
    </application>
    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
</manifest>

 

3. iOS 설정

iOS 프로젝트에서 카메라를 사용하려면 Info.plist 파일을 수정해야 합니다. ios/Runner/Info.plist 파일에 다음 설정을 추가합니다.

<key>NSCameraUsageDescription</key>
<string>We need your permission to use the camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need your permission to use the microphone</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need your permission to save photos</string>

 

4. 카메라 초기화

카메라를 사용하려면 먼저 카메라를 초기화해야 합니다. 다음은 카메라를 초기화하고 프리뷰를 표시하는 예제입니다.

import 'package:flutter/material.dart';
import 'package:camera/camera.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final cameras = await availableCameras();
  final firstCamera = cameras.first;

  runApp(MyApp(camera: firstCamera));
}

class MyApp extends StatelessWidget {
  final CameraDescription camera;

  MyApp({required this.camera});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CameraExample(camera: camera),
    );
  }
}

class CameraExample extends StatefulWidget {
  final CameraDescription camera;

  CameraExample({required this.camera});

  @override
  _CameraExampleState createState() => _CameraExampleState();
}

class _CameraExampleState extends State<CameraExample> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    _controller = CameraController(
      widget.camera,
      ResolutionPreset.high,
    );

    _initializeControllerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Camera Example')),
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_controller);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            await _initializeControllerFuture;
            final image = await _controller.takePicture();
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DisplayPictureScreen(imagePath: image.path),
              ),
            );
          } catch (e) {
            print(e);
          }
        },
        child: Icon(Icons.camera_alt),
      ),
    );
  }
}

class DisplayPictureScreen extends StatelessWidget {
  final String imagePath;

  DisplayPictureScreen({required this.imagePath});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Display Picture')),
      body: Image.file(File(imagePath)),
    );
  }
}

 

위 코드는 카메라를 초기화하고 프리뷰를 표시하며, 사진을 찍어서 화면에 표시하는 예제입니다. availableCameras를 사용하여 사용 가능한 카메라 목록을 가져오고, CameraController를 사용하여 카메라를 초기화합니다. CameraPreview 위젯을 사용하여 카메라 프리뷰를 표시하고, takePicture 메서드를 사용하여 사진을 찍습니다.

 

 

 

반응형

 

 

 

5. 비디오 녹화

비디오를 녹화하려면 startVideoRecording 및 stopVideoRecording 메서드를 사용합니다. 다음은 비디오 녹화를 구현하는 예제입니다.

 

import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'dart:io';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final cameras = await availableCameras();
  final firstCamera = cameras.first;

  runApp(MyApp(camera: firstCamera));
}

class MyApp extends StatelessWidget {
  final CameraDescription camera;

  MyApp({required this.camera});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CameraExample(camera: camera),
    );
  }
}

class CameraExample extends StatefulWidget {
  final CameraDescription camera;

  CameraExample({required this.camera});

  @override
  _CameraExampleState createState() => _CameraExampleState();
}

class _CameraExampleState extends State<CameraExample> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;
  bool isRecording = false;

  @override
  void initState() {
    super.initState();
    _controller = CameraController(
      widget.camera,
      ResolutionPreset.high,
    );

    _initializeControllerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Camera Example')),
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_controller);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            await _initializeControllerFuture;
            if (isRecording) {
              final video = await _controller.stopVideoRecording();
              setState(() {
                isRecording = false;
              });
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DisplayVideoScreen(videoPath: video.path),
                ),
              );
            } else {
              await _controller.startVideoRecording();
              setState(() {
                isRecording = true;
              });
            }
          } catch (e) {
            print(e);
          }
        },
        child: Icon(isRecording ? Icons.stop : Icons.videocam),
      ),
    );
  }
}

class DisplayVideoScreen extends StatelessWidget {
  final String videoPath;

  DisplayVideoScreen({required this.videoPath});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Display Video')),
      body: Center(
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: VideoPlayerScreen(videoPath: videoPath),
        ),
      ),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  final String videoPath;

  VideoPlayerScreen({required this.videoPath});

  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.file(File(widget.videoPath))
      ..initialize().then((_) {
        setState(() {});
        _controller.play();
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _controller.value.isInitialized
        ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          )
        : Center(child: CircularProgressIndicator());
  }
}

 

위 코드는 비디오 녹화를 구현하는 예제입니다. startVideoRecording 메서드를 사용하여 비디오 녹화를 시작하고, stopVideoRecording 메서드를 사용하여 비디오 녹화를 중지합니다. 녹화된 비디오는 VideoPlayer 위젯을 사용하여 화면에 표시됩니다.

결론

Flutter 애플리케이션에서 카메라를 사용하면 사진을 찍거나 비디오를 녹화할 수 있습니다. camera 패키지를 사용하여 카메라를 초기화하고, 프리뷰를 표시하며, 사진과 비디오를 촬영하는 방법을 통해 카메라 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 카메라를 효율적으로 사용해보세요. 카메라 기능을 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.