Flutter

如果您曾經構建或使用過任何大型移動應用程序，則該應用程序很有可能會使用相機功能。如果您查看PlayStore中的熱門圖表，您會發現許多應用程序都使用相機執行各種任務。Flutter提供了一個相機插件，可以訪問Android和iOS設備上的相機。在本文中，我們將探索Flutter相機插件，並且將構建一個小型相機應用程序以查看該插件可以做什麼和不能做什麼。

在繼續前進之前，讓我們看看我們將要構建什麼。這個應用程式將可以拍照和錄製影片。您可以在前置和後置攝像頭之間切換。還有一個畫廊，您可以在其中查看捕獲的圖像和錄製的視頻，並與其他應用程序共享它們或從設備中刪除它們。

入門

該應用程序使用以下5個依賴項。您需要將這些依賴項添加到pubspec.yaml。

• camera：提供用於與設備上的攝像頭配合使用的工具。
• path_provider：查找正確的路徑來存儲媒體。
• video_player：播放錄製的視頻。
• esys_flutter_share：用於與其他應用程序共享媒體文件。
• thumbnails：用於從視頻生成縮略圖。

dependencies:
 camera:
 path_provider:
 thumbnails:
 git:
 url: https://github.com/divyanshub024/Flutter_Thumbnails.git
 video_player:
 esys_flutter_share:

接下來，將文件中的最低Android SDK版本更新為21（或更高）android/app/build.gradle。

將以下幾行添加到您的ios/Runner/Info.plist：

 
NSCameraUsageDescription
<string>Can I use the camera please?/<string>
NSMicrophoneUsageDescription
<string>Can I use the mic please?/<string>
NSAppTransportSecurity
<dict>
 NSAllowsArbitraryLoads
 <true>
/<dict>

獲取可用相機列表

首先，我們將使用相機插件獲取相機列表。

List<cameradescription> _cameras;
@override
void initState() {
 _initCamera();
 super.initState();
}
Future<void> _initCamera() async {
 _cameras = await availableCameras();
}
/<void>/<cameradescription>

初始化相機控制器

現在，我們有可用相機的列表。接下來，我們將初始化相機控制器。攝像機控制器用於控制設備攝像機。CameraController接受兩個值CameraDescription和ResolutionPreset。最初，我們給出了一個攝像機說明，因為_camera[0]它是我們的後置攝像機。

注意：這裡我們ResolutionPreset以介質為準。如果凍結相機，請嘗試避免使用更高的分辨率。請查看此問題以獲取更多詳細信息。

CameraController _controller;

Future<void> _initCamera() async {
 _controller = CameraController(_cameras[0], ResolutionPreset.medium);
 _controller.initialize().then((_) {
 if (!mounted) {
 return;
 }
 setState(() {});
 });
}

@override
void dispose() {
 _controller?.dispose();
 super.dispose();
}
/<void>

相機預覽

設置好相機後，我們將使用CameraPreview小部件顯示預覽供稿。在顯示攝像機預覽之前，我們必須等待CameraController初始化。

@override
Widget build(BuildContext context) {
 if (_controller != null) {
 if (!_controller.value.isInitialized) {
 return Container();
 }
 } else {
 return const Center(
 child: SizedBox(
 width: 32,
 height: 32,
 child: CircularProgressIndicator(),
 ),
 );
 }
}

初始化攝像機後，我們將顯示攝像機預覽。

return Scaffold(
 backgroundColor: Theme.of(context).backgroundColor,
 key: _scaffoldKey,
 extendBody: true,
 body: Stack(
 children: <widget>[
 _buildCameraPreview(),
 ],
 ),
);
/<widget>

在內部，_buildCameraPreview()我們將攝像機預覽縮放到屏幕尺寸，以使其看起來為全屏。

Widget _buildCameraPreview() {
 final size = MediaQuery.of(context).size;
 return ClipRect(
 child: Container(
 child: Transform.scale(
 scale: _controller.value.aspectRatio / size.aspectRatio,
 child: Center(
 child: AspectRatio(
 aspectRatio: _controller.value.aspectRatio,
 child: CameraPreview(_controller),
 ),
 ),
 ),
 ),
 );
}

切換相機

下一步是要能夠在前後攝像頭之間切換或切換。為此，我們首先將圖標按鈕添加到stack widget中。

