使用 Camera 插件实现拍照功能

目录

很多应用都需要使用到设备的相机模块拍摄图片和视频。因此，Flutter 提供了 camera 插件。 camera 插件提供了一系列可用的相机，并使用特定的相机展示相机预览、拍照、录视频。

Many apps require working with the device’s cameras to take photos and videos. Flutter provides the camera plugin for this purpose. The camera plugin provides tools to get a list of the available cameras, display a preview coming from a specific camera, and take photos or videos.

这个章节将会讲解如何使用 camera 插件去展示相机预览、拍照并显示。

This recipe demonstrates how to use the camera plugin to display a preview, take a photo, and display it using the following steps:

步骤

Directions

  1. 添加所需依赖

    Add the required dependencies.

  2. 获取可用相机列表

    Get a list of the available cameras.

  3. 创建并初始化 CameraController

    Create and initialize the CameraController.

  4. 使用 CameraPreview 展示相机的帧流

    Use a CameraPreview to display the camera’s feed.

  5. 使用 CameraController 拍摄一张图片

    Take a picture with the CameraController.

  6. 使用 Image 组件展示图片

    Display the picture with an Image widget.

1. 添加所需依赖

1. Add the required dependencies

为了完成这个章节，你需要向你的应用添加三个依赖：

To complete this recipe, you need to add three dependencies to your app:

camera
提供使用设备相机模块的工具

camera
Provides tools to work with the cameras on the device.

path_provider
寻找存储图片的正确路径

path_provider
Finds the correct paths to store images.

path
创建适配任何平台的路径

path
Creates paths that work on any platform.

dependencies:
  flutter:
    sdk: flutter
  camera:
  path_provider:
  path:

2. 获取可用相机列表

2. Get a list of the available cameras

接着，你可以使用 camera 插件获取可用相机列表。

Next, get a list of available cameras using the camera plugin.

// Ensure that plugin services are initialized so that `availableCameras()`
// can be called before `runApp()`
WidgetsFlutterBinding.ensureInitialized();

// Obtain a list of the available cameras on the device.
final cameras = await availableCameras();

// Get a specific camera from the list of available cameras.
final firstCamera = cameras.first;

3. 创建并初始化 CameraController

3. Create and initialize the CameraController

在选择了一个相机后，你需要创建并初始化 CameraController。在这个过程中，与设备相机建立了连接并允许你控制相机并展示相机的预览帧流。

Once you have a camera, use the following steps to create and initialize a CameraController. This process establishes a connection to the device’s camera that allows you to control the camera and display a preview of the camera’s feed.

实现这个过程，请依照以下步骤：

To achieve this, please:

  1. 创建一个带有 State 类的 StatefulWidget 组件

    Create a StatefulWidget with a companion State class.

  2. 添加一个变量到 State 类来存放 CameraController

    Add a variable to the State class to store the CameraController.

  3. 添加另外一个变量到 State 类中来存放 CameraController.initialize() 返回的 Future

    Add a variable to the State class to store the Future returned from CameraController.initialize().

  4. 在 initState() 方法中创建并初始化控制器

    Create and initialize the controller in the initState() method.

  5. 在 dispose() 方法中销毁控制器

    Dispose of the controller in the dispose() method.

// A screen that allows users to take a picture using a given camera.
class TakePictureScreen extends StatefulWidget {
  const TakePictureScreen({
    Key? key,
    required this.camera,
  }) : super(key: key);

  final CameraDescription camera;

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

class TakePictureScreenState extends State<TakePictureScreen> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    // To display the current output from the Camera,
    // create a CameraController.
    _controller = CameraController(
      // Get a specific camera from the list of available cameras.
      widget.camera,
      // Define the resolution to use.
      ResolutionPreset.medium,
    );

    // Next, initialize the controller. This returns a Future.
    _initializeControllerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    // Dispose of the controller when the widget is disposed.
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Fill this out in the next steps.
    return Container();
  }
}

4. 在 initState 方法中创建并初始化控制器

4. Use a CameraPreview to display the camera’s feed

接着，你能够使用 camera 中的 CameraPreview 组件来展示相机预览帧流。

Next, use the CameraPreview widget from the camera package to display a preview of the camera’s feed.

你可以使用 FutureBuilder 完成这个任务。

Use a FutureBuilder for exactly this purpose.

// You must wait until the controller is initialized before displaying the
// camera preview. Use a FutureBuilder to display a loading spinner until the
// controller has finished initializing.
FutureBuilder<void>(
  future: _initializeControllerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      // If the Future is complete, display the preview.
      return CameraPreview(_controller);
    } else {
      // Otherwise, display a loading indicator.
      return const Center(child: CircularProgressIndicator());
    }
  },
)

