How to make mp4 from MediaStream in Chrome browser

Question

MediaRecorder.isTypeSupported('video/mp4') is false in Chrome. So I found MediaStreamRecorder https://github.com/streamproc/MediaStreamRecorder then I did

var recorder = new MediaStreamRecorder(stream, {
  mimeType: 'video/mp4',
});
// also
recorder.mimeType = 'video/mp4';

But the output is webm as I checked with ffmpeg -i

Input #0, matroska,webm, from '/Users/otiai10/Downloads/example.mp4':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Video: vp8, yuv420p, 640x480, SAR 1:1 DAR 4:3, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)

The video is playable in Chrome but NOT on QuickTime Player, in evidence.

Here are more details and (not!) working example of this problem.

It was said muaz-khan/Ffmpeg.js can convert webm to mp4, but the file size matters.

Is there any workaround to record and save as mp4?

score 9 · Accepted Answer · edited Mar 18 '23 at 01:51

9

OK, that was my misunderstanding.

See https://github.com/streamproc/MediaStreamRecorder/issues/117 for more details.

MediaStreamRecorder can record audio as WAV and video as either WebM or animated gif on Chrome

no mp4 possible.

edited Mar 18 '23 at 01:51

xXCodeMonkeyXx

5
2

answered Feb 18 '17 at 17:47

otiai10

4,289
5
38
50

4

is this still true today? thanks for sharing! – Crashalot Jan 08 '21 at 23:07
@Crashalot yes, it's still true. – Richard Zilahi Mar 11 '21 at 20:17
what about ios 11 that media recorder is not implimented in it? – Ghazaleh Javaheri Feb 17 '22 at 08:40

score 2 · Answer 2 · answered Oct 05 '21 at 12:47

2

Checkout ffmpeg.wasm

You can install it via:

# Use npm
$ npm install @ffmpeg/ffmpeg @ffmpeg/core
# Use yarn
$ yarn add @ffmpeg/ffmpeg @ffmpeg/core

And then, you can convert your blobs into an mp4 file. Checkout the example that they provided in the link I shared.

answered Oct 05 '21 at 12:47

ilpianoforte

1,180
1
10
28

we need convert mediStream to mp4 , mediaStream is different than blob – Ghazaleh Javaheri Feb 05 '22 at 07:29
1

@ghazalehjavaheri As far as I know, it is currently not possible to directly get mp4 from a mediaStream. – ilpianoforte Feb 14 '22 at 08:56

score 0 · Answer 3 · answered Sep 01 '21 at 06:07

0

Whilst it isn't possible to directly record in mp4, you can pass the resulting webm file to webm-to-mp4 to have it converted:

const webmToMp4 = require("webm-to-mp4")
 
const mp4 = webmToMp4(webm)

The module can be compiled to work in the browser since it uses ffmpeg.js under the hood.

answered Sep 01 '21 at 06:07

Richie Bendall

7,738
4
38
58

This is an interesting concept. Do you know of any implementations of this? (encoding mp4 direct on the client side browser)? – Phil Sep 09 '21 at 14:15
1

This implements a browser-friendly build of ffmpeg so that it will work in the browser. – Richie Bendall Sep 11 '21 at 04:05

How to make mp4 from MediaStream in Chrome browser

3 Answers3

Linked

Related