Как редактировать .webm Blobs, захваченные Chrome MediaRecorder

Question

В Chrome. Я использую MediaRecorder и canvas.captureStream() для создания webm-файла холста.

let recorder = new MediaRecorder(document.querySelector('canvas').captureStream(), {mimeType: 'video/webm'}); 
let chunks = []; 
let blob; 

recorder.ondataavailable = function(event) { 
    if (event.data.size > 0) { 
    chunks.push(event.data); 
    } 
}; 
recorder.onstop = function() { 
    blob = new Blob(chunks, {type: 'video/webm'}); 
    let url = URL.createObjectURL(blob); 
    let a = document.createElement('a'); 
    document.body.appendChild(a); 
    a.href = url; 
    a.download = Date.now()+'.webm'; 
    a.click(); 
    window.URL.revokeObjectURL(url); 
    a.parentNode.removeChild(a); 
} 
recorder.onstart = function() { 
    chunks = []; 
} 

Это основная запись и загрузка кода вместе с вызовом recorder.start(), чтобы начать запись и recorder.stop() до конца.

Выходной файл webm в порядке, проблема, с которой я сталкиваюсь, состоит в том, что из-за дерьмового компьютера/накладных расходов я не всегда могу сделать холст достаточно быстрым, чтобы сделать его полным 60 кадров в секунду. На самом холсте я не возражаю против более низкой частоты кадров, но отставание при рисовании на холсте переходит в веб-интерфейс, и у меня остается видео с частотой x0.9.

Я попытался исправить это, используя canvas.captureStream(0), чтобы фиксировать только один кадр за раз и сопоставлять это с каждым рендерингом холста. Но это терпит неудачу, потому что я не могу указать продолжительность, в которой должен длиться каждый кадр, и размер файла становится огромным, поскольку каждый отдельный фрейм имеет всю информацию заголовка.

В моем блоке blob видно, что первые 131 капли постоянны, а blob 132 имеет очень большой объем данных. После этого обычно имеется ~ 7 спейсерных блоков с 1 байтом каждый, а затем один блок, содержащий некоторое большее количество данных. Я знаю, что первые 132 капли - это информация заголовка + мой первый кадр. И я думаю, что капли с большим количеством данных - это каждый кадр. Я также предполагаю, что 1-байтовые спейсерные капли имеют какое-то отношение к длительности кадра или паузе в течение установленного промежутка времени.

Что я хотел бы сделать, так это иметь возможность изменять эти пробелы spacer, чтобы указать точную продолжительность кадра. Я попытался сделать это вручную, скопировав 7 спейсеров между 2 кадрами, где я знал, что частота кадров идеальна, а затем удаляет все остальные разделители и вставляет в эти идеальные спейсерные капли между каждым фреймом, но выходной файл не воспроизводится.

Я не понимаю данные о блобе? Есть ли способ вручную указать продолжительность, в которой длится кадр, изменяя данные о блобе, или я придерживаюсь любой частоты кадров, которую я могу нарисовать на холсте?

Answer 1

я был в состоянии определить, частота кадров отдельно от частоты обновления холста путем приостановки и возобновления рекордер тайм-аут, и запрашивает кадр перед паузой снова:

let recorder = new MediaRecorder(canvas.captureStream(), {mimeType: 'video/webm'}); 
recorder.start(); 
recorder.pause(); 

function draw() { 
    context.drawImage(...); 
    recorder.resume(); 
    setTimeout(function() { 
    recorder.requestData(); 
    recorder.pause(); 

    //update progress bars or any laggy overhead stuff at this point 

    requestAnimationFrame(draw); 
    }, 1000/fps); 
} 
requestAnimationFrame(draw); 

Таким образом, любое отставание фактического холста рисование или обновление индикаторов выполнения и т. д. не повлияет на сбор кадров в рекордере. recorder.requestData(), по-видимому, не является необходимым, но также, похоже, не имеет недостатков. Он включен здесь для ясности.

Я не проверял подробно, но в начале может быть двойной кадр в зависимости от того, собирает ли или нет recorder.start() исходный кадр, и ваш холст не пуст.