Persona Studio

Quem quer publicar no YouTube sem aparecer tem duas saídas ruins: ou monta um setup de vTuber com OBS, plugins e segundo monitor — barreira técnica alta antes do primeiro vídeo — ou grava sem roteiro à frente e trava na câmera. O teleprompter é o nó: qualquer solução que capture a tela inteira grava o roteiro junto, e ler decorando arruína a naturalidade.

1. 01Avatar 3D em VRM renderizado com React Three Fiber e @pixiv/three-vrm — o formato padrão da comunidade vTuber, então avatares do VRoid Studio ou comissionados funcionam direto.
2. 02Rosto capturado pela webcam com MediaPipe Face Landmarker e traduzido em blendshapes e ossos pelo Kalidokit — a expressão do criador anima o avatar em tempo real.
3. 03A decisão arquitetural central: o teleprompter é um overlay DOM posicionado sobre o canvas, e captureStream() lê o buffer WebGL, não a composição do DOM. O roteiro é exibido pelo compositor do navegador mas simplesmente não existe para o MediaRecorder. Descartei display capture (gravaria a tela toda), remover o teleprompter ao gravar (salto visual) e OBS (foge da solução web).
4. 04Pipeline de gravação combinando canvas.captureStream(30fps) com o áudio do getUserMedia num único MediaStream, com preserveDrawingBuffer ativo — sem ele o canvas sairia preto na captura, ao custo de ~5% de performance.
5. 05Chunks de 250ms no MediaRecorder: menos memória acumulada em vídeos longos e menos dados perdidos se algo falhar.
6. 06Geração de roteiro por IA atrás de uma Vercel Edge Function como proxy autenticado — a chave da API nunca entra no bundle. Valida o JWT do Supabase, limita a 10 requisições por usuário por minuto, sanitiza o input, checa a Origin e devolve a resposta em streaming.
7. 07Supabase para auth, banco e storage, com signed URLs: arquivos VRM e vídeos nunca ficam publicamente acessíveis. OAuth Google/GitHub porque criador de YouTube já tem conta Google.
8. 08Headers COOP/COEP configurados para habilitar SharedArrayBuffer, pré-requisito do FFmpeg.wasm na exportação.

• Estado atual: projeto iniciado, não concluído. A arquitetura está fechada e documentada decisão por decisão, com as alternativas descartadas registradas, e o código base do estúdio existe — mas o fluxo de gravação ainda não foi validado ponta a ponta.
• O isolamento do teleprompter está resolvido no desenho, não na gambiarra: sendo overlay DOM fora do buffer WebGL, não há caminho pelo qual o roteiro chegue ao vídeo. Falta confirmar numa gravação real.
• Proxy de IA autenticado com rate limiting e mídia privada por signed URL já implementados no código.
• Pendente: ambiente de autenticação para rodar localmente (o login é só OAuth), biblioteca de vídeos e export para MP4 via FFmpeg.wasm.