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