Die Möglichkeit, die Kamera zu verwenden, ist in vielen Anwendungen vorhanden, und wir alle verwenden sie regelmäßig. In Flutter können wir die Arbeit mit der Kamera mithilfe von zwei offiziellen Plugins implementieren:
Es gibt einen spürbaren Unterschied zwischen ihnen, und es lohnt sich, sie je nach Situation zu verwenden:
camera können Sie mit den Kameras interagieren, die dem Gerät in Ihrer Anwendung zur Verfügung stehen, und das Bild im Widget anzeigen. Es eignet sich gut für Aufgaben, bei denen Sie den Betrieb der Kamera für die Anwendung "anpassen" müssen.image-picker startet die Kameraanwendung und gibt ein Objekt vom Typ File (vom Benutzer ausgewählte Bild- oder Videodatei) an Ihre Anwendung zurück. Mit der image-picker können Sie auch eine Datei aus den auf dem Gerät verfügbaren auswählen, während wie bei der Kamera eine separate Anwendung gestartet wird, nach der das ausgewählte Objekt an Ihre Anwendung zurückgegeben wird.
Hier sehen Sie die Quelle .
Kamera
1. Fügen Sie das Plugin gemäß den Anweisungen zu unserem Projekt hinzu
Zusätzliche Einstellungen für das Betriebssystem
iOS
Fügen Sie ios/Runner/Info.plist die folgenden Zeilen ios/Runner/Info.plist :
<key>NSCameraUsageDescription</key> <string>Access to Camera</string> <key>NSMicrophoneUsageDescription</key> <string>Access to Microphone</string>
Android
Stellen Sie sicher, dass die Mindestversion von Android SDK in der Datei android/app/build.gradle 21 .
minSdkVersion 21
Alle erforderlichen Berechtigungen werden beim Start der Anwendung angefordert.
Arbeit an Emulatoren
Bei iOS können wir die Kamera auf dem Emulator nicht überprüfen, wir benötigen ein "Live" -Gerät.
Android generiert ein Modell (siehe Bild unten), das das ersetzt, was das Kameraobjektiv sieht.
Wenn Sie nicht auf den Standardstecker schauen möchtenWählen Sie in den Emulatoreinstellungen Erweiterte Einstellungen und stellen Sie VirtualScene für die Rückfahrkamera ein.
Wir starten den Emulator neu. Jetzt "zeigt" die Kamera den virtuellen Raum, der mit Maus und Wäsche bewegt werden kann.
Danke an Tonn_Tamerlan für den Tipp.
2. Wir gehen zum Code über. Zuerst erhalten wir alle verfügbaren Kameras mit der Funktion availableCameras .
final cameras = await availableCameras();
Diese Funktion gibt eine Reihe von Beschreibungen ( List<CameraDescription> ) der verfügbaren Kameras zurück, wobei jedes Element den Namen der Kamera (es kann nur ein Index sein), den Typ (hinten, vorne, außen) und den Winkel enthält, um den Sie das Foto drehen möchten, damit es angezeigt wird ihre Orientierung.
Zur Steuerung der Kamera benötigen wir einen Objektcontroller wie CameraController , um zu bestimmen, welche der empfangenen Kamerabeschreibungen und Auflösungen (niedrig, mittel, hoch) angegeben werden müssen.
void _setCameraController(CameraDescription cameraDescription) async { _controller = CameraController(cameraDescription, ResolutionPreset.medium); ... await _controller.initialize(); ... if (mounted) { setState(() {}); } }
Als Nächstes initialisieren wir den Controller und nachdem wir sichergestellt haben, dass das Widget "aktiv" ist, aktualisieren wir den Status dieses Widgets. ( Funktionstext )
Wir übergeben den initialisierten Controller an das CameraPreview Widget
AspectRatio( aspectRatio: _controller.value.aspectRatio, child: CameraPreview(_controller))
CameraPreview basiert auf dem Texture Widget, das für die Anzeige eines Bildes von der Kamera verantwortlich ist. Die Abmessungen werden vom übergeordneten AspectRatio festgelegt. AspectRatio das AspectRatio Widget, das die Größe des AspectRatio in einem bestimmten Seitenverhältnis bestimmt, ein guter Ansatz. Wir erhalten das Verhältnis vom Controller _controller.value.aspectRatio . Als Ergebnis erhalten wir in der Benutzeroberfläche ein Bild in der Benutzeroberfläche
App-Ansicht nach Controller-Initialisierung 3. Jetzt können wir ein Foto machen oder ein Video aufnehmen.
a. Wir machen ein Foto ( Funktionstext ) mit der Methode takePicture(String path) . Es macht ein Bild und speichert auf dem angegebenen Pfad.
Future<void> _takePhoto(BuildContext context) async { ... await _controller.takePicture(filePath); ... }
Um den Pfad abzurufen , benötigen wir das offizielle Plugin path_provider und die Methode getApplicationDocumentsDirectory , die ein privates Verzeichnis getApplicationDocumentsDirectory . Als nächstes bestimmen wir den Namen des Verzeichnisses, das wir probieren möchten, erstellen es gegebenenfalls und wählen den Dateinamen aus:
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';
Bevor Sie ein Bild aufnehmen, sollten Sie überprüfen, ob der Controller initialisiert ist und das Bild nicht mehr aufgenommen wird.
if (!_controller.value.isInitialized) { return null; } ... if (_controller.value.isTakingPicture) { return null; }
Das Bild wurde aufgenommen, wir haben einen Weg dorthin, es wäre schön zu sehen. Mit dem Standard- Image Widget, dem File Objekt und dem Dateipfad wird das Bild auf dem Bildschirm angezeigt.
Image.file(File(filePath))
Abschluss des empfangenen Bildes b. Für die Aufnahme von Videos ( Funktionstext ) benötigen wir zwei Funktionen: startVideoRecording(String filePath) und stopVideoRecording() .
Future<void> _startVideoRecording() async { ... await _controller.startVideoRecording(filePath); ... } Future<void> _stopVideoRecording(BuildContext context) async { ... await _controller.stopVideoRecording(); ... }
startVideoRecording schreibt ein Video und speichert es gemäß dem angegebenen Pfad (erhalten nach dem gleichen Prinzip wie bei einem Foto). stopVideoRecording beendet einfach den Aufnahmevorgang. Stellen Sie vor Beginn der Aufnahme sicher, dass die Aufnahme nicht mehr läuft.
if (_controller.value.isRecordingVideo) { return null; }
Als Ergebnis haben wir ein gespeichertes Video und einen Pfad dazu. Zum Abspielen benötigen Sie das Video_player- Plugin. Der gesamte Code für die Wiedergabe des Videos wird in einer separaten Datei gespeichert .
Aufnehmen und in der Benutzeroberfläche abspielen
Bildauswahl
1. Fügen Sie das Plugin gemäß den Anweisungen zu unserem Projekt hinzu
Zusätzliche Einstellungen für das Betriebssystem
iOS
Fügen Sie ios/Runner/Info.plist die folgenden Zeilen 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>
Arbeit an Emulatoren
Unter iOS können wir die Kamera auf dem Emulator nicht überprüfen. Wir benötigen ein "Live" -Gerät.
2. Die image-picker verwendet eine Standardanwendung, um Fotos / Videos zu erstellen oder Dateien anzuzeigen. Um die gewünschte Anwendung zu starten, müssen Sie die Funktion pickImage für das Foto oder pickVideo und den pickVideo angeben.
... final File video = await ImagePicker.pickVideo(source: ImageSource.camera); final File photo = await ImagePicker.pickImage(source: ImageSource.gallery);
Unsere Anwendung empfängt die ausgewählte Datei, aber wenn nichts ausgewählt wurde, wird null zurückgegeben. Für die Anzeige von Bildern und Videos verwenden wir die gleichen Ansätze wie beim camera Plugin. Für Bilder das Bild-Widget - dieses Mal müssen Sie es nicht in File , da wir ursprünglich ein Objekt dieses Typs erhalten haben.
Image.file(photo)
Für das Video-Plugin video_player . Der gesamte Code für die Wiedergabe des Videos wird in einer separaten Datei gespeichert .
Fazit
Wie Sie sehen, ist die image-picker spürbar einfacher zu verwenden und funktioniert hervorragend, wenn Sie nur ein Bild oder Video in eine Anwendung übertragen müssen. camera bietet uns auch alle erforderlichen Funktionen, um die Arbeit des Benutzers mit der Kamera in Ihrer Anwendung anzupassen.
Danke fürs Lesen!