Hiveclass
A webcam do aluno vira um avatar 3D que faz o exercício junto com ele — e conta as repetições.
O pedido
Com a turma inteira, o professor não consegue ver se cada aluno fez o exercício, nem se fez certo. A resposta tinha de caber na realidade da escola — uma webcam comum, o navegador, nenhum sensor ou aplicativo para instalar. O briefing e as metas do cliente, como foram escritos [medir].
O que a casa fez
Um avatar que se mexe como o aluno, dentro da tarefa da plataforma. A tarefa corre em três cenas cronometradas: um vídeo explica o exercício; a preparação pede para o aluno se afastar até o corpo inteiro aparecer, calibra e espera a mão direita subir; a demonstração conta as repetições com feedback ao vivo ("EXCELLENT") até a meta. Antes veio um MVP que compara o esqueleto do aluno com a forma certa, e os portais de aluno e professor.
Como foi construído
O MediaPipe lê 33 pontos do corpo por quadro. Um solver transforma esses pontos em rotações de um rig Ready Player Me no three.js, com IK, contato com o chão e detecção de salto. Cada exercício é uma máquina de fases: no jumping jack, braços em cima e pernas abertas é uma fase, braços embaixo e pernas juntas é a outra, e a repetição só conta no ciclo completo, com limiares ajustados à mão (braços 0,05, pernas 0,12). A base foi o projeto open source Mesekai [medir: licença].
Medido
A contagem de 16 é o teste de 2025-05-27, uma pessoa só, na webcam; o 10/10 é a gravação de tela de 2026-05-13. Acerto entre alunos, idades, salas e luz, e o uso em aulas de verdade [medir].
Telas
Especial · Custom Interactive Video Player
O problema
Uma auditoria de acessibilidade mostrou que os controles do vídeo não eram alcançados com Tab: o player do Cloudflare Stream vive num iframe aninhado. Toda aula da plataforma é um vídeo, então era preciso resolver sem mudar onde os vídeos ficam guardados — e o mesmo player tinha de virar a base das aulas interativas.
O player
O player lê o manifesto HLS direto do Cloudflare Stream e toca num <video> comum, na própria página: nenhum iframe para entrar ou sair. Safari e iOS tocam HLS sozinhos; os outros navegadores carregam o hls.js só quando uma tarefa de vídeo abre, e os segmentos só quando se aperta Play. Se um motor falha antes de tocar, o iframe antigo volta. Os atalhos copiam os do YouTube, as barras seguem o padrão de slider do W3C ("1 minuto e 23 segundos de 2 minutos e 39 segundos"), as letras só valem com o foco no player (WCAG 2.1.4) e cada mudança é anunciada ao leitor de tela. Uma chave por grupo de clientes liga ou desliga, sem deploy.
A camada interativa
Uma história é um vídeo longo só, mais uma linha do tempo de interações: escolha (de 2 a 4 respostas, cada uma pula para uma parte), menu (áreas clicáveis desenhadas sobre o quadro), quick time event (agir antes do tempo acabar: uma parte no acerto, outra no erro), quiz (as perguntas da própria tarefa, que contam na nota), pulo e final. Enquanto espera a resposta, um trecho do vídeo fica em laço. Com a câmera ligada, o MediaPipe transforma o corpo em controle. No editor, o autor pausa o vídeo e adiciona a interação naquele instante; os hotspots do menu vêm de um SVG desenhado no Figma, casados pelo nome da camada.
A história de demo (Field Day Warm-Up) foi feita para testar o player: cenas geradas no Gemini e no Google Vids, com a linha do tempo e a folha de cenas saindo da mesma tabela. QA em aparelhos reais no BrowserStack, do iOS 15 ao 18, iPadOS, Android, ChromeOS, Windows e macOS. Resultado entre escolas e alunos [medir].
Créditos
Desenvolvimento: Nilo River. Cliente: Hiveclass. Avatar: Ready Player Me. Pose: MediaPipe (Google). Código-base: Mesekai (open source). Cenas da demo do player: Gemini (Nano Banana) e Google Vids. Equipe da Hiveclass e outros créditos [medir]