HTML5 record moderate video quality for upload to be playable by Safari

Question

I am creating a web-based mobile app where it should be possible to upload video-recordings. There are two ways to achieve this:

Use input:

<input type="file" name="video" accept="video/*" capture></input>

Use RTC MediaRecorder:

var recordedBlobs = [];
function handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}

var options = {
    mimeType: 'video/webm',
    audioBitsPerSecond : 128000,
    videoBitsPerSecond : 2500000
}

mediaRecorder = new MediaRecorder(window.stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10);

While the first option always works the main problem is that it uses the build-in mobile camera application leaving us no control over quality, which again leads to potentially very large files (especially on android)

Second version gives us full control over quality and lets os create moderate file sizes that are size-wise acceptable as content in the application. iOS/Safari does not support this feature yet, but this is ok since iPhones record small files by default when started from the browser. So I can activate option 1 when the user-agent is iOS.

Now the problems:

First option would be fine if I could:

1. Control the video recording quality of the mobile application
2. Post-elaborate the recording to change the resolution before upload

The problem with option 2 is that only the .webm container type is supported, and Safari does not support this type.

So I'm a little stuck - right now it seems like my only option is to post-convert the incoming .webm files to .mp4 on the server as they are uploaded. But it seems to be a very CPU costly process on the server.

Any good ideas?

Answer 1

You can record as H.264 into a webm container. This is supported by Chrome.

var options = {mimeType: 'video/webm;codecs=h264'};

media_recorder = new MediaRecorder(stream, options);

Although it is an usual combination of video format and container - it is valid.

Now you could change H.264/webm into H.264/mp4 without transcoding the video stream using ffmepg (-vcodec copy).

You could also try re-wrapping from webm to mp4 client side in JavaScript using ffmpeg.js.