WebRTC convert webm to mp4 using ffmpeg.js

Question

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

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(); 

This code works as expected and returns web video

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

Now I want the mp4 file and checked ffmpeg.js from muaz khan. The examples show how to convert to mp4 when you have 2 separate streams (audio and video). But I have one stream with an additional sound track. Is it possible to convert such a stream to mp4? How can I do that?

Answer 1

According to the presented code sample, there is only one audio and one video track in your recorder stream.

If your input file has both audio and video, you need to specify the output codec for both tracks here as follows.

 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' } ] }); 

Transcoding video inside the browser is not recommended, as it will consume more processor time and memory. And ffmpeg_asm.js is hard. May be good for POC :)

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

Chrome will support the 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 record directly from chrome MediaRecorder with the 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