Ferramenta de Gravação de Tela

O gravador de tela captura a tela inteira, uma janela de aplicativo ou uma aba do navegador diretamente no browser. Dependendo do suporte e das permissões, também pode incluir áudio do sistema e entrada de microfone, sendo útil para tutoriais rápidos, reprodução de bugs, demonstrações de produto, trechos de aula, revisões de design e explicações de suporte sem instalar software separado. Antes de gravar, é importante verificar janelas privadas, notificações, senhas, dados de clientes e abas não relacionadas, porque a área escolhida será registrada exatamente como está. O processamento é local e o arquivo pode ser baixado depois, mas qualidade e áudio dependem do ambiente.

A captura começa com navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }), que retorna um MediaStream contendo uma faixa de vídeo (a tela, janela ou aba escolhida) e opcionalmente uma faixa de áudio quando o navegador e a fonte permitem. O usuário escolhe a superfície em um diálogo nativo, e a stream termina automaticamente quando o usuário clica no botão do sistema de parar compartilhamento, que dispara o evento ended da faixa para que o gravador possa finalizar o arquivo.

A saída codificada é produzida pela API MediaRecorder. A seleção de contêiner e codec passa por MediaRecorder.isTypeSupported() com candidatos como video/webm;codecs=vp9,opus, video/webm;codecs=vp8,opus, e no Safari video/mp4;codecs=avc1. ondataavailable dispara periodicamente (ou ao parar), entregando pedaços Blob que são concatenados em um único Blob com o mimeType da gravação. videoBitsPerSecond e audioBitsPerSecond equilibram qualidade e tamanho do arquivo, e uma screencast típica de 1080p a 4 Mbps VP9 ocupa cerca de 30 MB por minuto.

Quando áudio do sistema e microfone são solicitados simultaneamente, a página constrói um AudioContext, envolve cada MediaStreamTrack em um MediaStreamAudioSourceNode, e os mistura através de um GainNode em um MediaStreamAudioDestinationNode. A faixa de áudio mesclada substitui as streams originais antes do MediaRecorder iniciar, de modo que o WebM resultante contém uma única faixa Opus mista em vez de duas separadas. Suporte do navegador requer Chrome 72+, Firefox 66+ ou Safari 13+; navegadores mais antigos recusam getDisplayMedia ou omit a restrição de áudio.

• API de captura: navigator.mediaDevices.getDisplayMedia({ video, audio }) retorna um MediaStream; o usuário escolhe tela/janela/aba em um diálogo do sistema
• Codificador: MediaRecorder com isTypeSupported() testando video/webm;codecs=vp9,opus primeiro, recorrendo a vp8 ou H.264/AVC1 em MP4
• Saída em pedaços: ondataavailable gera fatias Blob que são concatenadas e envolvidas em um Blob do mimeType negociado
• Mistura de áudio: AudioContext + MediaStreamAudioSourceNode + GainNode + MediaStreamAudioDestinationNode mesclam o áudio do sistema com o microfone em uma única faixa Opus
• Fim da stream: o evento ended da faixa de vídeo é disparado quando o usuário clica na barra de parar compartilhamento do navegador, finalizando a gravação
• Controle de bitrate: videoBitsPerSecond entre 2,5-8 Mbps para 1080p; 4 Mbps VP9 equivale a cerca de 30 MB por minuto
• Linha de base do navegador: Chrome 72+, Firefox 66+, Safari 13+; captura de áudio da aba funciona apenas em navegadores baseados em Chromium com a caixa de seleção de compartilhamento de áudio da aba