Sprendi champagne e ciambelle! La funzionalità di Chrome più speciale di sempre è stata implementata.
Immagina un registratore delle piste da sci che sincronizza i video con i dati di GeoLocation, una semplicissima app di promemoria vocali o un widget che ti consente di registrare un video e caricarlo su YouTube, il tutto senza plug-in.
L'API MediaRecorder ti consente di registrare audio e video da un'app web. Al momento è disponibile in Firefox e in Chrome per Android e computer.
Fai una prova qui.
L'API è semplice e lo dimostrerò usando il codice della demo del repository di esempio WebRTC. Tieni presente che l'API può essere utilizzata solo da origini sicure: HTTPS o localhost.
Per prima cosa, crea un'istanza di MediaRecorder con MediaStream. Facoltativamente, utilizza un parametro options per specificare il formato di output desiderato:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
Il MediaStream può provenire da:
- Una chiamata
getUserMedia(). - Il destinatario di una chiamata WebRTC.
- Una registrazione dello schermo.
- Web Audio, una volta implementato questo problema.
Per options è possibile specificare il tipo MIME e, in futuro, le velocità in bit audio e video.
I tipi MIME hanno valori più o meno specifici e combinano container e codec. Ad esempio:
- audio/webm
- video/webm
- video/webm;codecs=vp8
- video/webm;codecs=vp9
Utilizza il metodo statico MediaRecorder.isTypeSupported() per verificare se un tipo MIME è supportato, ad esempio quando crei un'istanza di 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 {
// ...
}
L'elenco completo dei tipi MIME supportati da MediaRecorder in Chrome è disponibile qui.
Poi, aggiungi un gestore dati e chiama il metodo start() per iniziare la registrazione:
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 {
// ...
}
}
In questo esempio viene aggiunto un BLOB all'array recordedChunks ogni volta che i dati diventano disponibili. Al metodo start() è possibile assegnare facoltativamente un argomento timeSlice che specifica la lunghezza dei contenuti multimediali da acquisire per ogni BLOB.
Quando hai finito di registrare, comunica a MediaRecorder:
mediaRecorder.stop();
Riproduci i BLOB registrati in un elemento video creando un "super-Blob" dall'array di BLOB registrati:
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
In alternativa, puoi eseguire il caricamento su un server tramite XHR o utilizzare un'API come YouTube (consulta la demo sperimentale di seguito).
Il download può essere eseguito con la compromissione di alcuni link:
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 sulle API e demo
La possibilità di registrare audio e video senza plug-in è relativamente nuova nelle app web, pertanto apprezziamo in particolare il tuo feedback sulle API.
- Bug di implementazione di MediaRecorder: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Demo: github.com/webrtc/samples
Vorremmo inoltre sapere quali sono gli scenari di utilizzo più importanti per te e a quali funzionalità vorresti che diamo la priorità. Commenta questo articolo o monitora i progressi all'indirizzo crbug.com/262211.
Demo
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (stesso codice, URL più semplice per i dispositivi mobili)
- Registra un video e caricalo su YouTube con un elemento
<google-youtube-upload>personalizzato sperimentale
App
- L'app Memos vocali di Paul Lewis ora supporta MediaRecorder, con polyfill per i browser che non supportano l'audio MediaRecorder.
Polyfill
- MediaStreamRecorder di Muaz Khan è una libreria JavaScript per la registrazione di audio e video, compatibile con MediaRecorder.
- Recorderjs consente la registrazione da un nodo API Web Audio. Puoi vedere questa funzionalità nell'app Memo vocali di Paul Lewis.
Supporto del browser
- Chrome 49 e versioni successive per impostazione predefinita
- Chrome desktop 47 e 48 con funzionalità della piattaforma web sperimentale attivata da chrome://flags
- Firefox dalla versione 25
- Edge: "In corso di considerazione"
Specifiche
w3c.github.io/mediacapture-record/MediaRecorder.html