MídiaAo vivo

Media Capture Studio

Três demos de captura de mídia que compartilham a mesma base técnica: acesso à câmera e ao microfone via getUserMedia, compartilhamento de tela via getDisplayMedia, e gravação de todos os streams com a MediaRecorder API — com negociação automática de codec (VP9 → VP8 → WebM puro) via MediaRecorder.isTypeSupported. Cada gravação vira um Blob local, reproduzido em um player de áudio/vídeo construído do zero, sem depender dos controles nativos do navegador: play/pause, barra de progresso via requestAnimationFrame e seek por clique. Tudo roda no navegador — nenhum byte de mídia sai do dispositivo do usuário.

getUserMedia getDisplayMedia MediaRecorder Camera API Screen Recording Gravação de Áudio Blob Negociação de Codec

Tecnologias

  • MediaDevices API
  • MediaRecorder API
  • Blob
  • URL.createObjectURL
  • requestAnimationFrame

Arquitetura

  • Captura de MediaStream via Browser APIs (getUserMedia/getDisplayMedia) + encoding client-side com MediaRecorder
  • com negociação de codec e player customizado renderizado a partir do Blob gerado

Conceitos

  • Permissões de mídia no browser
  • negociação de codec (MediaRecorder.isTypeSupported)
  • captura de stream em tempo real
  • encoding client-side
  • gerenciamento de Blob e Object URL
  • player de mídia customizado
  • download local sem upload a servidor

Área de demonstração

A demonstração é 100% funcional — teste agora.