Trabalhar com a câmera no Flutter

A capacidade de usar a câmera existe em muitos aplicativos, e todos nós a usamos regularmente. No Flutter, podemos implementar o trabalho com a câmera usando dois plugins oficiais:

• camera
• selecionador de imagens

Há uma diferença notável entre eles, e vale a pena usá-los de acordo com a situação:

• camera permite que você interaja com as câmeras disponíveis para o dispositivo a partir do seu aplicativo e exiba a imagem no widget. É adequado para tarefas quando você precisa "personalizar" a operação da câmera para o aplicativo.
• image-picker inicia o aplicativo da câmera e retorna um objeto do tipo File ( File imagem ou vídeo selecionado pelo usuário) ao seu aplicativo. Além disso, o image-picker permite selecionar um arquivo dentre os disponíveis no dispositivo, enquanto, como no caso da câmera, um aplicativo separado é iniciado, após o qual o objeto selecionado é retornado ao seu aplicativo.

Aqui você pode ver a fonte .

camera

1. Adicione o plugin ao nosso projeto de acordo com as instruções

Configurações adicionais para SO
iOS
Adicione as seguintes linhas ao ios/Runner/Info.plist :

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

Android
Certifique-se de que a versão mínima do Android sdk no arquivo android/app/build.gradle 21 .

 minSdkVersion 21 

Todas as permissões necessárias serão solicitadas quando o aplicativo for iniciado.

Trabalhar em emuladores
No caso do iOS, não podemos verificar a câmera no emulador, precisamos de um dispositivo "ao vivo".
O Android gera uma simulação (veja a imagem abaixo), que substitui o que a lente da câmera vê.

2. Passamos para o código. Primeiro, obtemos todas as câmeras disponíveis usando a função AvailableCameras.

 final cameras = await availableCameras(); 

Essa função retornará uma matriz de descrições ( List<CameraDescription> Descrição da List<CameraDescription> ) de câmeras disponíveis, onde cada elemento conterá o nome da câmera (pode ser apenas um índice), tipo (traseira, frontal, externa) e o ângulo pelo qual você deseja girar a foto para que ela apareça em sua orientação.

Para controlar a câmera, precisamos de um controlador de objeto como o CameraController , para determinar qual você precisa especificar uma das descrições e resolução de câmera recebidas (baixa, média, alta).

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

Em seguida, inicializamos o controlador e, depois de verificar se o widget está "ativo", atualizamos o estado desse widget. ( texto da função )

Passamos o controlador inicializado para o widget CameraPreview

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

CameraPreview é baseado no widget Texture , responsável por exibir uma imagem da câmera. Suas dimensões são determinadas pelo pai, portanto, o widget AspectRatio , que determina o tamanho do filho em uma determinada proporção, é uma boa abordagem. Nós obtemos a proporção do controlador _controller.value.aspectRatio . Como resultado, na interface, temos uma imagem na interface

3. Agora podemos tirar uma foto ou gravar um vídeo.
a. Tiramos uma foto ( texto da função ) usando o método takePicture(String path) . Ele tira uma foto e salva no caminho especificado.

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

Para obter o caminho, precisamos do plug- in path_provider oficial e do método getApplicationDocumentsDirectory , que retornará um diretório privado. Em seguida, determinamos o nome do diretório a ser testado, se necessário, criamos e selecionamos o nome do arquivo:

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

Antes de tirar uma foto, é aconselhável verificar se o controlador foi inicializado e a foto não é mais tirada.

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

A foto foi tirada, temos um jeito, seria bom ver. Usando o widget de Image padrão, o objeto File e o caminho do arquivo, exibimos a imagem na tela.

 Image.file(File(filePath)) 

b. Ao gravar vídeo ( texto da função ), precisamos de duas funções: startVideoRecording(String filePath) e stopVideoRecording() .

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

startVideoRecording grava um vídeo e o salva de acordo com o caminho especificado (obtido pelo mesmo princípio de uma fotografia), stopVideoRecording simplesmente encerra o processo de gravação. Antes de iniciar a gravação, verifique se as filmagens não estão mais em andamento.

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

Como resultado, temos um vídeo salvo e um caminho para ele. Para reproduzi-lo, você precisará do plugin video_player . Todo o código associado à reprodução do vídeo, retirado em um arquivo separado.

selecionador de imagens

1. Adicione o plugin ao nosso projeto de acordo com as instruções

Configurações adicionais para SO
iOS
Adicione as seguintes linhas ao 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> 

Trabalhar em emuladores
No iOS, não podemos verificar a câmera no emulador, precisamos de um dispositivo "ao vivo".

2. O image-picker usa um aplicativo padrão para criar fotos / vídeos ou visualizar arquivos. Para iniciar o aplicativo desejado, você deve usar a função pickImage para a foto ou pickVideo e especificar o parâmetro de origem.

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

Nosso aplicativo recebe o arquivo selecionado, mas se nada foi selecionado, null será retornado. Para exibir fotos e vídeos, usamos as mesmas abordagens que no caso do plug-in da camera . Para imagens, o widget Imagem - desta vez, não é necessário agrupá-lo em File , pois recebemos inicialmente um objeto desse tipo.

 Image.file(photo) 

Para o plugin de vídeo video_player . Todo o código associado à reprodução do vídeo, retirado em um arquivo separado.

Conclusão

Como você pode ver, o image-picker visivelmente mais fácil de usar e funciona muito bem quando você só precisa transferir uma imagem ou vídeo para um aplicativo. camera também fornece todos os recursos necessários para personalizar o trabalho do usuário com a câmera em seu aplicativo.
Obrigado pela leitura!