body: Stack(
 children: <widget>[
 _buildCameraPreview(),
 Positioned(
 top: 24.0,
 left: 12.0,
 child: IconButton( 

 icon: Icon(
 Icons.switch_camera,
 color: Colors.white,
 ),
 onPressed: _onCameraSwitch,
 ),
 ),
 ],
),
/<widget>

_onCameraSwitch按下時，此圖標按鈕調用方法。在此方法中，我們將先處理，CameraController然後使用new初始化CameraController和新的CameraDescription。

Future<void> _onCameraSwitch() async {
 final CameraDescription cameraDescription =
 (_controller.description == _cameras[0]) ? _cameras[1] : _cameras[0];
 if (_controller != null) {
 await _controller.dispose();
 }
 _controller = CameraController(cameraDescription, ResolutionPreset.medium);
 _controller.addListener(() {
 if (mounted) setState(() {});
 if (_controller.value.hasError) {
 showInSnackBar('Camera error ${_controller.value.errorDescription}');
 }
 });

 try {
 await _controller.initialize();
 } on CameraException catch (e) {
 _showCameraException(e);
 }

 if (mounted) {
 setState(() {});
 }
}
/<void>

相機控制視圖

在屏幕底部，我們將有一個控件視圖，該視圖基本上包含3個按鈕。首先去畫廊，其次去捕捉圖像或錄製視頻，第三次在圖像捕捉和視頻錄製之間切換。

return Scaffold(
 backgroundColor: Theme.of(context).backgroundColor,
 key: _scaffoldKey,
 extendBody: true,
 body: ...
 bottomNavigationBar: _buildBottomNavigationBar(),
);

該視圖將顯示在底部導航欄中。不要忘記添加extendBody: true.

Widget _buildBottomNavigationBar() {
 return Container(
 color: Theme.of(context).bottomAppBarColor,
 height: 100.0,
 width: double.infinity,
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceAround,
 children: <widget>[
 FutureBuilder(
 future: getLastImage(),
 builder: (context, snapshot) {
 if (snapshot.data == null) {
 return Container(
 width: 40.0,
 height: 40.0,
 );
 }
 return GestureDetector(
 onTap: () => Navigator.push(
 context,
 MaterialPageRoute(
 builder: (context) => Gallery(),
 ),
 ),
 child: Container(
 width: 40.0,
 height: 40.0,
 child: ClipRRect(
 borderRadius: BorderRadius.circular(4.0),
 child: Image.file(
 snapshot.data,
 fit: BoxFit.cover,
 ),
 ),
 ),
 ); 

 },
 ),
 CircleAvatar(
 backgroundColor: Colors.white,
 radius: 28.0,
 child: IconButton(
 icon: Icon(
 (_isRecordingMode)
 ? (_isRecording) ? Icons.stop : Icons.videocam
 : Icons.camera_alt,
 size: 28.0,
 color: (_isRecording) ? Colors.red : Colors.black,
 ),
 onPressed: () {
 if (!_isRecordingMode) {
 _captureImage();
 } else {
 if (_isRecording) {
 stopVideoRecording();
 } else {
 startVideoRecording();
 }
 }
 },
 ),
 ),
 IconButton(
 icon: Icon(
 (_isRecordingMode) ? Icons.camera_alt : Icons.videocam,
 color: Colors.white,
 ),
 onPressed: () {
 setState(() {
 _isRecordingMode = !_isRecordingMode;
 });
 },
 ),
 ],
 ),
 );
}
/<widget>

捕獲圖像

使用相機控制器捕獲圖像非常容易。

1. 檢查相機控制器是否已初始化。
2. 構造目錄並定義路徑。
3. 使用CameraController捕獲圖像並將其保存到給定路徑。

void _captureImage() async {
 if (_controller.value.isInitialized) {
 final Directory extDir = await getApplicationDocumentsDirectory();
 final String dirPath = '${extDir.path}/media';
 await Directory(dirPath).create(recursive: true);
 final String filePath = '$dirPath/${_timestamp()}.jpeg';
 await _controller.takePicture(filePath);
 setState(() {});
 }
}

錄製視頻

我們可以將錄製視頻過程分為兩個部分：

開始錄像：

1. 檢查相機控制器是否已初始化。
2. 啟動計時器以顯示記錄的視頻時間。（可選的）
3. 構造目錄並定義路徑。
4. 使用攝像機控制器開始錄製並將視頻保存在定義的路徑上。

