Skip to content

CAMERA_MODULE_UPDATE.md

Latest commit

 

History

History
235 lines (183 loc) · 6.47 KB

CAMERA_MODULE_UPDATE.md

File metadata and controls

235 lines (183 loc) · 6.47 KB

📱 Atualização do Módulo de Câmera - ScanPDF

✅ Implementações Concluídas

1. Fim do Ciclo de Foto Automática

  • ✓ Removido temporizador de 3 segundos
  • ✓ Removido loop de captura contínua
  • ✓ Captura estritamente manual via botão Shutter (câmera)
  • ✓ Feedback visual em tempo real com detecção de bordas

Localização: src/screens/CameraScreen.tsx (linhas 25-70)

2. Feedback Visual em Tempo Real (Detecção de Bordas)

EdgeDetectionOverlay Component

src/components/EdgeDetectionOverlay.tsx

Recursos:

  • 🎯 Quadrilátero dinâmico que se adapta às bordas detectadas
  • 🎨 Mudança de cor inteligente:
    • Branco/Amarelo → Documento desalinhado
    • Verde ✓ → Documento bem enquadrado e estável
  • 📍 Indicadores de canto (↖↗↙↘) quando instável
  • 💬 Feedback em texto real-time:
    • "⊘ Mova para enquadramento" (instável)
    • "✓ Pronto para capturar" (estável)
  • 🔄 Animação de pulso quando documento está estável

Lógica de Detecção:

interface DocumentCorners {
  topLeft: { x: number; y: number };
  topRight: { x: number; y: number };
  bottomLeft: { x: number; y: number };
  bottomRight: { x: number; y: number };
}

// Verifica se as bordas formam um retângulo estável
function isDocumentStable(corners: DocumentCorners): boolean

3. Tela de Edição e Recorte (Crop Interativo)

CropAdjustmentScreen

src/screens/CropAdjustmentScreen.tsx

Recursos Principais:

Polígono de 4 Pontos
  • 📌 4 âncoras nos cantos (top-left, top-right, bottom-left, bottom-right)
  • 🎯 Cada ponto pode ser arrastado livremente
  • 🧲 Detecção automática de toque (raio de 50px)
  • 🔴 Pontos mudam de cor ao serem selecionados
Magnifier Tool (Lupa)
  • 🔍 Zoom 3x ao arrastar um canto
  • 📍 Posicionado próximo ao cursor
  • ✨ Borda amarela para destaque
  • 🎯 Crosshair no centro para precisão

Exemplo de uso:

// Após captura, navega automaticamente para:
navigation.navigate('CropAdjustment', {
  imageUri: photo.uri,
  initialCorners: detectedCorners
});

4. Processamento de Imagem

Funções Disponíveis (src/utils/imageProcessing.ts)

4.1 - Transformação de Perspectiva
async function applyPerspectiveTransform(
  imageUri: string,
  corners: DocumentCorners,
  targetWidth: number = 1240,
  targetHeight: number = 1754
): Promise<string>
  • Detecta a região do documento pelos 4 cantos
  • Realiza crop automático
  • Redimensiona para tamanho padrão de documento (A4)
4.2 - Magic Color Filter
async function applyMagicColorFilter(imageUri: string): Promise<string>
  • Aumenta contraste automaticamente
  • Prepara para OCR
  • Remove tons de sombra sutilmente
4.3 - Black & White Filter (preparado para uso)
async function applyBlackAndWhiteFilter(imageUri: string): Promise<string>
  • Converte para escala de cinza
  • Aumenta contraste drasticamente
  • Ideal para documentos em ambientes com pouca luz

🏗️ Arquitetura Técnica

Fluxo de Uso

[CameraScreen]
    ↓ (Detecção em tempo real)
[EdgeDetectionOverlay] (feedback visual)
    ↓ (Clique no botão shutter)
[Captura de foto]
    ↓ Redimensiona para 1240px
[CropAdjustmentScreen]
    ↓ (Usuário ajusta 4 cantos com magnifier)
[Aplica perspectiva transform]
    ↓
[Aplica Magic Color Filter]
    ↓
[AddScanPage ao Store]
    ↓
[Retorna para CameraScreen ou vai para Editor]

Componentes

  1. CameraScreen (src/screens/CameraScreen.tsx)

    • Camera view com edge detection contínuo
    • Bottom controls (Modo, Shutter, Pronto)
    • Page count badge e flash toggle

  2. EdgeDetectionOverlay (src/components/EdgeDetectionOverlay.tsx)

    • Renderiza quadrilátero visual
    • Animações de feedback
    • Indicadores de estabilidade

  3. CropAdjustmentScreen (src/screens/CropAdjustmentScreen.tsx)

    • Drag/drop dos 4 corners
    • Magnifier zoom
    • Preview em tempo real
    • Botões Aplicar/Descartar

  4. imageProcessing.ts (src/utils/imageProcessing.ts)

    • Funções de detecção
    • Perspective transform
    • Filtragem de imagem
    • Utilitários de geometria

🎨 Customizações Disponíveis

Cores (baseadas em theme.ts)

  • Colors.accent - Verde (quando estável)
  • Colors.accent2 - Cyan (pontos ativos)
  • Colors.warning - Amarelo (quando instável)

Dimensões

  • Frame de captura: 78% da largura × 1.35× altura (proporção A4)
  • Magnifier size: 100px
  • Corner radius: 12px

Timing

  • Edge detection loop: 500ms
  • Pulse animation: 600ms ciclo
  • Estabilidade tolerance: 5%

📋 Requisitos Técnicos Atendidos

Requisito Status Implementação
Desativar auto-capture ✅ Captura manual apenas
Edge detection em tempo real ✅ EdgeDetectionOverlay
Mudança de cor (feedback) ✅ Branco→Verde quando estável
Crop interativo 4 pontos ✅ CropAdjustmentScreen
Magnifier tool ✅ Zoom 3x ao arrastar
Perspective warp ✅ applyPerspectiveTransform()
Magic Color filter ✅ applyMagicColorFilter()
Compatível com Expo ✅ Sem plugins nativos necessários

🚀 Próximas Melhorias Sugeridas

  1. ML Kit Document Scanner (Google Vision)

    • Instalar: @react-native-ml-kit/document-scanner
    • Para detecção automática de bordas mais precisa

  2. OpenCV.js

    • Para transformação de perspectiva com interpolação 8x mais rápida

  3. Gesture Animations

    • Usar react-native-reanimated para mais fluidez ao arrastar

  4. Batch Processing

    • Processar múltiplas páginas em paralelo

📁 Arquivos Modificados/Criados

Novos:

  • src/utils/imageProcessing.ts - Utilitários de processamento
  • src/components/EdgeDetectionOverlay.tsx - Overlay de detecção
  • src/screens/CropAdjustmentScreen.tsx - Tela de crop

Modificados:

  • src/screens/CameraScreen.tsx - Refatoração completa
  • src/navigation/AppNavigator.tsx - Adição de rota CropAdjustment

🧪 Testando

# Para testar a câmera com edge detection:
1. Aponte para um documento (A4, passaporte, etc)
2. Veja o quadro mudar de cor quando bem enquadrado
3. Clique no botão circulador branco centrale (shutter)
4. Ajuste os 4 cantos conforme necessário
5. Use a lupa para precisão
6. Clique "Aplicar" para salvar

Desenvolvido com ❤️ para ScanPDF