React для создания видео
Remotion – инструмент для создания видео на React. Зачем нужно создавать видео, используя React?
- Используйте веб-технологии: CSS, WebGL, Canvas и т.д.
- Используйте программирование: переменные, функции, API и различные алгоритмы.
- Используйте React: переиспользование компонентов, композиция.
Remotion – это как After Effects, но для программистов. Если в After Effects потребуется переиспользовать какой-то элемент в нескольких местах, то придется копировать его в ручную. В Remotion используется React, где хорошо работает композиция и можно легко переиспользовать любой элемент.
Один из плюсов данного инструмента в том, что можно создавать видео на лету, кастомизируя его содержимое. Например, используя данные из API создавать индивидуальное видео для каждого пользователя.
Основная идея Remotion в том, что компонент получает текущий фрейм видео. Компонент что-то рендерит, Remotion это записывает и создаёт видео. Для создания скриншота рендера фрейма используется Puppeteer, запускаемый в параллельном режиме. Для склейки скриншотов и создания видео используется FFMPeg.
import {interpolate, useCurrentFrame} from 'remotion'
const Title: React.FC<{title: string}> = ({title}) => {
const frame = useCurrentFrame()
const opacity = interpolate(frame, [0, 20], [0, 1], {extrapolateRight: 'clamp'})
return (
<div style={{opacity}}>{title}</div>
)
}
export const MyVideo = () => {
return (
<div style={{ textAlign: "center" }}>
<Title title="Hello World" />
</div>
);
};
https://www.remotion.dev/
Интервью с мейнтенером www.learnwithjason.dev/make-vi…ith-code
