Projeto React Native dedicado a testes e experimentação com a biblioteca react-native-vision-camera, uma poderosa biblioteca para captura de fotos e vídeos com recursos avançados de câmera.
- Sobre o Projeto
- Funcionalidades
- Tecnologias
- Pré-requisitos
- Instalação
- Configuração
- Uso
- Estrutura do Projeto
- Recursos da Vision Camera
- Troubleshooting
- Contribuindo
- Licença
Este projeto foi criado para explorar e testar as capacidades da biblioteca react-native-vision-camera, incluindo:
- Captura de fotos
- Frame processing em tempo real
- Code scanning (QR Code, barcode)
- Filtros e efeitos de câmera
- Controles avançados (ISO, exposure, focus, zoom)
- Photo optimization
- Flash e torch mode
- Preview da câmera em tempo real
- Captura de fotos
- Controle de flash
- Zoom digital
- QR Code scanner
- Frame processing customizado
- Filtros de câmera
- React Native - Framework mobile
- TypeScript - Linguagem de programação
- react-native-vision-camera - Biblioteca de câmera
- react-native-worklets-core - Para frame processors
Antes de começar, você precisa ter instalado:
- Node.js (v20 ou superior)
- npm ou yarn
- React Native CLI
- Xcode (para iOS)
- Android Studio (para Android)
- CocoaPods (para iOS)
- iOS: iOS 11.0 ou superior
- Android: Android 5.0 (API 21) ou superior
- Clone o repositório:
git clone https://github.com/raniellimontagna/test-react-native-vision-camera.git
cd test-react-native-vision-camera- Instale as dependências:
npm install
# ou
yarn install- Para iOS, instale os pods:
cd ios && pod install && cd ..- Execute o projeto:
iOS:
npm run ios
# ou
yarn iosAndroid:
npm run android
# ou
yarn androidAdicione as seguintes permissões no arquivo Info.plist:
<key>NSCameraUsageDescription</key>
<string>Este app precisa de acesso à câmera para capturar fotos e vídeos</string>
<key>NSMicrophoneUsageDescription</key>
<string>Este app precisa de acesso ao microfone para gravar vídeos com áudio</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Este app precisa de acesso à galeria para salvar fotos e vídeos</string><uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />Se você planeja usar Frame Processors, adicione ao babel.config.js:
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [["react-native-worklets-core/plugin"]],
};import { Camera, useCameraDevice } from "react-native-vision-camera";
function App() {
const device = useCameraDevice("back");
const camera = useRef<Camera>(null);
const takePhoto = async () => {
const photo = await camera.current?.takePhoto();
console.log("Foto capturada:", photo);
};
if (device == null) return <LoadingView />;
return (
<Camera
ref={camera}
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
photo={true}
/>
);
}import { Camera } from "react-native-vision-camera";
import { useScanBarcodes, BarcodeFormat } from "vision-camera-code-scanner";
function QRScanner() {
const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE]);
const device = useCameraDevice("back");
useEffect(() => {
if (barcodes.length > 0) {
console.log("QR Code detectado:", barcodes[0].displayValue);
}
}, [barcodes]);
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
frameProcessor={frameProcessor}
/>
);
}test-react-native-vision-camera/
├── src/
│ ├── components/ # Componentes reutilizáveis
│ │ ├── CameraView.tsx
│ │ ├── CameraControls.tsx
│ │ └── MediaPreview.tsx
│ ├── screens/ # Telas do app
│ │ ├── HomeScreen.tsx
│ │ ├── CameraScreen.tsx
│ │ └── QRScannerScreen.tsx
│ ├── hooks/ # Custom hooks
│ │ ├── useCamera.ts
│ │ └── usePermissions.ts
│ ├── utils/ # Utilitários
│ │ ├── permissions.ts
│ │ └── media.ts
│ └── types/ # Definições de tipos TypeScript
│ └── camera.types.ts
├── android/ # Código nativo Android
├── ios/ # Código nativo iOS
├── package.json
├── tsconfig.json
└── README.md
const photo = await camera.current?.takePhoto({
flash: "on",
enableAutoStabilization: true,
enableAutoRedEyeReduction: true,
});await camera.current?.startRecording({
flash: "on",
onRecordingFinished: (video) => {
console.log("Vídeo gravado:", video);
},
onRecordingError: (error) => {
console.error("Erro ao gravar:", error);
},
});
// Parar gravação
await camera.current?.stopRecording();// Zoom
await camera.current?.focus({ x: 100, y: 100 });
// Focus
await camera.current?.focus({ x: centerX, y: centerY });
// Exposure
const supportsExposure = device.supportsExposure;const frameProcessor = useFrameProcessor((frame) => {
"worklet";
const detectedFaces = detectFaces(frame);
console.log(`Detectadas ${detectedFaces.length} faces`);
}, []);Solução: Verifique se as permissões estão corretamente configuradas no Info.plist (iOS) ou AndroidManifest.xml (Android).
Solução: Certifique-se de que o dispositivo possui câmera e que o app tem permissão para acessá-la.
Solução:
cd ios
pod deintegrate
pod install
cd ..Solução: Verifique se o minSdkVersion está configurado para pelo menos 21 no android/build.gradle.
Contribuições são bem-vindas! Para contribuir:
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/MinhaFeature) - Commit suas mudanças (
git commit -m 'Adiciona MinhaFeature') - Push para a branch (
git push origin feature/MinhaFeature) - Abra um Pull Request
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
- Documentação oficial react-native-vision-camera
- Exemplos e guias
- API Reference
- Frame Processor Plugins
Desenvolvido por Ranielli Montagna
- Marc Rousavy - Criador da react-native-vision-camera
- Comunidade React Native
Status do Projeto: 🚧 Em desenvolvimento ativo