Files
SteelXR/.lovable/plan.md
T
gpt-engineer-app[bot] b52bf3605a Changes
Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
2026-05-19 20:57:29 +00:00

2.8 KiB

Plano: Mini-menu de Captura (Foto + Vídeo) no Modo AR

Objetivo

Adicionar dentro do HUD flutuante do modo AR um pequeno menu de captura com:

  • 📸 Foto — screenshot do canvas (já existe lógica, expor no AR)
  • ● Gravar / ⏸ Pausar / ▶ Retomar / ■ Parar — gravação de vídeo do canvas WebXR

O que será implementado

1. Novo hook useCanvasRecorder (src/hooks/useCanvasRecorder.ts)

  • Usa canvas.captureStream(30) + MediaRecorder (codec video/webm;codecs=vp9 com fallback p/ vp8).
  • Estados expostos: status (idle | recording | paused), elapsedMs.
  • Métodos: start(), pause(), resume(), stop().
  • Ao parar: monta Blob webm, gera URL.createObjectURL, dispara download automático (tracksteel-AR-<timestamp>.webm) e também salva uma referência opcional para galeria futura.
  • Captura screenshot via canvas.toDataURL('image/png') reutilizando o store (addScreenshot) — mesma lógica já presente em XRHud.tsx.

2. Nova aba "Captura" no HUD 3D (src/components/three/XRHudInWorld.tsx)

  • Adicionar tab capture (ícone 🎥) na barra de tabs (junto com Cena, Ferram., Inspeção, Compart., WebXR).
  • Componente CaptureTab com botões 3D (XR3DButton):
    • 📸 Foto — chama screenshot, mostra toast "Foto capturada".
    • ● REC (vermelho quando gravando) — inicia/para gravação.
    • ⏸ Pause / ▶ Resume — alterna pausa (desabilitado quando idle).
    • ■ Stop — finaliza e baixa o arquivo.
    • Texto de status: ● 00:12 em vermelho enquanto grava, amarelo quando pausado.
  • Indicador visual flutuante (pequeno círculo vermelho pulsante) visível mesmo com painel fechado quando estiver gravando — anexado ao headLockRef.

3. Integração

  • O hook recebe o <canvas> via document.querySelector('canvas') (mesmo padrão usado em XRHud.tsx/handleScreenshot).
  • Nenhuma mudança no store global é necessária — o estado de gravação vive no hook, instanciado no nível do XRSession.tsx e passado por props ao XRHudInWorld, OU mantido dentro do próprio CaptureTab via singleton simples.

Detalhes técnicos

  • MediaRecorder com canvas.captureStream(30) funciona dentro de sessão WebXR no Quest 3 (Chromium-based browser do Quest suporta).
  • Áudio do microfone não será incluído (pode ser adicionado depois se solicitado).
  • Vídeo gerado é .webm; o usuário pode converter para .mp4 fora do app se quiser.
  • O download é feito ao parar a gravação — o arquivo aparece no armazenamento do Quest (pasta Downloads do browser).

Arquivos afetados

  • src/hooks/useCanvasRecorder.ts (novo)
  • src/components/three/XRHudInWorld.tsx (nova tab + CaptureTab + indicador REC)

Fora do escopo

  • Galeria de vídeos dentro do app (apenas download direto por enquanto).
  • Áudio/microfone na gravação.
  • Streaming/upload para nuvem.