В чатике всплыл очередной вопрос про эффект ambilight.
Если кто не помнит, фоновая интерактивная подсветка ambilight — от Ambient Light — пришла к нам от телевизоров Филипс, а нынче есть даже на YouTube.
Мы уже рассматривали пару вариантов создания такого эффекта, но не для видео.
А для видео же — есть прекрасная статья на Smashing Magazine: https://www.smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/
Описывается создание нужного эффекта на основе canvas, со всеми пояснениями и кодом. Даже хук для React по пути сделали.
Вообще, до меня не сразу дошло, почему именно холст. Почему бы просто не запустить два видео и одно размыть?
Но, на самом деле, выходит так, что на холст можно отправлять далеко не все кадры, можно по пути накладывать дополнительные эффекты, не нужно заботиться о синхронизации двух видео. Ну и
requestAnimationFrame позволяет здорово снизить нагрузку на клиента. #ambilight #video #canvas