Записывайте видео самого высокого качества с помощью MediaRecorder API в HTML5

Используя MediaRecorder API, я смог закодировать страницу, захватывает видео с веб-камеры / мобильной камеры и сохраняет видео на локальном диске. Фрагмент кода выглядит следующим образом:

let mediaRecorder;
let recordedBlobs;

window.addEventListener('load', async () => {
    const constraints = {
        audio: true,
        video: true
    };

    await init(constraints);
});

async function init(constraints) {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
}

function handleSuccess(stream) {
    window.stream = stream;

    const camVideo = document.querySelector('video#vidCamera');
    camVideo.srcObject = stream;
}

function startRecording(mime) {
    recordedBlobs = [];
    let options = { mimeType: 'video/webm;codecs=vp9,opus'};

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

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

Это хорошо работает, и я загружаю файл после того, как видео записано, и он отлично воспроизводится. У меня вопрос по качеству видео:

Игнорируя любые ограничения системных / мобильных ресурсов, я хочу настроить свойства MediaRecoder для создания видео (записи) с максимально возможным качеством. Я понимаю, что это решается путем передачи соответствующих параметров, которые в моем случае равны { mimeType: 'video/webm;codecs=vp9,opus'}. Я пробовал разные и записал на каждый по 10 секунд (см. Размеры):

options = { mimeType: 'video/webm;codecs=avc1,opus'};   //904KB
options = { mimeType: 'video/webm;codecs=h264,opus' };  //923KB
options = { mimeType: 'video/webm;codecs=vp9,opus' };   //1951KB
options = { mimeType: 'video/x-matroska;codecs=avc1' }; //917KB
options = { mimeType: 'video/webm;codecs=vp8,opus' };   //2687KB
options = { mimeType: 'video/webm;codecs=avc1' };       //917KB
options = { mimeType: 'video/webm;codecs=h264' };       //919KB
options = { mimeType: 'video/webm' };                   //906KB
options = { mimeType: '' };                             //896KB

Все вышеперечисленные видео имеют рамку высота x ширина 480 x 640. Обратите внимание, я нигде не задавал эти размеры в коде.

Я вижу максимальный размер вырабатывается vp8, opus.

  1. Значит ли это, что видео высочайшего качества получается при сочетании vp8 и opus?
  2. Если это не так, какая комбинация видео / аудиокодеков даст наивысшее качество?
  3. А как насчет габаритов, разве они не должны быть больше? Или это зависит от устройства / машины, которые я использую?

Я проверил Рекомендации по высококачественной видеопрезентации здесь, но не приводится пример комбинации опций. Я уже пробовал avc1, опус выше, и он произвел только видео 904 КБ.

Цель состоит в том, чтобы выбрать комбинацию видео / аудиокодеков для создания видео самого высокого качества, при котором, как я предполагаю, он будет иметь максимальный размер среди всех видео.

РЕДАКТИРОВАТЬ:

В итоге я выбрал vp8, opus со следующими ограничениями.

Параметры:

let options = { mimeType: 'video/webm;codecs=vp8,opus' };

Ограничения:

const constraints = {
    audio: true,
    video: {
        height: { min: 720, max: 1280 },
        width: { min: 1080, max: 1920 },
        frameRate: { min: 15, ideal: 24, max: 30 },
        facingMode: "user"
    }
}

В результате получилось видео высокого качества, которым я остался доволен. Также обратите внимание на тип (mp4), используемый в коде, где записанные фрагменты превращаются в blob.

Blob:

const blob = new Blob(recordedBlobs, { type: 'video/mp4' });

webrtc mime-types html5-video mediarecorder-api
person Abdullah    schedule 19.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я предполагаю, что 480x640 - это размеры вашей веб-камеры. Но чтобы убедиться, что вы получаете видео самого большого размера, установите идеальное ограничение для ширины и высоты (ссылка на MDN):

const constraints = { audio: true,      video:{
    width: { ideal: <aBigNumber> },
    height: { ideal: <aBigNumber> },      frameRate: {ideal: <framerate>}
}};

На ваш вопрос о том, какое из них самое высокое, размер здесь не лучший вариант. Каждый формат кодирует и сжимает видео по-разному - точно так же, как у вас может быть JPG или PNG с одинаковым качеством, но с разными алгоритмами сжатия.

person Doug Sillars    schedule 19.05.2020
comment
Спасибо. Да, размеры принадлежали моей веб-камере, потому что, когда я запускал страницу на своем мобильном телефоне, размеры созданного видео были другими. Что вы предлагаете установить как кодеки? И frameRate, 24, я думаю, идеален? - person Abdullah; 19.05.2020
comment
вы можете оставить частоту кадров без значения и просто оставить значение по умолчанию. Если вас беспокоит сеть - немного уменьшите число :) Кодек - где вы хотите, чтобы он воспроизводился? h264 воспроизводится во всех браузерах, а vp8 и vp9 не работают в браузерах Safari или iPhone / iPad. - person Doug Sillars; 23.05.2020
comment
Я намеревался воспроизвести видео на своем рабочем столе (после загрузки). В итоге я использовал vp8, opus и обновил свой вопрос другими деталями. Спасибо. - person Abdullah; 25.05.2020