#webcodecs — Public Fediverse posts

Кадры вместо видео: как индустрия обходит вес scroll‑scrub анимаций

Продуктовые сайты любят анимацию «крутишь колесо мыши — объект меняется на глазах». Первый инстинкт: сделать это видео с currentTime . Вот почему это почти всегда неправильный первый инстинкт, и что вместо этого используют на практике.

https://habr.com/ru/articles/1069560/

#scrollscrub_анимация #canvas #image_sequence #video_currentTime #WebCodecs #CSS_scrolltimeline #оптимизация_анимации #покадровая_анимация #производительность_фронтенда #альфабленд

FFmpeg в браузере: как мы сделали медиа-конвертер, который ни разу не обращается к серверу

Конвертация медиа. Люди решают эту задачу десятки раз в неделю. Видео с дрона нужно перевести в MP4 для мессенджера, HEIC с айфона в JPEG для сайта, аудиозапись интервью обрезать и сжать. Обычно это выглядит так: человек открывает один из сотен онлайн-конвертеров, загружает туда полугигабайтный файл, ждёт, пока он доползёт до сервера, потом ждёт очереди, потом скачивает обратно. Параллельно его файлы лежат на чужом сервере, о чём мало кто задумывается (а зря, если речь про корпоративный договор или личное видео). Мы решили проверить, можно ли полностью убрать из этой схемы сервер. Чтобы конвертация происходила целиком в браузере, на устройстве пользователя. Без загрузок, без очередей, без серверных затрат. Так появился BrowsersKit : набор инструментов (медиа-конвертер, PDF, математика, Python-песочница), работающих на клиенте. Дальше расскажу, как это устроено внутри, какие грабли нас поджидали и как мы с ними справились.

https://habr.com/ru/articles/1060950/

#ffmpeg #webassembly #wasm #webcodecs #javascript #browserskit #оптимизация

Как я сделал расширение, которое показывает десктоп и мобильную версию сайта одновременно

Когда верстаешь адаптив, постоянно скачешь между десктопом и мобильной версией: то DevTools в режиме устройства, то ресайз окна, то открыть на телефоне. Десктоп и мобайл при этом никогда не видны одновременно — один прячется, когда смотришь на другой. Готовые мобильные симуляторы это не закрывали: они хорошо делают своё дело, но не дают посмотреть адаптив прямо на вкладке, поверх десктопа. Я сделал свой инструмент — и в статье разбираю, как это устроено технически. Читать разбор

https://habr.com/ru/articles/1047354/

#адаптивная_вёрстка #расширение_Chrome #responsive #мобильная_вёрстка #Manifest_V3 #WebCodecs #declarativeNetRequest #Shadow_DOM #дизайн_сайтов #запись_экрана

Прямая трансляция во Flutter через WebCodecs: как пришлось написать свой декодер

Когда live-видео приходит как сырой H.264 поток через WebSocket, стандартные Flutter-плееры перестают работать. В этой статье я разбираю, почему готовые решения не подошли и как я пришёл к необходимости реализации собственного декодера на C++ с использованием FFmpeg.

https://habr.com/ru/articles/1010458/

#WebCodecs #Flutter #FFmpeg #h264 #ffi

Producing the sort of visual effects that Noel's House Party would have died for with @benjaminbenben and #Webcodecs #radical #FrontEndSheff