Enregistrer des fichiers audio et vidéo avec MediaRecorder

Sortez le champagne et les donuts ! La fonctionnalité Chrome la plus appréciée de Chrome a JAMAIS été implémentée.

Imaginez un enregistreur de pistes de ski qui synchronise les vidéos avec les données GeoLocation, une application de mémo vocal très 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 du contenu audio et vidéo à partir d'une application Web. Elle est désormais disponible dans Firefox et dans Chrome pour Android et pour ordinateur.

Pour essayer, cliquez ici.

Capture d'écran de la démonstration de mediaRecorder sur Android Nexus 5X

L'API est simple. Je vais vous le montrer à l'aide du code de la démonstration de l'exemple de dépôt WebRTC. Notez que l'API ne peut être utilisée qu'à partir d'origines sécurisées: HTTPS ou localhost.

Commencez par instancier un MediaRecorder avec un MediaStream. Vous pouvez également 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 des sources suivantes:

  • Un appel getUserMedia().
  • Extrémité réceptrice d'un appel WebRTC.
  • Un enregistrement d'écran
  • Audio sur le Web, une fois ce problème résolu.

Pour options, il est possible de spécifier le type MIME et, à l'avenir, les débits 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
  • vidéo/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 objet 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 longueur du contenu multimédia à capturer pour chaque objet Blob.

Lorsque vous avez terminé l'enregistrement, indiquez à MediaRecorder les informations suivantes:

mediaRecorder.stop();

Lire les blobs enregistrés dans un élément vidéo en créant un "super-Blob" à partir du tableau des blobs enregistrés:

function play() {
    var superBuffer = new Blob(recordedChunks);
    videoElement.src =
    window.URL.createObjectURL(superBuffer);
}

Vous pouvez également importer sur un serveur via XHR ou utiliser une API telle que YouTube (voir la démonstration expérimentale ci-dessous).

Le téléchargement peut être obtenu avec un certain 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 du son et de la vidéo sans plug-ins étant relativement nouvelle pour les applications Web, nous apprécions particulièrement vos commentaires sur les API.

Nous aimerions également connaître les scénarios d'utilisation les plus importants pour vous et les fonctionnalités que vous voudriez que nous traitions en priorité. Commentez cet article ou suivez votre progression sur crbug.com/262211.

Démonstrations

Applications

  • L'application Voice Memos de Paul Lewis est désormais compatible avec MediaRecorder. Elle est émulée pour les navigateurs qui ne l'acceptent pas.

Polyfills

  • MediaStreamRecorder de Muaz Khan est une bibliothèque JavaScript permettant d'enregistrer des contenus audio et vidéo. Elle est compatible avec MediaRecorder.
  • Recorderjs active l'enregistrement à partir d'un nœud d'API Web Audio. Vous pouvez observer son fonctionnement dans l'application Voice Memos de Paul Lewis.

Prise en charge des navigateurs

  • Chrome 49 ou version ultérieure par défaut
  • Ordinateurs Chrome 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'

Caractéristiques techniques

w3c.github.io/mediacapture-record/MediaRecorder.html.

Informations sur l'API

developer.mozilla.org/en/docs/Web/API/MediaRecorder_API