Rompi lo champagne e le ciambelle! La funzionalità di Chrome più scelta come preferita di sempre è stata implementata.
Immagina un registratore di piste da sci che sincronizza i video con i dati di GeoLocation, una semplicissima app di memo 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. È ora disponibile in Firefox e in Chrome per Android e computer.
Prova qui.
L'API è semplice, come dimostrerò utilizzando il codice della demo del repository di esempi 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(). - La parte ricevente 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, combinando 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 esegui l'inizializzazione 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.
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 quando i dati diventano disponibili. Se vuoi, al metodo start() puoi passare un argomento timeSlice che specifica la durata dei contenuti multimediali da acquisire per ogni blob.
Al termine della registrazione, di' 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 caricare i dati su un server tramite XHR o utilizzare un'API come YouTube (vedi la demo sperimentale di seguito).
Il download può essere ottenuto con alcuni hack dei 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 sulle demo
La possibilità di registrare audio e video senza plug-in è relativamente nuova per le app web, quindi apprezziamo molto 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 anche sapere quali scenari di utilizzo sono più importanti per te e quali funzionalità vorresti che dessimo la priorità. Commenta questo articolo o monitora l'avanzamento all'indirizzo crbug.com/262211.
Demo
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (stessa funzionalità, URL più semplice per il mobile)
- Registrare un video e caricarlo su YouTube con un elemento
<google-youtube-upload>personalizzato sperimentale
App
- L'app Voice Memos di Paul Lewis ora supporta MediaRecorder, con il 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 dell'API Web Audio. Puoi vedere come funziona nell'app Memo vocali di Paul Lewis.
Supporto browser
- Chrome 49 e versioni successive per impostazione predefinita
- Versioni desktop di Chrome 47 e 48 con le funzionalità della piattaforma web sperimentale attivate da chrome://flags
- Firefox dalla versione 25
- Edge: "In considerazione"
Spec
w3c.github.io/mediacapture-record/MediaRecorder.html