Future<string> startVideoRecording() async {
 print('startVideoRecording');
 if (!_controller.value.isInitialized) {
 return null;
 }
 setState(() {
 _isRecording = true;
 });
 _timerKey.currentState.startTimer();

 final Directory extDir = await getApplicationDocumentsDirectory();
 final String dirPath = '${extDir.path}/media';
 await Directory(dirPath).create(recursive: true);
 final String filePath = '$dirPath/${_timestamp()}.mp4';

 if (_controller.value.isRecordingVideo) {
 // A recording is already started, do nothing.
 return null;
 }

 try {
 await _controller.startVideoRecording(filePath);
 } on CameraException catch (e) {
 _showCameraException(e);
 return null;
 }
 return filePath;
}
/<string>

停止錄像：

1. 檢查相機控制器是否已初始化。
2. 停止計時器。
3. 使用相機控制器停止視頻錄製。

Future<void> stopVideoRecording() async {
 if (!_controller.value.isRecordingVideo) {
 return null;
 }
 _timerKey.currentState.stopTimer(); 

 setState(() {
 _isRecording = false;
 });

 try {
 await _controller.stopVideoRecording();
 } on CameraException catch (e) {
 _showCameraException(e);
 return null;
 }
}
/<void>

這是相機屏幕的完整代碼。

import 'dart:io';

import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_camera/gallery.dart';
import 'package:flutter_camera/video_timer.dart';
import 'package:path/path.dart' as path;
import 'package:path_provider/path_provider.dart';
import 'package:thumbnails/thumbnails.dart';

class CameraScreen extends StatefulWidget {
 const CameraScreen({Key key}) : super(key: key);

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

class CameraScreenState extends State<camerascreen>
 with AutomaticKeepAliveClientMixin {
 CameraController _controller;
 List<cameradescription> _cameras;
 final GlobalKey<scaffoldstate> _scaffoldKey = GlobalKey<scaffoldstate>();
 bool _isRecordingMode = false;
 bool _isRecording = false;
 final _timerKey = GlobalKey<videotimerstate>();

 @override
 void initState() {
 _initCamera();
 super.initState();
 }

 Future<void> _initCamera() async { 

 _cameras = await availableCameras();
 _controller = CameraController(_cameras[0], ResolutionPreset.medium);
 _controller.initialize().then((_) {
 if (!mounted) {
 return;
 }
 setState(() {});
 });
 }

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

 @override
 Widget build(BuildContext context) {
 super.build(context);
 if (_controller != null) {
 if (!_controller.value.isInitialized) {
 return Container();
 }
 } else {
 return const Center(
 child: SizedBox(
 width: 32,
 height: 32,
 child: CircularProgressIndicator(),
 ),
 );
 }

 if (!_controller.value.isInitialized) {
 return Container();
 }
 return Scaffold(
 backgroundColor: Theme.of(context).backgroundColor,
 key: _scaffoldKey,
 extendBody: true,
 body: Stack(
 children: <widget>[
 _buildCameraPreview(),
 Positioned(
 top: 24.0,
 left: 12.0,
 child: IconButton(
 icon: Icon(
 Icons.switch_camera,
 color: Colors.white, 

 ),
 onPressed: () {
 _onCameraSwitch();
 },
 ),
 ),
 if (_isRecordingMode)
 Positioned(
 left: 0,
 right: 0,
 top: 32.0,
 child: VideoTimer(
 key: _timerKey,
 ),
 )
 ],
 ),
 bottomNavigationBar: _buildBottomNavigationBar(),
 );
 }

 Widget _buildCameraPreview() {
 final size = MediaQuery.of(context).size;
 return ClipRect(
 child: Container(
 child: Transform.scale(
 scale: _controller.value.aspectRatio / size.aspectRatio,
 child: Center(
 child: AspectRatio(
 aspectRatio: _controller.value.aspectRatio,
 child: CameraPreview(_controller),
 ),
 ),
 ),
 ),
 );
 }

 Widget _buildBottomNavigationBar() {
 return Container(
 color: Theme.of(context).bottomAppBarColor,
 height: 100.0,
 width: double.infinity,
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceAround,
 children: <widget>[
 FutureBuilder(
 future: getLastImage(),
 builder: (context, snapshot) {
 if (snapshot.data == null) { 

 return Container(
 width: 40.0,
 height: 40.0,
 );
 }
 return GestureDetector(
 onTap: () => Navigator.push(
 context,
 MaterialPageRoute(
 builder: (context) => Gallery(),
 ),
 ),
 child: Container(
 width: 40.0,
 height: 40.0,
 child: ClipRRect(
 borderRadius: BorderRadius.circular(4.0),
 child: Image.file(
 snapshot.data,
 fit: BoxFit.cover,
 ),
 ),
 ),
 );
 },
 ),
 CircleAvatar(
 backgroundColor: Colors.white,
 radius: 28.0,
 child: IconButton(
 icon: Icon(
 (_isRecordingMode)
 ? (_isRecording) ? Icons.stop : Icons.videocam
 : Icons.camera_alt,
 size: 28.0,
 color: (_isRecording) ? Colors.red : Colors.black,
 ),
 onPressed: () {
 if (!_isRecordingMode) {
 _captureImage();
 } else {
 if (_isRecording) {
 stopVideoRecording();
 } else {
 startVideoRecording();
 }
 }
 },
 ),
 ), 

 IconButton(
 icon: Icon(
 (_isRecordingMode) ? Icons.camera_alt : Icons.videocam,
 color: Colors.white,
 ),
 onPressed: () {
 setState(() {
 _isRecordingMode = !_isRecordingMode;
 });
 },
 ),
 ],
 ),
 );
 }

