b52bf3605a
Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
2.8 KiB
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(codecvideo/webm;codecs=vp9com fallback p/ vp8). - Estados expostos:
status(idle | recording | paused),elapsedMs. - Métodos:
start(),pause(),resume(),stop(). - Ao parar: monta
Blobwebm, geraURL.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 emXRHud.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
CaptureTabcom 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:12em 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>viadocument.querySelector('canvas')(mesmo padrão usado emXRHud.tsx/handleScreenshot). - Nenhuma mudança no store global é necessária — o estado de gravação vive no hook, instanciado no nível do
XRSession.tsxe passado por props aoXRHudInWorld, OU mantido dentro do próprioCaptureTabvia singleton simples.
Detalhes técnicos
MediaRecordercomcanvas.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.mp4fora 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.