Pegue o champanhe e os donuts! O recurso do Chrome com mais estrelas de todos os tempos foi implementado.
Imagine um gravador de pista de esqui que sincronize vídeos com dados de geolocalização, ou um aplicativo de memorando de voz super simples ou um widget que permite gravar um vídeo e enviá-lo ao YouTube, tudo sem plug-ins.
A API MediaRecorder permite gravar áudio e vídeo de um app da Web. Ela já está disponível no Firefox e no Chrome para Android e computadores.
Faça um teste aqui.
A API é direta, e vou demonstrar isso usando o código da demonstração do repositório de exemplo WebRTC. A API só pode ser usada em origens seguras: HTTPS ou localhost.
Primeiro, instancie um MediaRecorder com um MediaStream. Se quiser, use um parâmetro options para especificar o formato de saída desejado:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
O MediaStream pode ser de:
- Uma chamada
getUserMedia(). - O fim de recebimento de uma chamada WebRTC.
- Uma gravação de tela.
- Web Audio, depois que esse problema for implementado.
Para o options, é possível especificar o tipo MIME e, no futuro, as taxas de bits de áudio e vídeo.
Os tipos MIME têm valores mais ou menos específicos, combinando contêineres e codecs. Exemplo:
- audio/webm
- vídeo/webm
- vídeo/webm;codecs=vp8
- vídeo/webm;codecs=vp9
Use o método estático MediaRecorder.isTypeSupported() para verificar se há suporte para um tipo MIME, por exemplo, ao instanciar o MediaRecorder:
var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
options = {mimeType: 'video/webm; codecs=vp8'};
} else {
// ...
}
A lista completa de tipos MIME compatíveis com o MediaRecorder no Chrome está disponível neste link.
Em seguida, adicione um gerenciador de dados e chame o método start() para começar a gravação:
var recordedChunks = [];
var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
} else {
// ...
}
}
Este exemplo adiciona um Blob à matriz recordedChunks sempre que os dados ficam disponíveis. Opcionalmente, o método start() pode receber um argumento timeSlice que especifica o comprimento da mídia a ser capturada para cada Blob.
Ao terminar de gravar, diga ao MediaRecorder:
mediaRecorder.stop();
Reproduza os Blobs gravados em um elemento de vídeo criando um "super-Blob" a partir da matriz de Blobs gravados:
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
Como alternativa, é possível fazer upload para um servidor via XHR ou usar uma API como o YouTube (confira a demonstração experimental abaixo).
É possível fazer o download com algumas invasões de links:
function download() {
var blob = new Blob(recordedChunks, {
type: 'video/webm'
});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'test.webm';
a.click();
window.URL.revokeObjectURL(url);
}
Feedback sobre as APIs e demonstrações
A capacidade de gravar áudio e vídeo sem plug-ins é relativamente nova para aplicativos da Web. Por isso, agradecemos seu feedback sobre as APIs.
- Bug de implementação do MediaRecorder: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Demonstrações: github.com/webrtc/samples
Também queremos saber quais cenários de uso são mais importantes para você e quais recursos devem ser priorizados. Comente este artigo ou acompanhe o progresso em crbug.com/262211.
Demonstrações
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (mesmo código, URL mais fácil para dispositivos móveis)
- Grave um vídeo e faça upload dele para o YouTube com um elemento
<google-youtube-upload>personalizado experimental.
Apps
- Agora o app Voice Memos da Paul Lewis tem suporte para o MediaRecorder, com polyfill aplicado para navegadores que não têm suporte ao áudio com essa ferramenta.
Polyfills
- O MediaStreamRecorder de Muaz Khan é uma biblioteca JavaScript para gravação de áudio e vídeo, compatível com o MediaRecorder.
- O Recorderjs permite a gravação de um nó da API Web Audio. Confira como isso funciona no app Voice Memos de Paul Lewis.
Suporte ao navegador
- Chrome 49 e mais recente por padrão
- Chrome para computadores 47 e 48 com recursos da plataforma da Web experimental ativados em chrome://flags
- Firefox da versão 25
- Edge: "Sob consideração"
Especificações
w3c.github.io/mediacapture-record/MediaRecorder.html (link em inglês)