Skip to main content

在 Angular 中使用 Remotion

🌐 Using Remotion in Angular

本指南解释了如何将 Remotion 集成到 Angular 项目中。

🌐 This guide explains how to integrate Remotion into an Angular project.

安装所需的软件包​

🌐 Install required packages

安装 Remotion 及必要的依赖：

🌐 Install Remotion and necessary dependencies:

Use npm as the package manager
npm i remotion @remotion/player @remotion/cli @remotion/zod-types react react-dom zod
npm i --save-dev @types/react @types/react-dom

创建一个 Remotion 文件夹​

🌐 Create a Remotion folder

为了更好的区分，请创建一个文件夹来存放你的 Remotion 文件：

🌐 For better separation, create a folder to hold your Remotion files:

src/app/remotion

将你的 Remotion 项目或一个入门模板（例如，HelloWorld）的内容复制到这个新文件夹中。这将有助于将 Remotion 相关文件与其余的 Angular 代码库分开。

🌐 Copy the contents of your Remotion project or a starter template (e.g., HelloWorld) into this new folder. This will help separate Remotion related files from the rest of your Angular codebase.

复制 remotion.config.ts​

🌐 Copy remotion.config.ts

将 remotion.config.ts 文件复制到你的 Angular 项目的根目录，放置在与 package.json 相同的层级。

🌐 Copy the remotion.config.ts file to the root directory of your Angular project, placing it at the same level as package.json.

此配置文件对于 Remotion 识别并编译你的项目设置是必要的。

🌐 This configuration file is necessary for Remotion to recognize and compile your project settings.

为 JSX 配置 TypeScript​

🌐 Configure TypeScript for JSX

要在 Angular 中启用 JSX 支持，请通过在 compilerOptions 下设置 "jsx": "react" 来更新 tsconfig.json 文件。此配置允许 Angular 解析 Remotion 的 React 组件中使用的 JSX 语法。

🌐 To enable JSX support in Angular, update the tsconfig.json file by setting "jsx": "react" under compilerOptions. This configuration allows Angular to interpret JSX syntax used in Remotion's React components.

tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "skipLibCheck": true // Recommended to avoid errors with certain libraries
    // other options
  }
}
note

"skipLibCheck": true 设置也建议启用，以防止某些库类型的兼容性问题。

为 Angular 创建一个 React 封装组件​

🌐 Create a React wrapper component for Angular

要在 Angular 中嵌入 Remotion 组件，请创建一个 封装组件：

🌐 To embed Remotion components in Angular, create a wrapper component:

  1. 在你的 remotion 文件夹中，创建一个名为 PlayerViewWrapper.tsx 的文件。
  2. 确保每个 .tsx 文件在文件顶部显式导入 React：
PlayerViewWrapper.tsx
import {
  AfterViewInit,
  Component,
  effect,
  ElementRef,
  EventEmitter,
  Input,
  OnDestroy,
  Output,
  signal,
  Signal,
  ViewChild,
  WritableSignal,
} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterOutlet} from '@angular/router';
import React from 'react';
import {createRoot, Root} from 'react-dom/client';
import {PlayerRef} from '@remotion/player';
import {myCompSchema, PlayerView} from './PlayerView';
import {z} from 'zod';

const rootDomID: string = 'reactCounterWrapperId';

@Component({
  selector: 'app-player-view',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  template: ` <div id="${rootDomID}" #${rootDomID}></div>`,
})
export class PlayerViewWrapper implements AfterViewInit, OnDestroy {
  @ViewChild(rootDomID, {static: false}) containerRef: ElementRef | undefined;
  @Input({required: true}) data: Signal<z.infer<typeof myCompSchema>> = signal({
    titleText: 'Welcome to Remotion',
    titleColor: '#000000',
    logoColor1: '#91EAE4',
    logoColor2: '#86A8E7',
  });
  @Output() onPaused = new EventEmitter<void>();
  playerRef: WritableSignal<PlayerRef | undefined> = signal(undefined);

  private root?: Root;

  constructor() {
    effect(() => {
      this.render();
    });
  }

  ngAfterViewInit() {
    this.root = createRoot(this.getRootDomNode());
    this.render();
    this.playerRef()?.play();
  }

  ngOnDestroy(): void {
    this.root?.unmount();
  }

  private getRootDomNode() {
    if (!this.containerRef || !this.containerRef.nativeElement) {
      throw new Error('Cannot get root element. This should not happen.');
    }
    return this.containerRef.nativeElement;
  }

  protected render() {
    if (!this.containerRef || !this.containerRef.nativeElement) {
      return;
    }

    this.root?.render(
      <PlayerView
        playerRefInstance={this.playerRef}
        data={this.data()}
        onPaused={() => this.onPaused.emit()}
      />,
    );
  }
}

这个封装组件将作为 Angular 和 Remotion 的 React 组件之间的桥梁。

🌐 This wrapper component will serve as the bridge between Angular and Remotion’s React components.

你也可以传递一个 EventEmitter 而不是 Signal。

🌐 You can also pass an EventEmitter instead of a Signal.

为 Remotion 播放器创建一个封装器​

🌐 Create a wrapper for the Remotion player

  1. 在你的 remotion 文件夹中，创建一个名为 PlayerView.tsx 的文件。
  2. 确保每个 .tsx 文件在文件顶部显式导入 React：

这将获取对 createRef 播放器 的引用。

🌐 This will get the reference to the player with createRef.

PlayerView.tsx
import React, {useEffect} from 'react';
import {Player, PlayerRef} from '@remotion/player';
import {z} from 'zod';
import {HelloWorld} from './HelloWorld';
import {zColor} from '@remotion/zod-types';
import {WritableSignal} from '@angular/core';

export const PlayerView: React.FC<{
  data: z.infer<typeof myCompSchema>;
  playerRefInstance: WritableSignal<PlayerRef | undefined>;
  onPaused?: () => void;
}> = ({data, playerRefInstance, onPaused}) => {
  const playerRef: React.RefObject<PlayerRef> = React.createRef();

  useEffect(() => {
    if (playerRef.current) {
      playerRefInstance.set(playerRef.current);

      // add callback when player pauses
      playerRef.current.addEventListener('pause', () => {
        onPaused?.();
      });
    }
  }, []);

  return (
    <Player
      ref={playerRef}
      component={HelloWorld}
      durationInFrames={150}
      fps={30}
      compositionHeight={1080}
      compositionWidth={1920}
      inputProps={data}
      controls
    />
  );
};

在 Angular 中使用组件​

🌐 Use the component in Angular

要在 Angular 模板中显示 Remotion 播放器，请在你希望播放器出现的任何位置添加新的封装组件：

🌐 To display the Remotion player within an Angular template, add your new wrapper component wherever you'd like the player to appear:

<app-player-view [data]="data" (onPaused)="playerPaused()"></app-player-view>

这个 Angular 组件标签将渲染 Remotion 播放器，允许你通过 Angular 的数据绑定根据需要传递数据或配置。

🌐 This Angular component tag will render the Remotion Player, allowing you to pass data or configuration as needed through Angular's data binding.

你现在可以通过 this.playerRef() 使用播放器的 API。

🌐 You're now able to use the API of the player via this.playerRef().

另请参阅​

🌐 See also

CONTRIBUTORS
Last updated on