Я недавно пытался генерировать видео в браузере, и поэтому играл с двумя подходами:
Поддельный подход работает хорошо, но поддерживается только в Chrome, поскольку это единственный браузер, который в настоящее время поддерживает кодирование webp (canvas.toDataURL("image/webp")). И поэтому я использую captureStream подход в качестве резервной копии для Firefox (и использую libwebpjs для Safari).
Итак, теперь перейдем к моему вопросу: есть ли способ контролировать качество видео потока холста? А если нет, то рассматривало ли что-то подобное браузеры / w3c?
Вот скриншот одного из кадров видео, сгенерированного whammy:
А вот тот же кадр, сгенерированный подходом MediaRecorder/canvas.captureStream:
Моя первая мысль - искусственно увеличить разрешение передаваемого мною холста, но я не хочу, чтобы выходное видео было больше.
Я пытался увеличить частоту кадров, передаваемую методу captureStream (полагая, что может происходить какая-то странная интерполяция кадров), но это не помогает. Это на самом деле ухудшает качество, если я делаю это слишком высоким. Моя текущая теория заключается в том, что браузер выбирает качество потока в зависимости от того, к какой вычислительной мощности он имеет доступ. Это имеет смысл, потому что если он будет соответствовать указанной выше частоте кадров, то что-то должно дать.
Итак, следующая мысль заключается в том, что я должен замедлить скорость, с которой я заполняю холст изображениями, а затем пропорционально снизить значение FPS, которое я передаю в captureStream, но проблема в том, что, хотя Скорее всего, я бы решил проблему с качеством, и в итоге получил бы видео, которое работает медленнее, чем предполагалось.
Редактировать: Вот грубый набросок кода, который я использую, на случай, если он поможет кому-либо в подобной ситуации.