Меняется качество MediaRecorder и canvas.captureStream?

Question

Недавно я пытался генерировать видео в браузере и, таким образом, играл с двумя подходами:

• Использование библиотеки wammy js для объединения веб-фреймов в веб-видео. Подробнее здесь.
• С помощью MediaRecorder а также canvas.captureStream, Подробнее здесь.

Поддельный подход работает хорошо, но поддерживается только в Chrome, так как это единственный браузер, который в настоящее время поддерживает кодирование webp (canvas.toDataURL("image/webp")). И поэтому я использую captureStream подход в качестве резервной копии для Firefox (и использование libwebpjs для Safari).

Итак, теперь на мой вопрос: есть ли способ контролировать качество видео потока холста? А если нет, то рассматривало ли что-то подобное браузеры / w3c?

Вот скриншот одного из кадров видео, сгенерированного сглазом:

И вот тот же кадр, сгенерированный MediaRecorder/canvas.captureStream подход:

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

Я пытался увеличить частоту кадров, передаваемых в captureStream метод (думая, что могут происходить какие-то странные вещи интерполяции кадров), но это не помогает. Это на самом деле ухудшает качество, если я делаю это слишком высоким. Моя текущая теория заключается в том, что браузер выбирает качество потока в зависимости от того, к какой вычислительной мощности он имеет доступ. Это имеет смысл, потому что, если он будет идти в ногу с указанной частотой кадров, то что-то должно дать.

Поэтому следующая мысль заключается в том, что я должен замедлить скорость, с которой я заполняю холст изображениями, а затем пропорционально понизить значение FPS, которое я передаю в captureStreamНо проблема в том, что, хотя я, вероятно, решил бы проблему качества, я бы в итоге получил видео, которое работает медленнее, чем предполагалось.

Изменить: Вот примерный набросок кода, который я использую, на случай, если он поможет кому-либо в подобной ситуации.

Answer 1

Это артефакты сжатия, и пока вы ничего не можете сделать...

Видеокодеки построены главным образом с идеей показа реальных цветов и форм, немного похоже на JPEG с действительно низким качеством. Они также сделают все возможное, чтобы сохранить как можно меньше информации между ключевыми кадрами (некоторые используют алгоритм обнаружения движения), так что им нужно меньше данных для хранения.

Эти кодеки обычно имеют некоторые настраиваемые параметры, которые позволят нам улучшить постоянное качество кодирования, но спецификации MediaRecorder, будучи независимыми от кодеков, не предоставили (пока) опции в API для нас, веб-разработчиков, для установки любых других вариант, чем фиксированный битрейт (который не поможет нам больше здесь).

Есть это предложение, которое требует такой возможности, хотя.

Answer 2

Я видел какое-то нелепое поведение процессора и графического процессора при запуске медиа-рекордера, например, использовало так много ресурсов, но выдавало чрезвычайно низкое качество и нестабильное веб-видео. Я использую три js и пытаюсь создать библиотеку анимации, такую ​​как Manim, в javascript. Из-за проблем с низким качеством я наконец решил удалить эти методы записи мультимедиа. В настоящее время я использую метод, похожий на manim. Теперь у меня есть экспорт 4K с высококачественной плавной анимацией от процессора Intel Pentium G2010 (компьютер низкого уровня, даже премьер-профессионал будет аварийно завершать работу при загрузке. Экспорт еще далеко)