 Future<filesystementity> getLastImage() async {
 final Directory extDir = await getApplicationDocumentsDirectory();
 final String dirPath = '${extDir.path}/media';
 final myDir = Directory(dirPath);
 List<filesystementity> _images;
 _images = myDir.listSync(recursive: true, followLinks: false);
 _images.sort((a, b) {
 return b.path.compareTo(a.path);
 });
 var lastFile = _images[0];
 var extension = path.extension(lastFile.path);
 if (extension == '.jpeg') {
 return lastFile;
 } else {
 String thumb = await Thumbnails.getThumbnail(
 videoFile: lastFile.path, imageType: ThumbFormat.PNG, quality: 30);
 return File(thumb);
 }
 }

 Future<void> _onCameraSwitch() async {
 final CameraDescription cameraDescription =
 (_controller.description == _cameras[0]) ? _cameras[1] : _cameras[0];
 if (_controller != null) {
 await _controller.dispose();
 }
 _controller = CameraController(cameraDescription, ResolutionPreset.medium);
 _controller.addListener(() {
 if (mounted) setState(() {});
 if (_controller.value.hasError) {
 showInSnackBar('Camera error ${_controller.value.errorDescription}');
 }
 });
 

 try {
 await _controller.initialize();
 } on CameraException catch (e) {
 _showCameraException(e);
 }

 if (mounted) {
 setState(() {});
 }
 }

 void _captureImage() async {
 print('_captureImage');
 if (_controller.value.isInitialized) {
 SystemSound.play(SystemSoundType.click);
 final Directory extDir = await getApplicationDocumentsDirectory();
 final String dirPath = '${extDir.path}/media';
 await Directory(dirPath).create(recursive: true);
 final String filePath = '$dirPath/${_timestamp()}.jpeg';
 print('path: $filePath');
 await _controller.takePicture(filePath);
 setState(() {});
 }
 }

 Future<string> startVideoRecording() async {
 print('startVideoRecording');
 if (!_controller.value.isInitialized) {
 return null;
 }
 setState(() {
 _isRecording = true;
 });
 _timerKey.currentState.startTimer();

 final Directory extDir = await getApplicationDocumentsDirectory();
 final String dirPath = '${extDir.path}/media';
 await Directory(dirPath).create(recursive: true);
 final String filePath = '$dirPath/${_timestamp()}.mp4';

 if (_controller.value.isRecordingVideo) {
 // A recording is already started, do nothing.
 return null;
 }

 try {
// videoPath = filePath;
 await _controller.startVideoRecording(filePath);
 } on CameraException catch (e) {
 _showCameraException(e); 

 return null;
 }
 return filePath;
 }

 Future<void> stopVideoRecording() async {
 if (!_controller.value.isRecordingVideo) {
 return null;
 }
 _timerKey.currentState.stopTimer();
 setState(() {
 _isRecording = false;
 });

 try {
 await _controller.stopVideoRecording();
 } on CameraException catch (e) {
 _showCameraException(e);
 return null;
 }
 }

 String _timestamp() => DateTime.now().millisecondsSinceEpoch.toString();

 void _showCameraException(CameraException e) {
 logError(e.code, e.description);
 showInSnackBar('Error: ${e.code}\\n${e.description}');
 }

