如何快速便捷的使用相机拍照抖音

terry 2年前 (2023-09-22) 阅读数 79 #移动小程序

在app中使用相机绝对是一件常事。相机肯定包含了底层原生代码的调用。那么如何快速、方便地使用Flutter中的摄像头功能呢？想要布料吗？

让我们看看。

使用相机前的准备工作

Flutter 提供了一个名为 Camera 的插件来使用相机。我们需要先安装这个插件。

安装插件的步骤非常简单，如下：

flutter pub add camera

Copy

此命令将在 pubspec.xml 中添加以下内容：

dependencies:
  flutter:
    sdk: flutter

  camera: ^0.10.0+1

Copy 我们还需要“保存照片”由于是相机拍摄的，所以我们还需要使用path_provider和path这两个插件。

我们用同样的方法安装这两个插件。

安装完成后，我们就可以愉快地在代码和Flutter中使用相机了。

在使用相机之前，我们还需要获取相应的权限信息。例如，在IOS中，我们需要在ios/Runner/Info.plist中添加以下权限信息：

<key>NSCameraUsageDescription</key>
<string>flutter需要用到你的照相机</string>

Copy

在andorid中需要与minSdkVersion>=21一起使用。

在Flutter中使用Camera

相机插件为我们提供了一系列的功能，方便我们使用相机。

要使用相机，您需要按照以下步骤操作。由于现在的手机都有多个摄像头，所以我们需要通过API获取可以使用的摄像头列表。

接下来我们使用选中的摄像机进行一些控制操作，然后我们需要使用对应的摄像机视图来显示对应的摄像机图像。

最后调用相机相关拍摄功能进行拍摄。

听起来很复杂，但其实只要按照上面的顺序，一切都很简单。

首先我们需要获取可用摄像机的列表。此步骤是通过调用相机包中的 availableCameras 方法来完成的：

Future<List<CameraDescription>> availableCameras() async {
  return CameraPlatform.instance.availableCameras();
}

copy

availableCameras 是一个异步方法，它返回一个 future 对象，其值为 CameraDescription 列表。

CameraDescription 是摄像头的描述文件：

  const CameraDescription({
    required this.name,
    required this.lensDirection,
    required this.sensorOrientation,
  });

Copy

Name 是摄像头的名称，LensDirection 是摄像头指向的方向，SensorOrientation 是传感器的方向，表示您的手机是否放置通常或选择 90 度的位置。

由于availableCameras是一个异步方法，所以我们需要将其包装在一个异步方法中来调用：

Future<void> main() async {
  // 保证所有的插件都加载完毕
  WidgetsFlutterBinding.ensureInitialized();

  //获取摄像头列表
  final cameras = await availableCameras();

  //拿到第一个摄像头
  final firstCamera = cameras.first;
  ....

Copy

这里我们得到了第一个摄像头。请注意，这里的第一个相机是 CameraDescription 对象。

由于模拟器上没有相机，所以当你在模拟器上运行上面的程序时，会抛出以下异常：

[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: Bad state: No element
#0      List.first (dart:core-patch/growable_array.dart:343:5)

Copy

为了控制这个相机，我们需要创建一个CameraController对象：

class CameraAppState extends State<CameraApp> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    _controller = CameraController(
      widget.camera,
      ResolutionPreset.medium,
    );
    _initializeControllerFuture = _controller.initialize();
  }

复制

CameraController的构造函数需要一个CameraDescription对象和分辨率等信息，也必须进行初始化。这里我们调用它的初始化方法。

这里的初始化方法也是异步方法。

CameraController初始化后要使用相机，我们需要在返回的widget中使用FutureBuilder来构建：

body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_controller);
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      )

复制

具体要显示什么内容？这里使用的是相机包自带的CameraPreview组件。

CameraPreview必须传入一个CameraController对象，也就是我们之前创建的对象。

最后一步是调用CameraController方法进行拍照。我们把拍照的逻辑放在FloatingActionButton中，如下图：

floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            await _initializeControllerFuture;
            final image = await _controller.takePicture();

            if (!mounted) return;

            await Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => DisplayPictureScreen(
                  imagePath: image.path,
                ),
              ),
            );
          } catch (e) {
            print(e);
          }
        },
        child: const Icon(Icons.camera_alt),
      )

Copy

具体逻辑是调用controller.takePicture方法进行拍照。在新的小部件中显示捕获的图像。