webRTC convertir webm en mp4 avec ffmpeg.js

Question

Je suis en train de convertir des fichiers webM en mp4 avec ffmpeg.js. Je suis en train d'enregistrer une vidéo à partir de canvas (superposition avec quelques informations) et d'enregistrer 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 renvoie une vidéo WebM

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

Maintenant, je veux un fichier mp4 et vérifié les ffmpeg.js de Muaz-khan. Les exemples montrent juste comment convertir en mp4 lorsque vous avez 2 flux uniques (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

Selon l'exemple de code fourni, le flux de votre enregistreur n'a qu'une seule piste audio &.

Si votre fichier d'entrée contient à la fois Audio & Vidéo, vous devez spécifier le codec de sortie pour les deux pistes here comme suit.

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

Trans-codage de la vidéo dans le navigateur est pas recommandé, car il consommera plus de temps & mémoire CPU. Et ffmpeg_asm.js est lourd. Peut être ok pour POC :)

Quelle est votre utilisation? webm (vp8/vp9) utilise largement ces jours-ci.

Chrome soutiendra suivant les types MIME:

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

Vous pouvez donc obtenir mp4 enregistrement directement à partir MediaRecorder chrome avec suivant bidouille

var options = {mimeType: 'video/webm;codecs=h264'}; 
mediaRecorder = new MediaRecorder(stream, options); 
..... 
//Before merging blobs change output mime 
var blob = new Blob(recordedBlobs, {type: 'video/mp4'}); 
// And name your file as video.mp4