Bekerja dengan kamera dalam Flutter

Kemampuan untuk menggunakan kamera ada di banyak aplikasi, dan kita semua menggunakannya secara teratur. Di Flutter, kita dapat mengimplementasikan pekerjaan dengan kamera menggunakan dua plugin resmi:

• kamera
• pemilih gambar

Ada perbedaan yang nyata di antara mereka, dan ada baiknya menggunakannya sesuai dengan situasi:

• camera memungkinkan Anda berinteraksi dengan kamera yang tersedia untuk perangkat dari aplikasi Anda dan menampilkan gambar di widget. Ini sangat cocok untuk tugas-tugas ketika Anda perlu "menyesuaikan" operasi kamera untuk aplikasi.
• image-picker meluncurkan aplikasi kamera dan mengembalikan objek jenis File ( File gambar atau video yang dipilih oleh pengguna) ke aplikasi Anda. Selain itu, image-picker memungkinkan Anda memilih file dari yang tersedia di perangkat, sementara, seperti dalam kasus kamera, aplikasi terpisah diluncurkan, setelah itu objek yang dipilih dikembalikan ke aplikasi Anda.

Di sini Anda dapat melihat sumbernya .

kamera

1. Tambahkan plugin ke proyek kami sesuai dengan instruksi

Pengaturan tambahan untuk OS
iOS
Tambahkan baris berikut ke ios/Runner/Info.plist :

 <key>NSCameraUsageDescription</key> <string>Access to Camera</string> <key>NSMicrophoneUsageDescription</key> <string>Access to Microphone</string> 

Android
Pastikan bahwa versi minimum Android SDK dalam file android/app/build.gradle 21 .

 minSdkVersion 21 

Semua izin yang diperlukan akan diminta saat aplikasi dimulai.

Kerjakan emulator
Dalam kasus iOS, kami tidak dapat memeriksa kamera pada emulator, kami membutuhkan perangkat "langsung".
Android menghasilkan tiruan (lihat gambar di bawah), yang menggantikan apa yang dilihat lensa kamera.

2. Kami memberikan kode. Pertama-tama kita mendapatkan semua kamera yang tersedia menggunakan fungsi AvailableCameras.

 final cameras = await availableCameras(); 

Fungsi ini akan mengembalikan array deskripsi ( List<CameraDescription> ) dari kamera yang tersedia, di mana setiap elemen akan berisi nama kamera (itu hanya bisa menjadi indeks), ketik (belakang, depan, eksternal) dan sudut di mana foto harus diputar sehingga ditampilkan dalam orientasi mereka.

Untuk mengontrol kamera, kita memerlukan pengontrol objek seperti CameraController , untuk menentukan yang mana Anda perlu menentukan salah satu dari deskripsi dan resolusi kamera yang diterima (rendah, sedang, tinggi).

 void _setCameraController(CameraDescription cameraDescription) async { _controller = CameraController(cameraDescription, ResolutionPreset.medium); ... await _controller.initialize(); ... if (mounted) { setState(() {}); } } 

Selanjutnya, kami menginisialisasi controller dan setelah memastikan bahwa widget itu "hidup", kami memperbarui keadaan widget ini. ( teks fungsi )

Kami melewati pengontrol yang diinisialisasi ke widget CameraPreview

  AspectRatio( aspectRatio: _controller.value.aspectRatio, child: CameraPreview(_controller)) 

CameraPreview didasarkan pada widget Texture , yang bertanggung jawab untuk menampilkan gambar dari kamera. Dimensinya ditentukan oleh orang tua, sehingga widget AspectRatio , yang menentukan ukuran anak dalam rasio aspek tertentu, adalah pendekatan yang baik. Kami mendapatkan rasio dari controller _controller.value.aspectRatio . Hasilnya, di antarmuka kita mendapatkan gambar di antarmuka

3. Sekarang kita dapat mengambil foto atau merekam video.
a. Kami mengambil foto ( teks fungsi ) menggunakan metode takePicture(String path) . Dibutuhkan gambar dan disimpan di sepanjang jalur yang ditentukan.

 Future<void> _takePhoto(BuildContext context) async { ... await _controller.takePicture(filePath); ... } 

