Flutter: Hướng dẫn sử dụng Camera

Hiện nay ,nhiều ứng dụng yêu cầu làm việc với máy ảnh của thiết bị để chụp ảnh và quay video. Flutter cung cấp package Camera cho mục đích chụp ảnh và quay video này . Package Camera cung cấp các công cụ để nhận danh sách các máy ảnh khả dụng, hiển thị bản xem trước từ một máy ảnh cụ thể và chụp ảnh hoặc quay video.

Các bước sau đây trình bày cách sử dụng Camera để hiển thị bản xem trước, chụp ảnh và hiển thị nó bằng các bước sau:

• Thêm các package cần thiết để sử dụng camera
• Tạo một danh sách các available camera
• Tạo và khởi tạo
• Sử dụng CameraPreview để hiển thị nguồn cấp dữ liệu của máy ảnh.
• Chụp ảnh bằng
• Hiển thị ảnh bằng widget Image

1. Thêm các package cần thiết để sử dụng camera

Để hoàn thành bước này , bạn cần thêm 3 package vào app

Camera

Cung cấp các công cụ để làm việc với các camera trên thiết bị.

path_provider

Tìm đường dẫn chính xác để lưu trữ hình ảnh.

path

Tạo đường dẫn hoạt động trên mọi nền tảng.

Đối với các thiết bị Android , bạn phải cập nhật minSDKVersion lên 21 hoặc cao hơn

Đối với các thiết bị iOS , bạn phải thêm các dòng bên dưới vào bên trong đường dẫn  ios/Runner/Info.plis

<key>NSCameraUsageDescription</key>

<string>Explanation on why the camera access is needed.</string>

<key>NSMicrophoneUsageDescription</key>

<string>Explanation on why the microphone access is needed.</string>

 2. Tạo danh sách các Available camera

// Đảm bảo các plugin service được khởi tạo trước khi chạy App

WidgetsFlutterBinding.ensureInitialized();

// Lấy ra các danh sách camera có sẵn trên thiết bị của user

final cameras = await availableCameras();

// Lấy một camera cụ thể từ danh sách cách camera

final firstCamera = cameras.first;

Lấy một camera cụ thể từ danh sách cách camera

3. Tạo và khởi tạo CameraController

Sau khi bạn có máy ảnh, hãy sử dụng các bước sau để tạo và khởi chạy CameraController. Quá trình này thiết lập kết nối với máy ảnh của thiết bị cho phép bạn điều khiển máy ảnh và hiển thị bản xem trước nguồn cấp dữ liệu của máy ảnh.

• Tạo một Statefull Widget
• Khởi tạo một biến
• Khởi tạo một biến Future để hứng dữ liệu trả về từ initialize().
• Khởi tạo CameraController trong hàm initState()

Khởi tạo CameraController

4. Sử dụng CameraPreview để hiển thị nguồn cấp dữ liệu của máy ảnh

Tiếp theo , sử dụng CameraPreview Widget từ Camera để hiển thị Camera UI

Ghi nhớ : Bạn phải đợi cho CameraController khởi tạo xong trước khi thực hiện thao tác với máy ảnh nhé , Vì vậy , bạn phải đợi _initializeControllerFuture() hoàn tất trước khi hiển thị CameraPreview , do đó , hãy sử dụng Widget FutureBuilder để thực hiện điều này :

FutureBuilder

 5. Chụp ảnh bằng CameraController

Bạn có thể CameraController để chụp ảnh bằng phương thức takePicture(), hàm này sẽ trả về một biến kiểu XFile

Trong ví dụ này, hãy tạo một FloatingActionButton để chụp ảnh bằng CameraController khi người dùng chạm vào nút.

Để chụp ảnh ,cần thực hiện  2 bước:

1. Đảm bảo rằng máy ảnh được khởi tạo.
2. Sử dụng CameraController để chụp ảnh và đảm bảo rằng nó trả về Future<XFile>.

Hãy sử dụng khối lệnh try – catch để thực hiện để xử lý lỗi có thể xảy ra khi tiến hành chụp ảnh

Bắt lỗi bằng try-catch

6. Hiển thị ảnh bằng widget Image

Sau khi chụp ảnh thành công , ảnh được lưu dưới dạng File trên thiết bị, bạn có thể hiển thị ảnh đã chụp bằng Widget Image.

Để hiển thị trong Widget Image , hãy truyền đường dẫn File vào constructor của Widget Image.file như sau :

Hiển thị ảnh bằng widget Image

Khi hoàn thành được tất cả các bước trên , kết quả đạt được sẽ giống như thế này

Giao diện khi hoàn thành

 Chúc các bạn thành công !