webRTC convert webm to mp4 with ffmpeg.js

Question

I am trying to convert webM files to mp4 with ffmpeg.js. I am recording a video from canvas(overlayer with some information) and recording the audio data from the video.

Answer 1

As per the provided code sample, your recorder stream is having only one audio & one video tracks.

If your input file is having both Audio & Video, then you need to specify output codec for both tracks here as following.

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-coding the video inside browser is not recommend, as it will consume more CPU Time & Memory. And ffmpeg_asm.js is heavy. May be ok for POC :)

What is your use case? webm(vp8/vp9) is widely using these days.

Chrome will support following mime types:

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

So you can get mp4 recording directly from chrome MediaRecorder with following hack

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