react 前端短视频渲染引擎

1：视频渲染脚步
import { registerRoot, Composition, getInputProps } from ‘remotion’
import { observer, useLocalStore } from ‘mobx-react’
import { useMount } from ‘ahooks’
import isEmpty from ‘lodash/isEmpty’

import Store from ‘./store’
import { globalContext } from ‘./constant’
import { Frames } from ‘./components’
import type { Config } from ‘./types’
import ‘./index.css’

const demoConfig: Config = {
duration: 6,
width: 720,
height: 1280,
fps: 60,
id: ‘fancy’,
kind: ‘X’,
tag: ‘body’,
description: ‘好多个视频一起展示’,
fill_color: ‘#b6253a’,
elements: [
{
type: ‘composition’,
height: ‘16%’,
repeat: true,
time: 0,
duration: 1.5,
animations: [
{
type: ‘slide’,
direction: 180,
fade: false,
},
{
type: ‘fade’,
reverse: true,
duration: 1.5,
},
],
elements: [
{
type: ‘text’,
text: ‘2019 best of beauty’,
text_transform: ‘uppercase’,
text_wrap: false,
font_italic: true,
height: ‘50%’,
stroke_color: ‘#000’,
stroke_width: ‘2px’,
fill_color: ‘transparent’,
y: ‘0%’,
y_anchor: ‘0%’,
width: ‘100%’,
},
],
},
{
type: ‘composition’,
width: ‘95%’,
height: ‘90%’,
fill_color: ‘#fff’,
time: 2.5,
animations: [
{
type: ‘scale’,
duration: 0.5,
fade: false,
},
],
},
{
type: ‘composition’,
y: ‘58%’,
height: ‘16%’,
repeat: true,
duration: 1.5,
animations: [
{
type: ‘slide’,
direction: 0,
fade: false,
},
{
type: ‘fade’,
reverse: true,
duration: 1.5,
},
],
elements: [
{
type: ‘text’,
text: ‘2019 best of beauty’,
text_transform: ‘uppercase’,
text_wrap: false,
font_italic: true,
height: ‘50%’,
stroke_color: ‘#000’,
stroke_width: ‘2px’,
fill_color: ‘transparent’,
y: ‘0%’,
y_anchor: ‘0%’,
width: ‘100%’,
},
],
},
{
type: ‘composition’,
animations: [
{
type: ‘slide’,
direction: 0,
duration: 0.5,
fade: false,
},
],
elements: [
{
type: ‘composition’,
fill_color: ‘#000’,
height: ‘22%’,
x_anchor: ‘100%’,
width: [
{
value: ‘600px’,
time: 0,
},
{
value: ‘0px’,
time: 0.8,
easing: ‘cubic-in’,
},
],
},
{
type: ‘image’,
src: ‘https://qnm.hunliji.com/FqIXfkBfDD76OSZzcJ3uCp8V2674’,
height: ‘25%’,
drop_shadow_color: ‘#000’,
drop_shadow_x: [
{
value: ‘-600px’,
time: 0,
},
{
value: ‘0px’,
time: 0.8,
easing: ‘cubic-in’,
},
],
},
],
},
{
type: ‘text’,
text: ‘Body&Hair’,
fill_color: ‘#fff’,
text_transform: ‘uppercase’,
background_color: ‘#000’,
y: ‘13%’,
height: ‘5%’,
time: 2,
animations: [
{
type: ‘text-slide’,
direction: ‘down’,
duration: 0.5,
split: ‘line’,
},
],
},
{
type: ‘text’,
text: ‘conditioning shampoo’,
font_italic: true,
text_transform: ‘uppercase’,
fill_color: ‘#000’,
width: ‘91%’,
text_wrap: false,
time: 2,
animations: [
{
type: ‘text-appear’,
duration: 0.5,
split: ‘line’,
},
],
height: ‘6%’,
y: ‘18%’,
},
{
type: ‘composition’,
time: 2.5,
elements: [
{
type: ‘text’,
text: ‘莆田生产’,
font_weight: ‘600’,
height: ‘5%’,
time: 0.5,
animations: [
{
type: ‘slide’,
direction: 180,
duration: 0.4,
},
],
x_anchor: ‘50%’,
x_alignment: ‘0%’,
x: ‘92%’,
y: ‘69%’,
},
{
type: ‘text’,
text: ‘简约大气上档次’,
time: 0.9,
height: ‘5%’,
animations: [
{
type: ‘slide’,
direction: 180,
duration: 0.4,
},
],
x_alignment: ‘0%’,
x: ‘92%’,
y: ‘74%’,
},
{
type: ‘text’,
text: ‘缺点就是出汗多，介意者勿拍’,
time: 1.3,
height: ‘4%’,
animations: [
{
type: ‘slide’,
direction: 180,
duration: 0.4,
},
],
x: ‘92%’,
x_alignment: ‘0%’,
y: ‘78%’,
},
],
},
{
type: ‘composition’,
width: ‘30%’,
height: ‘30%’,
x: ‘77%’,
y: ‘37%’,
time: 3.4,
z_rotation: [
{
time: 0.3,
value: ‘0deg’,
},
{
time: 0.6,
value: ‘10deg’,
},
],
},
],
}

function RemotionRoot() {
const store = useLocalStore(() => new Store())
const { config, setConfig } = store

useMount(() => {
    const inputProps = getInputProps()
    if (!isEmpty(inputProps)) {
        setConfig(inputProps)
        return
    }
    setConfig(demoConfig)
})

return (
    <globalContext.Provider
        value={{
            store,
        }}
    >
        {config && (
            <Composition
                durationInFrames={config.duration * config.fps}
                width={config.width}
                height={config.height}
                fps={config.fps}
                id={config.id}
                component={Frames}
            />
        )}
    </globalContext.Provider>
)

}

2：渲染结果

特效视频