5. 使用 CameraController 拍照

5. Take a picture with the CameraController

You can use the CameraController to take pictures using the takePicture() method, which returns an XFile, a cross-platform, simplified File abstraction. On both Android and IOS, the new image is stored in their respective cache directories, and the path to that location is returned in the XFile.

In this example, create a FloatingActionButton that takes a picture using the CameraController when a user taps on the button.

Taking a picture requires 2 steps:

  1. Ensure that the camera is initialized.
  2. Use the controller to take a picture and ensure that it returns a Future<XFile>.

最好把这些操作都放在 try / catch 方法块中来处理可能发生的异常。

It is good practice to wrap these operations in a try / catch block in order to handle any errors that might occur.

FloatingActionButton(
  // Provide an onPressed callback.
  onPressed: () async {
    // Take the Picture in a try / catch block. If anything goes wrong,
    // catch the error.
    try {
      // Ensure that the camera is initialized.
      await _initializeControllerFuture;

      // Attempt to take a picture and then get the location
      // where the image file is saved.
      final image = await _controller.takePicture();
    } catch (e) {
      // If an error occurs, log the error to the console.
      print(e);
    }
  },
  child: const Icon(Icons.camera_alt),
)

6. 在 dispose 方法中销毁控制器

6. Display the picture with an Image widget

如果你能成功拍摄图片，你就可以使用 Image 组件展示被保存的图片。在这个示例中，这张图片是以文件的形式存储在设备中。

If you take the picture successfully, you can then display the saved picture using an Image widget. In this case, the picture is stored as a file on the device.

因此，你需要提供一个 File 给 Image.file 构造函数。你能够通过传递你在上一步中创建的路径来创建一个 File 类的实例。

Therefore, you must provide a File to the Image.file constructor. You can create an instance of the File class by passing the path created in the previous step.

Image.file(File('path/to/my/picture.png'))

完整样例

Complete example

import 'dart:async';
import 'dart:io';

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

Future<void> main() async {
  // Ensure that plugin services are initialized so that `availableCameras()`
  // can be called before `runApp()`
  WidgetsFlutterBinding.ensureInitialized();

  // Obtain a list of the available cameras on the device.
  final cameras = await availableCameras();

  // Get a specific camera from the list of available cameras.
  final firstCamera = cameras.first;

  runApp(
    MaterialApp(
      theme: ThemeData.dark(),
      home: TakePictureScreen(
        // Pass the appropriate camera to the TakePictureScreen widget.
        camera: firstCamera,
      ),
    ),
  );
}

// A screen that allows users to take a picture using a given camera.
class TakePictureScreen extends StatefulWidget {
  const TakePictureScreen({
    Key? key,
    required this.camera,
  }) : super(key: key);

  final CameraDescription camera;

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

class TakePictureScreenState extends State<TakePictureScreen> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    // To display the current output from the Camera,
    // create a CameraController.
    _controller = CameraController(
      // Get a specific camera from the list of available cameras.
      widget.camera,
      // Define the resolution to use.
      ResolutionPreset.medium,
    );

    // Next, initialize the controller. This returns a Future.
    _initializeControllerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    // Dispose of the controller when the widget is disposed.
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Take a picture')),
      // You must wait until the controller is initialized before displaying the
      // camera preview. Use a FutureBuilder to display a loading spinner until the
      // controller has finished initializing.
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the Future is complete, display the preview.
            return CameraPreview(_controller);
          } else {
            // Otherwise, display a loading indicator.
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        // Provide an onPressed callback.
        onPressed: () async {
          // Take the Picture in a try / catch block. If anything goes wrong,
          // catch the error.
          try {
            // Ensure that the camera is initialized.
            await _initializeControllerFuture;

            // Attempt to take a picture and get the file `image`
            // where it was saved.
            final image = await _controller.takePicture();

            // If the picture was taken, display it on a new screen.
            await Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => DisplayPictureScreen(
                  // Pass the automatically generated path to
                  // the DisplayPictureScreen widget.
                  imagePath: image.path,
                ),
              ),
            );
          } catch (e) {
            // If an error occurs, log the error to the console.
            print(e);
          }
        },
        child: const Icon(Icons.camera_alt),
      ),
    );
  }
}

// A widget that displays the picture taken by the user.
class DisplayPictureScreen extends StatelessWidget {
  final String imagePath;

  const DisplayPictureScreen({Key? key, required this.imagePath})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Display the Picture')),
      // The image is stored as a file on the device. Use the `Image.file`
      // constructor with the given path to display the image.
      body: Image.file(File(imagePath)),
    );
  }
}