Search code examples
javascriptnode.jselectron

How do you change video format to mp4 in MediaRecorder()?

So I followed fireship's tutorial on making a video recorder app using electronjs. When using the MediaRecorder function to record a video of the screen you pass in an option to specify the video format which is in this case video/webm. I want to change it to video/mp4 but I don't know what to put there. At the moment it looks like this:

const options = { mimeType: "video/webm; codecs=vp9" };
const media = new MediaRecorder(stream, options);

I read the MDN documentation on this but I don't know anything about video formats. https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter. I tried to pass in "video/mp4; codecs=avc1.4d002a" but it didn't work.

Solution

  • Not all browsers support MP4 encoding or playback. One example is Chromium, which Chrome, Brave, Edge, and others are based on.

    Simply setting mimeType of MediaRecorder won't work.

    To find out if the MediaRecorder implementation in the browser you are using support MP4 recording you can run

    MediaRecorder.isTypeSupported("video/mp4")

    There are several third-party libraries you can use to encode media to MP4, such as https://github.com/Vanilagy/mp4-muxer, and https://github.com/vjeux/mp4-h264-re-encode.