RVE Renderer

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

설치

1npm install remotion-renderer-main

사용법

기본 사용법

1import React from 'react';
2import { Composition } from 'remotion';
3import { Main } from 'remotion-renderer-main';
4
5// RVE Renderer 컴포넌트를 사용한 구성 정의
6export const RemotionVideo = () => {
7  return (
8    <Composition
9      id="MyVideo"
10      component={Main}
11      durationInFrames={300}
12      fps={30}
13      width={1920}
14      height={1080}
15      defaultProps={{
16        overlays: [
17          // 여기에 오버레이 정의
18        ],
19        setSelectedOverlayId: () => {},
20        selectedOverlayId: null,
21        changeOverlay: () => {},
22        durationInFrames: 300,
23        fps: 30,
24        width: 1920,
25        height: 1080,
26      }}
27    />
28  );
29};

오버레이 예제

1const overlays = [
2  {
3    id: 1,
4    from: 0,
5    durationInFrames: 150,
6    left: 50,
7    top: 50,
8    width: 400,
9    height: 300,
10    type: 'text',
11    content: { text: '안녕하세요!' },
12  },
13  {
14    id: 2,
15    from: 30,
16    durationInFrames: 120,
17    left: 500,
18    top: 200,
19    width: 600,
20    height: 400,
21    type: 'image',
22    content: { src: 'https://example.com/image.jpg' },
23  },
24];

컴포넌트

Main

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

Props

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

라이선스

ISC