WebRTC convertir webm en mp4 avec ffmpeg.js

Question

Je cherche à convertir des fichiers webM en mp4 avec ffmpeg.js. J'enregistre une vidéo depuis le canvas (superposé avec quelques informations) et j'enregistre les données audio de la vidéo.

stream = new MediaStream();
var videoElem = document.getElementById('video');
var videoStream = videoElem.captureStream();
stream.addTrack(videoStream.getAudioTracks()[0]);
stream.addTrack(canvas.captureStream().getVideoTracks()[0]);
var options = {mimeType: 'video/webm'};
  recordedBlobs = [];
  mediaRecorder = new MediaRecorder(stream, options);
  mediaRecorder.onstop = handleStop;
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(100); // collect 100ms of data

function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}
mediaRecorder.stop();

Ce code fonctionne comme prévu et retourne une vidéo webm

var blob = new Blob(recordedBlobs, {type: 'video/webm'});

Maintenant, je veux un fichier mp4 et j'ai vérifié le ffmpeg.js de muaz-khan. Les exemples montrent simplement comment convertir en mp4 lorsque l'on a 2 flux distincts (audio et vidéo). Mais j'ai un flux avec une piste audio supplémentaire. Puis-je convertir un tel flux en mp4? Comment cela peut-il être fait?

Answer 1

Conformément à l'exemple de code fourni, votre flux d'enregistrement ne comporte qu'un seul morceau audio et une piste vidéo.

Si votre fichier d'entrée comporte à la fois de l'audio et de la vidéo, vous devez spécifier le codec de sortie pour les deux pistes ici comme suit.

worker.postMessage({
    type: 'command',
    arguments: [
       '-i', 'audiovideo.webm',
       '-c:v', 'mpeg4',
       '-c:a', 'aac', // or vorbis
       '-b:v', '6400k',  // débit vidéo
       '-b:a', '4800k',  // débit audio
       '-strict', 'experimental', 'audiovideo.mp4'
     ],
    files: [
        {
            data: new Uint8Array(fileReaderData),
            name: 'audiovideo.webm'
        }
     ]
    });

La transcodage de la vidéo dans le navigateur est déconseillé, car cela consommera plus de temps CPU et de mémoire. De plus, ffmpeg_asm.js est lourd. Peut-être correct pour une preuve de concept :)

Quel est votre cas d'utilisation? Le webm (vp8/vp9) est largement utilisé de nos jours.

Chrome prendra en charge les types MIME suivants:

"video/webm"
"video/webm;codecs=vp8"
"video/webm;codecs=vp9"
"video/webm;codecs=h264"
"video/x-matroska;codecs=avc1"

Vous pouvez donc obtenir un enregistrement mp4 directement depuis le MediaRecorder de Chrome avec l'astuce suivante

var options = {mimeType: 'video/webm;codecs=h264'}; 
mediaRecorder = new MediaRecorder(stream, options);
.....
// Avant de fusionner les blobs, changez le type de sortie 
var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
// Et nommez votre fichier video.mp4