Оптимизация видео и холста HTML5

Question

Я делаю приложение с видео HTML5 вместе с холст-рисунком поверх него (640x480 пикселей). Цель состояла в том, чтобы записать рисунок холста вместе с кодированным видео, чтобы создать его как одно видео. Я смог сделать все это с помощью FFMPEG. Но проблема, с которой я столкнулась, заключается в том, что при запуске видео HTML5 требуется около 50% моего процессора. Так как рисование на холсте также требует процессора, браузер замораживается через определенное время, а использование ЦП для этой вкладки на хроме постоянно показывает> 100. Я попытался оптимизировать рендеринг html5. Но ничего не помогло. Есть ли способ запустить это видео с гораздо меньшим потреблением процессора? или любые другие возможности оптимизации?

Answer 1

Существует не так много, если аппаратное обеспечение должно использовать процессор для декодирования и отображения видео. Ключевое слово - компромисс.

Можно сделать несколько вещей, хотя это устраняет дополнительные барьеры. Они должны быть рассмотрены общие советы, хотя:

Эффективное перекручивание

Обязательно используйте requestAnimationFrame(), чтобы вызвать свой цикл в случае, если вы не являетесь.

setTimeout()/setInterval() являются относительно тяжелыми и не могут правильно синхронизироваться с частотой обновления монитора.

Снизить нагрузку обновления

Кроме того, если вы еще не делаете это: холст обычно обновляется при 60 FPS, а видео редко превышает 30/29,97 FPS (в Европе 25 FPS). Это означает, что вы можете пропустить каждое обновление второго кадра и по-прежнему показывать видео с оптимальной скоростью. Для этого используйте переключатель.

Видео с частотой 25 FPS будет синхронизироваться с частотой 30 FPS (обычно мониторы работают на частоте 60 Гц даже для европейских моделей, которые с помощью электронной перестройки синхронизируются внутри, что также означает, что браузеру необходимо иметь дело с кадром/двойным кадром и т. Д. внутренне - мы ничего здесь не можем сделать).

// draw video at 30 FPS 
var toggle = false; 

(function loop() { 
    toggle = !toggle; 
    if (toggle) { /* draw frame here */ } 
    requestAnimationFrame(loop); 
})(); 

Избегайте масштабирования холста элемента

Убедитесь, что размер холста и размер CSS точно такой же. Или просто: не используйте CSS, чтобы установить размер холста.

Отключить альфа-канал композиции

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

// disable alpha-composition of the canvas element where supported 
var context = canvas.getContext("2d", {alpha: false}); 

настройки Tweak на этапе кодирования

Убедитесь, что кодировать видео, используя баланс между размером и декомпрессионной нагрузкой. Чем больше видео сжимается, тем больше нужно реконструировать за счет стоимости. Кодируйте с различными настройками кодировщика, чтобы найти баланс, который работает в вашем сценарии.

Также рассмотрите такие аспекты, как глубина цвета, то есть 16 против 24 бит.

Рекомендуется использовать кодек H264, поскольку он имеет широкую поддержку в различных аппаратных средствах интерфейса дисплея.

Уменьшить видео FPS

Если содержание видео позволяет, п.ех. есть небольшое движение или изменения, кодирование с использованием 15 FPS вместо 30 FPS. Если да, то также использовать MODULO вместо переключателя (как показано выше), где вы можете пропустить 3 кадров и обновление холст только на Кодировать видео 4 .:

// draw video at 15 FPS 
var modToggle = 0; 

(function loop() { 
    if (modToggle++ % 4 === 0) { /* draw frame here */ } 
    requestAnimationFrame(loop); 
})(); 

при меньшем размере источника

закодировать видео с чуть меньшим размером, делящимся на 8 (в этом случае я бы даже предложил половину размера 320x240 - эксперимент!). Затем проведите, используя параметры масштаба метода drawImage():

context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, 640, 480); 

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

Вы также можете отключить интерполяцию с использованием imageSmoothingEnabled, установленного в значение false в контексте (примечание: для свойства требуется префикс в некоторых браузерах). Для этого вы можете не захотеть уменьшить размер до 50%, но только немного (что-то вроде 600x420 в этом случае).

Примечание: даже если вы «уменьшаете» частоту кадров, холст все еще перерисовывается при 60 FPS, но поскольку он не выполняет никакой реальной работы на промежуточных кадрах, он все еще отключает CPU/GPU, что дает вам менее жесткий бюджет исполнения.

Надеюсь, что это дает некоторый вклад.