 void showInSnackBar(String message) {
 _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(message)));
 }

 void logError(String code, String message) =>
 print('Error: $code\\nError Message: $message');

 @override
 bool get wantKeepAlive => true;
}
/<void>/<string>/<void>/<filesystementity>/<filesystementity>/<widget>/<widget>/<void>/<videotimerstate>/<scaffoldstate>/<scaffoldstate>/<cameradescription>/<camerascreen>

圖庫視圖

我們的相機已經準備就緒，可以使用了。但是，我們如何查看捕獲的圖像和錄製的視頻？我們將創建一個畫廊視圖。它將由一個水平的網頁瀏覽和一個底部的應用欄以及一個共享按鈕和一個刪除按鈕組成。

在內部，PageView.builder我們正在檢查文件的擴展名。如果文件擴展名為jpeg，則將其顯示為圖像，否則，將使用VideoPreview小部件顯示視頻。

String currentFilePath;
@override
Widget build(BuildContext context) {
 return Scaffold(
 backgroundColor: Theme.of(context).backgroundColor,
 appBar: AppBar(
 backgroundColor: Colors.black,
 ),
 body: FutureBuilder(
 future: _getAllImages(),
 builder: (context, AsyncSnapshot<list>> snapshot) {
 if (!snapshot.hasData || snapshot.data.isEmpty) {
 return Container();
 }
 print('${snapshot.data.length} ${snapshot.data}');
 if (snapshot.data.length == 0) {
 return Center(
 child: Text('No images found.'),
 );
 }

 return PageView.builder(
 itemCount: snapshot.data.length,
 itemBuilder: (context, index) {
 currentFilePath = snapshot.data[index].path;
 var extension = path.extension(snapshot.data[index].path);
 if (extension == '.jpeg') {
 return Container(
 height: 300,
 padding: const EdgeInsets.only(bottom: 8.0),
 child: Image.file(
 File(snapshot.data[index].path),
 ),
 );
 } else {
 return VideoPreview(
 videoPath: snapshot.data[index].path,
 );
 }
 },
 );
 },
 ), 

 bottomNavigationBar: BottomAppBar(
 child: Container(
 height: 56.0,
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 children: <widget>[
 IconButton(
 icon: Icon(Icons.share),
 onPressed: () => _shareFile(),
 ),
 IconButton(
 icon: Icon(Icons.delete),
 onPressed: _deleteFile,
 ),
 ],
 ),
 ),
 ),
 );
}
/<widget>/<list>

從設備獲取媒體文件

Future<list>> _getAllImages() async {
 final Directory extDir = await getApplicationDocumentsDirectory();
 final String dirPath = '${extDir.path}/media';
 final myDir = Directory(dirPath);
 List<filesystementity> _images;
 _images = myDir.listSync(recursive: true, followLinks: false);
 _images.sort((a, b) {
 return b.path.compareTo(a.path);
 });
 return _images;
}
/<filesystementity>/<list>

刪除媒體文件

刪除文件非常容易。只需將目錄指向文件路徑，然後使用deleteSync函數將其刪除。

_deleteFile() {
 final dir = Directory(currentFilePath);
 dir.deleteSync(recursive: true); 

 setState(() {});
}

共享媒體文件

為了共享文件，我們使用esys_flutter_share插件。您可以使用Share.file()將String title，String name，List < int >bytes，String mimeType作為強制參數的方法輕鬆共享文件。您可以使用readAsBytesSync方法從文件中獲取字節。

_shareFile() async {
 var extension = path.extension(currentFilePath);
 await Share.file(
 'image',
 (extension == '.jpeg') ? 'image.jpeg' : ' video.mp4',
 File(currentFilePath).readAsBytesSync(),
 (extension == '.jpeg') ? 'image/jpeg' : ' video/mp4',
 );
}

我對相機插件的看法

在得出結論之前，我們應該知道Flutter Camera插件仍在開發中。該插件非常適合製作任何像樣的相機應用程序，但是它有一些小問題，並且缺少許多高級功能，例如自動曝光和閃光燈支持。如果您想了解有關相機插件即將發生的變化的最新信息，請關注“相機插件的未來”問題。本期將討論相機插件中即將提供的一些很酷的功能。

您可以在此處查看該項目的完整源代碼。

翻譯自：https://levelup.gitconnected.com/exploring-flutter-camera-plugin-d2c54ac95f05

閱讀更多 開心人開發世界 的文章

關鍵字: 攝像放像機 iOS 使用