Record HTML5 moderate-quality download video for playback in Safari

Question

I am creating a mobile web application where it should be possible to upload a video. 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 built-in application for mobile cameras, leaving us no quality control, which again leads to potentially very large files (especially on Android).

, . iOS/Safari , , iPhone . 1, iOS.

:

, :

• , .

2 , .webm, Safari .

, - , - .webm .mp4 . .

?

Answer 1

H.264 webm. Chrome.

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

media_recorder = new MediaRecorder(stream, options);

- .

H.264/webm H.264/mp4 ffmepg (-vcodec copy).

webm mp4 JavaScript ffmpeg.js.