Vamos brindar com champanhe e comer donuts! O recurso do Chrome mais marcado de todos os tempos foi implementado.
Imagine um gravador de esqui que sincronize vídeos com dados de geolocalização, um app de notas de voz supersimples ou um widget que permita gravar um vídeo e fazer o upload dele no YouTube, tudo sem plugins.
A API MediaRecorder permite gravar áudio e vídeo em um app da Web. Ela está disponível no Firefox e no Chrome para Android e computadores.
Teste aqui.
A API é simples, e vou demonstrar isso usando o código da demonstração do repositório de amostra do WebRTC. A API só pode ser usada em origens seguras: HTTPS ou localhost.
Primeiro, instancie um MediaRecorder com um MediaStream. Opcionalmente, 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 lado de recebimento de uma chamada WebRTC.
- Uma gravação de tela.
- Web Audio, depois que este problema for implementado.
No options, é possível especificar o tipo MIME e, no futuro, os 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
- video/webm;codecs=vp8
- video/webm;codecs=vp9
Use o método estático MediaRecorder.isTypeSupported() para verificar se um tipo MIME tem suporte, por exemplo, quando você instancia 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 {
// ...
}
Confira neste link a lista completa dos tipos MIME compatíveis com o MediaRecorder no Chrome.
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. O método start() pode receber opcionalmente um argumento timeSlice que especifica o comprimento da mídia a ser capturada para cada blob.
Quando terminar de gravar, diga ao MediaRecorder:
mediaRecorder.stop();
Reproduza os Blobs gravados em um elemento de vídeo criando um "super-Blob" da matriz de Blobs gravados:
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
Como alternativa, você pode fazer o upload para um servidor usando XHR ou usar uma API como o YouTube (consulte a demonstração experimental abaixo).
O download pode ser feito com algumas técnicas de hacking 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 e, por isso, agradecemos particularmente os seus comentários sobre as APIs.
- Bug de implementação do MediaRecorder: crbug.com/262211
- Google Chrome: crbug.com/new
- Firefox: bugzil.la
- Demonstrações: github.com/webrtc/samples
Também gostaríamos de saber quais cenários de uso são mais importantes para você e quais recursos você gostaria que fossem 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)
- Gravar um vídeo e fazer o upload dele no YouTube com um elemento
<google-youtube-upload>personalizado experimental
Apps
- O app Voice Memos de Paul Lewis agora tem suporte ao MediaRecorder, com preenchimento polimorfo para navegadores que não oferecem suporte ao áudio do MediaRecorder.
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 em um nó da API Web Audio. Confira isso em ação no app Voice Memos de Paul Lewis.
Suporte ao navegador
- Chrome 49 e versões mais recentes
- Chrome para computador 47 e 48 com recursos experimentais da plataforma da Web ativados em chrome://flags
- Firefox a partir da versão 25
- Edge: "Em consideração"
Especificações
w3c.github.io/mediacapture-record/MediaRecorder.html (link em inglês)