Untuk mendapatkan path, kita memerlukan plugin path_provider resmi dan metode getApplicationDocumentsDirectory , yang akan mengembalikan direktori pribadi. Selanjutnya, kami menentukan nama direktori untuk dicicipi, jika perlu, buat, dan pilih nama file:

  final Directory extDir = await getApplicationDocumentsDirectory(); final String dirPath = '${extDir.path}/Pictures/flutter_camera'; await Directory(dirPath).create(recursive: true); final String filePath = '$dirPath/${_getTimestamp()}.jpg'; 

Sebelum mengambil gambar, disarankan untuk memverifikasi bahwa pengontrol diinisialisasi dan gambar tidak lagi diambil.

 if (!_controller.value.isInitialized) { return null; } ... if (_controller.value.isTakingPicture) { return null; } 

Gambar diambil, kita punya cara untuk itu, akan menyenangkan untuk dilihat. Menggunakan widget Image standar, objek File dan jalur file, kami menampilkan gambar di layar.

 Image.file(File(filePath)) 

b. Saat merekam video ( teks fungsi ), kita memerlukan dua fungsi: startVideoRecording(String filePath) dan stopVideoRecording() .

 Future<void> _startVideoRecording() async { ... await _controller.startVideoRecording(filePath); ... } Future<void> _stopVideoRecording(BuildContext context) async { ... await _controller.stopVideoRecording(); ... } 

startVideoRecording menulis video dan menyimpannya sesuai dengan jalur yang ditentukan (diperoleh dengan prinsip yang sama dengan foto), stopVideoRecording cukup menghentikan proses perekaman. Sebelum Anda mulai merekam, pastikan pemotretan tidak lagi berlangsung.

 if (_controller.value.isRecordingVideo) { return null; } 

Akibatnya, kami memiliki video yang disimpan dan jalur untuk itu. Untuk memainkannya, Anda memerlukan plugin video_player . Semua kode yang terkait dengan memutar video, diambil dalam file terpisah.

pemilih gambar

1. Tambahkan plugin ke proyek kami sesuai dengan instruksi

Pengaturan tambahan untuk OS
iOS
Tambahkan baris berikut ke ios/Runner/Info.plist :

 <key>NSCameraUsageDescription</key> <string>Access to Camera</string> <key>NSMicrophoneUsageDescription</key> <string>Access to Microphone</string> <key>NSPhotoLibraryUsageDescription</key> <string>Access to PhotoLibrary</string> 

Kerjakan emulator
Di iOS, kami tidak dapat memeriksa kamera pada emulator, kami membutuhkan perangkat "langsung".

2. image-picker menggunakan aplikasi standar untuk membuat foto / video atau melihat file. Untuk memulai aplikasi yang diinginkan, Anda harus menggunakan fungsi pickImage untuk foto atau pickVideo dan tentukan parameter sumber.

 ... final File video = await ImagePicker.pickVideo(source: ImageSource.camera); final File photo = await ImagePicker.pickImage(source: ImageSource.gallery); //  pickImage        ,       ... 

Aplikasi kami menerima file yang dipilih, tetapi jika tidak ada yang dipilih, null akan dikembalikan. Untuk menampilkan gambar dan video, kami menggunakan pendekatan yang sama seperti pada plugin camera . Untuk gambar, widget Gambar - kali ini Anda tidak perlu membungkusnya dalam File , karena kami awalnya menerima objek jenis ini.

 Image.file(photo) 

Untuk plugin video video_player . Semua kode yang terkait dengan memutar video, diambil dalam file terpisah.

Kesimpulan

Seperti yang Anda lihat, image-picker terlihat lebih mudah digunakan dan berfungsi dengan baik ketika Anda hanya perlu mentransfer gambar atau video ke suatu aplikasi. camera juga memberi kami semua fitur yang diperlukan untuk menyesuaikan pekerjaan pengguna dengan kamera di aplikasi Anda.
Terima kasih sudah membaca!