Ondataavailable не вызывается при попытке записать холст webgl2 с помощью MediaRecorder ⇐ Html

[Anonymous]

Это код, который я использую для записи холста из веб-браузерной игры в видео.

let mediaRecorder; пусть записанные Blobs; const Canvas = document.querySelector('canvas'); константный поток = холст.captureStream(); // кадров в секунду console.log('Начался захват потока из элемента холста: ', поток); функция handleDataAvailable (событие) { console.log(event.data); if (event.data && event.data.size > 0) { записанныеBlobs.push(event.data); } } функция handleStop(событие) { console.log('Рекордер остановлен: ', событие); const superBuffer = новый Blob (recordedBlobs, {type: 'video/webm'}); } функция startRecording() { let options = {mimeType: 'video/webm'}; записанныеБлобы = []; mediaRecorder = новый MediaRecorder (поток, параметры); console.log('Создан MediaRecorder', mediaRecorder); mediaRecorder.onstop = handleStop; mediaRecorder.ondataavailable = handleDataAvailable; mediaRecorder.start(100); console.log('MediaRecorder запущен', mediaRecorder); } функция stopRecording() { mediaRecorder.stop(); console.log('Записанные BLOB-объекты: ', RecordBlobs); } функция загрузки() { const blob = новый Blob (recordedBlobs, {type: 'video/webm'}); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'нет'; а.href = URL-адрес; a.download = 'test.webm'; document.body.appendChild(а); а.клик(); setTimeout(() => { document.body.removeChild(а); окно.URL.revokeObjectURL(url); }, 100); } По какой-то причине ondataavailable не вызывается до тех пор, пока запись не будет остановлена, но даже тогда он возвращает пустой буфер. Я начал устранять эту проблему и пока понял, что проблема не в потоке, поскольку я создал элемент видео и внедрил его на страницу, затем установил для его свойства srcObject значение потока и затем вызвал video.play( ) и все работало правильно, видео воспроизводилось именно то, что было нарисовано на холсте.

Однако, когда я вызываю следующее:

startRecording(); // Подождем некоторое время остановитьЗапись(); // это загружает веб-сайт размера 0 скачать(); Я вижу, что ondataavailable вызывается только после остановки записи и опустошения буфера. Я не могу понять, почему это происходит, учитывая, что это работает для некоторых других игр на холсте, которые я пробовал, но не для этой конкретной. Я пробовал искать ответ, но ничего вразумительного не нашел, возможно дело в кодеках, некоторые упоминают CORS, но я не понимаю, как это связано. Любая помощь будет принята с благодарностью!