Search code examples
javascriptffmpegmp4mediarecorder

How to make MediaRecorder outputs streambale?

I am using MediaRecorder to record the webcam like this :

 let options
        if (MediaRecorder.isTypeSupported('video/webm; codecs=h264')) {
            options = { mimeType: 'video/webm; codecs=h264' };
        } else if (MediaRecorder.isTypeSupported('video/webm; codecs=vp9')) {
            options = { mimeType: 'video/webm; codecs=vp9' };
        } else if (MediaRecorder.isTypeSupported('video/webm; codecs=vp8')) {
            options = { mimeType: 'video/webm; codecs=vp8' };
        } else {
            options = {
                mimeType: 'video/mp4', audioBitsPerSecond: 128 * 1000,
                videoBitsPerSecond: 1 * 1000 * 1000
            };
        }
        recorder = new MediaRecorder(canvasStream, options);
        recorder.start(500)

And I am not able to use video/mp4 as mime type because is not supported by the browsers so I am using video/webm instead. The output file is in chunks and the playback is really smooth yet I am not able to play it online unless it is fully loaded. I decided to add FFMPEG into the process and used ffmpeg -i input.webm -c copy -movflags +faststart output.mp4 but the result is the same. My understanding is that MediaRecorder is recording in chunks that has no MOOV atom to begin with therefore there is no MOOV to be brought to the beginning of the file. How can I generate MOOV for video/webm? Will having MOOV make my file streambale or playable at buffer at all?

Here is a sample of my file :

enter image description here

Solution

  • And I am not able to use video/mp4 as mime type because is not supported by the browsers so I am using video/webm instead.

    Well, the file you show in your hex editor is definitely MP4/ISOBMFF, and not WebM/Matroska. Are you saying that's the file you're getting after your FFmpeg process, or the one straight out of MediaRecorder?

    The output file is in chunks and the playback is really smooth yet I am not able to play it online unless it is fully loaded.

    Normally, playback will be fine without seeking... it's seeking that's the problem since the player doesn't know how long/big the elements are as they have indefinite size due to the MediaRecorder output being streamed. Much like you're doing with MP4, you can do the same with WebM:

    ffmpeg -i original.webm -c copy fixed.webm

    How can I generate MOOV for video/webm?

    There is no such thing in WebM/Matroska.