RVE Renderer

RVE(Remotion Video Editor) Renderer는 Remotion을 사용하여 비디오 편집을 위한 컴포넌트 라이브러리입니다.

설치

npm install remotion-renderer-main

사용법

기본 사용법

import React from 'react';
import { Composition } from 'remotion';
import { Main } from 'remotion-renderer-main';

// RVE Renderer 컴포넌트를 사용한 구성 정의
export const RemotionVideo = () => {
  return (
    <Composition
      id="MyVideo"
      component={Main}
      durationInFrames={300}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        overlays: [
          // 여기에 오버레이 정의
        ],
        setSelectedOverlayId: () => {},
        selectedOverlayId: null,
        changeOverlay: () => {},
        durationInFrames: 300,
        fps: 30,
        width: 1920,
        height: 1080,
      }}
    />
  );
};

오버레이 예제

const overlays = [
  {
    id: 1,
    from: 0,
    durationInFrames: 150,
    left: 50,
    top: 50,
    width: 400,
    height: 300,
    type: 'text',
    content: { text: '안녕하세요!' },
  },
  {
    id: 2,
    from: 30,
    durationInFrames: 120,
    left: 500,
    top: 200,
    width: 600,
    height: 400,
    type: 'image',
    content: { src: 'https://example.com/image.jpg' },
  },
];

컴포넌트

Main

비디오 편집을 위한 메인 컴포넌트입니다.

Props

• overlays: 렌더링할 오버레이 객체 배열
• setSelectedOverlayId: 현재 선택된 오버레이 ID를 설정하는 함수
• selectedOverlayId: 현재 선택된 오버레이 ID
• changeOverlay: 오버레이를 업데이트하는 함수
• durationInFrames: 구성의 프레임 지속 시간
• fps: 구성의 초당 프레임 수
• width: 구성의 너비
• height: 구성의 높이

라이선스

ISC