العمل مع الكاميرا في الرفرفة

توجد القدرة على استخدام الكاميرا في العديد من التطبيقات ، ونحن جميعًا نستخدمها بانتظام. في Flutter ، يمكننا تنفيذ العمل باستخدام الكاميرا باستخدام مكونين إضافيين رسميين:

• كاميرا
• منتقي الصور

هناك فرق ملحوظ بينهما ، ويستحق استخدامها وفقًا للموقف:

• تتيح لك camera التفاعل مع الكاميرات المتاحة للجهاز من التطبيق الخاص بك وعرض الصورة في عنصر واجهة المستخدم. إنها مناسبة تمامًا للمهام عندما تحتاج إلى "تخصيص" تشغيل الكاميرا للتطبيق.
• image-picker بتشغيل تطبيق الكاميرا وإرجاع كائن من النوع File ( File الصورة أو الفيديو الذي حدده المستخدم) إلى تطبيقك. أيضًا ، يسمح لك image-picker بتحديد ملف من الملفات المتاحة على الجهاز ، بينما ، كما في حالة الكاميرا ، يتم تشغيل تطبيق منفصل ، وبعد ذلك يتم إعادة الكائن المحدد إلى التطبيق الخاص بك.

هنا يمكنك رؤية المصدر .

الكاميرا

1. أضف المكوّن الإضافي لمشروعنا وفقًا للتعليمات

إعدادات إضافية لنظام التشغيل
iOS
أضف الأسطر التالية إلى ios/Runner/Info.plist :

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

أندرويد
تأكد من أن الإصدار الأدنى من Android sdk في ملف android/app/build.gradle 21 .

 minSdkVersion 21 

سيتم طلب جميع الأذونات اللازمة عند بدء تشغيل التطبيق.

العمل على المحاكيات
في حالة نظام التشغيل iOS ، لا يمكننا التحقق من الكاميرا على المحاكي ، نحتاج إلى جهاز "مباشر".
يولد Android صورة وهمية (انظر الصورة أدناه) ، والتي تحل محل ما تراه عدسة الكاميرا.

2. نمرر إلى الكود. أولاً ، نحصل على جميع الكاميرات المتاحة باستخدام وظيفة الكاميرا availableCameras .

 final cameras = await availableCameras(); 

ستُرجع هذه الوظيفة مجموعة من الأوصاف ( List<CameraDescription> ) للكاميرات المتاحة ، حيث سيحتوي كل عنصر على اسم الكاميرا (يمكن أن يكون مجرد فهرس) ، اكتب (للخلف ، أمامي ، خارجي) والزاوية التي تريد تدوير الصورة بواسطتها توجههم.

للتحكم في الكاميرا ، نحتاج إلى وحدة تحكم كائن مثل CameraController ، لتحديد ما تحتاجه لتحديد أحد أوصاف الكاميرا المستلمة ودقة الوضوح (منخفضة ، متوسطة ، عالية).

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

بعد ذلك ، نقوم بتهيئة وحدة التحكم وبعد التأكد من أن عنصر واجهة المستخدم "على قيد الحياة" ، نقوم بتحديث حالة هذه الأداة. ( نص وظيفة )

نقوم بتمرير وحدة التحكم التي تمت تهيئتها إلى أداة CameraPreview

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

يستند CameraPreview إلى عنصر واجهة المستخدم Texture ، وهو المسؤول عن عرض صورة من الكاميرا. يتم تحديد أبعادها من قبل الوالد ، وبالتالي فإن القطعة AspectRatio ، التي تحدد حجم الطفل في نسبة العرض إلى الارتفاع معين ، هو نهج جيد. نحصل على النسبة من وحدة التحكم _controller.value.aspectRatio . نتيجة لذلك ، في الواجهة نحصل على صورة في الواجهة

3. الآن يمكننا التقاط صورة أو تصوير فيديو.
أ. takePicture(String path) صورة ( نص دالة ) باستخدام طريقة takePicture(String path) . يأخذ صورة ويحفظ على طول المسار المحدد.

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

للحصول على المسار ، نحتاج إلى البرنامج المساعد path_provider الرسمي وطريقة getApplicationDocumentsDirectory الخاصة به ، والتي ستُرجع دليلًا خاصًا. بعد ذلك ، نحدد اسم الدليل لتذوقه ، إذا لزم الأمر ، وقم بإنشائه ، وحدد اسم الملف:

  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'; 

قبل التقاط صورة ، يُنصح بالتحقق من تهيئة وحدة التحكم وعدم التقاط الصورة.

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

تم التقاط الصورة ، لدينا طريقة لذلك ، سيكون من الجميل أن نرى. باستخدام أداة Image القياسية ، كائن الملف ومسار الملف ، نعرض الصورة على الشاشة.

 Image.file(File(filePath)) 

ب. عند تسجيل الفيديو ( نص الوظيفة ) ، نحتاج إلى وظيفتين: startVideoRecording(String filePath) و stopVideoRecording() .

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

startVideoRecording مقطع فيديو startVideoRecording وفقًا للمسار المحدد (تم الحصول عليه بنفس المبدأ كما هو الحال مع صورة) ، stopVideoRecording ببساطة بإنهاء عملية التسجيل. قبل البدء في التسجيل ، تأكد من أن التصوير لم يعد قيد التقدم.

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

نتيجة لذلك ، لدينا مقطع فيديو محفوظ ومسار إليه. لتشغيله ، ستحتاج إلى البرنامج المساعد video_player . كل الكود المرتبط بتشغيل الفيديو ، والمخرج في ملف منفصل.

منتقي الصور

1. أضف المكوّن الإضافي لمشروعنا وفقًا للتعليمات

إعدادات إضافية لنظام التشغيل
iOS
أضف الأسطر التالية إلى 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> 

العمل على المحاكيات
في نظام التشغيل iOS ، لا يمكننا فحص الكاميرا على المحاكي ، نحتاج إلى جهاز "مباشر".

2. يستخدم image-picker الصور تطبيقًا قياسيًا لإنشاء صور / مقاطع فيديو أو عرض الملفات. لبدء التطبيق المطلوب ، يجب عليك استخدام وظيفة pickImage للصورة أو pickVideo وتحديد المعلمة المصدر.

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

يتلقى تطبيقنا الملف المحدد ، لكن في حالة عدم تحديد أي شيء ، سيتم إرجاع قيمة null . لعرض الصور ومقاطع الفيديو ، نستخدم نفس الأساليب كما في حالة البرنامج المساعد camera . بالنسبة للصور ، عنصر واجهة المستخدم للصور - هذه المرة لن تحتاج إلى لفها في File ، لأننا تلقينا في البداية كائنًا من هذا النوع.

 Image.file(photo) 

للفيديو المساعد video_player . كل الكود المرتبط بتشغيل الفيديو ، والمخرج في ملف منفصل.

الخاتمة

كما ترى ، image-picker أسهل في الاستخدام وتعمل بشكل رائع عندما تحتاج فقط إلى نقل صورة أو مقطع فيديو إلى تطبيق ما. توفر لك camera أيضًا جميع الميزات الضرورية لتخصيص عمل المستخدم مع الكاميرا في تطبيقك.
شكرا للقراءة!