【笔记】Flutter调用摄像头

发表于 更新于 阅读次数：

前言

Flutter调用摄像头

为IOS应用添加权限获取描述

ios/Runner/info.plist
1
2
3
4
<key>NSCameraUsageDescription</key>
<string>此应用需要调用摄像头📸️</string>
<key>NSMicrophoneUsageDescription</key>
<string>此应用需要调用麦克风🎤</string>

下载依赖

1
flutter pub add camera

引入依赖

1
import 'package:camera/camera.dart';

通过摄像头拍照

  1. 通过availableCameras()获取所有摄像头列表
  2. 选择一个摄像头作为CameraController()的构造方法的参数创建controller对象
  3. 将controller对象作为CameraPreview()的构造方法的参数创建preview，用来展示摄像头实时画面
  4. 通过调用controller的takePicture()方法拍照，得到结果对象后，通过path属性获取照片文件的绝对路径
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import 'dart:async';
import 'dart:io';

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

late List<CameraDescription> cameraList;

main() async {
  // 保证所有的插件都加载完毕
  WidgetsFlutterBinding.ensureInitialized();
  // 1. 获取所有摄像头列表
  cameraList = await availableCameras();

  runApp(
    const MaterialApp(
      home: App(),
    ),
  );
}

class App extends StatefulWidget {
  const App({super.key});

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

class AppState extends State<App> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;
  late String imagePath = "";

  @override
  void initState() {
    super.initState();
    // 拿到后置摄像头
    final backCamera = cameraList[0];
    // 拿到前置摄像头
    final frontCamera = cameraList[1];
    // 2. 创建摄像头对象
    _controller = CameraController(
      backCamera,
      ResolutionPreset.max,
    );
    // 初始化摄像头对象
    _initializeControllerFuture = _controller.initialize();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("文本内容")),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            await _initializeControllerFuture;
            // 4. 拍照
            final image = await _controller.takePicture();
            if (!mounted) return;
            setState(() {
              // 获取图片路径，渲染照片
              imagePath = image.path;
              print(image.path);
            });
          } catch (e) {
            print(e);
          }
        },
        child: const Icon(Icons.camera_alt),
      ),
      body: Column(
        children: [
          SizedBox(
            width: 192,
            height: 108,
            child: FutureBuilder<void>(
              future: _initializeControllerFuture,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  // 3. 展示摄像头实时画面
                  return CameraPreview(_controller);
                } else {
                  return const Center(child: CircularProgressIndicator());
                }
              },
            ),
          ),
          SizedBox(
            width: 192,
            height: 108,
            child: imagePath == ""
                ? const Text("照片会在此处显示")
                : Image.file(File(imagePath)),
          ),
        ],
      ),
    );
  }

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

完成

参考文献

camera官方文档
稀土掘金——程序那些事