Sortez le champagne et les beignets ! La fonctionnalité Chrome la plus étoilée de tous les temps est désormais implémentée.
Imaginez un enregistreur de descente à ski qui synchronise la vidéo avec des données de géolocalisation, une application de notes vocales super simple ou un widget qui vous permet d'enregistrer une vidéo et de la mettre en ligne sur YouTube, le tout sans plug-in.
L'API MediaRecorder vous permet d'enregistrer des contenus audio et vidéo à partir d'une application Web. Elle est désormais disponible dans Firefox et Chrome pour Android et ordinateur.
Cliquez ici pour essayer.
L'API est simple, que je vais vous montrer à l'aide du code fourni dans la démonstration du dépôt d'exemple WebRTC. Notez que l'API ne peut être utilisée que depuis des origines sécurisées: HTTPS ou localhost.
Commencez par instancier MediaRecorder avec un MediaStream. Vous pouvez éventuellement utiliser un paramètre options pour spécifier le format de sortie souhaité:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
Le MediaStream peut provenir de :
- Un appel
getUserMedia(). - Extrémité réceptrice d'un appel WebRTC.
- Enregistrement d'écran
- Web Audio, une fois ce problème mis en œuvre.
Pour options, vous pouvez spécifier le type MIME et, à l'avenir, les bitrates audio et vidéo.
Les types MIME ont des valeurs plus ou moins spécifiques, combinant conteneur et codecs. Exemple :
- audio/webm
- vidéo/webm
- video/webm;codecs=vp8
- video/webm;codecs=vp9
Utilisez la méthode statique MediaRecorder.isTypeSupported() pour vérifier si un type MIME est pris en charge, par exemple lorsque vous instanciez 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 {
// ...
}
La liste complète des types MIME compatibles avec MediaRecorder dans Chrome est disponible sur cette page.
Ajoutez ensuite un gestionnaire de données et appelez la méthode start() pour commencer l'enregistrement :
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 {
// ...
}
}
Cet exemple ajoute un blob au tableau recordedChunks chaque fois que des données sont disponibles. La méthode start() peut éventuellement recevoir un argument timeSlice qui spécifie la durée du contenu multimédia à capturer pour chaque blob.
Lorsque vous avez terminé l'enregistrement, indiquez à MediaRecorder :
mediaRecorder.stop();
Lancez la lecture des objets blob enregistrés dans un élément vidéo en créant un "super-objet blob" à partir du tableau d'objets blob enregistrés :
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
Vous pouvez également importer des données sur un serveur via XHR ou utiliser une API telle que YouTube (voir la démo expérimentale ci-dessous).
Le téléchargement peut se faire par le biais d'un piratage de lien:
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);
}
Commentaires sur les API et les démonstrations
La possibilité d'enregistrer de l'audio et de la vidéo sans plug-in est relativement nouvelle pour les applications Web. Nous apprécions donc particulièrement vos commentaires sur les API.
- Bug d'implémentation de MediaRecorder: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Démonstrations : github.com/webrtc/samples
Nous aimerions également connaître les scénarios d'utilisation qui vous intéressent le plus et les fonctionnalités que vous souhaitez que nous priorisions. Ajoutez un commentaire sur cet article ou suivez la progression de l'opération sur crbug.com/262211.
Démonstrations
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (même code, URL plus facile à utiliser sur mobile)
- Enregistrer une vidéo et la mettre en ligne sur YouTube avec un élément
<google-youtube-upload>personnalisé expérimental
Applications
- L'application Voice Memos de Paul Lewis est désormais compatible avec MediaRecorder, avec une fonctionnalité de remplissage pour les navigateurs qui ne sont pas compatibles avec l'audio MediaRecorder.
Polyfills
- MediaStreamRecorder de Muaz Khan est une bibliothèque JavaScript d'enregistrement audio et vidéo compatible avec MediaRecorder.
- Recorderjs permet d'enregistrer des contenus à partir d'un nœud d'API Web Audio. Vous pouvez voir cela en action dans l'application Voice Memos de Paul Lewis.
Prise en charge des navigateurs
- Chrome 49 ou version ultérieure par défaut
- Chrome pour ordinateur de bureau 47 et 48 avec les fonctionnalités expérimentales de la plate-forme Web activées depuis chrome://flags
- Firefox à partir de la version 25
- Edge : "En cours de considération"
Spécification
w3c.github.io/mediacapture-record/MediaRecorder.html