Class FFmpegExporterClient

packages/core/src/exporter/FFmpegExporter.ts:45–191

 * initialized by invoking `start`.
 */
export class FFmpegExporterClient implements Exporter {
  public static readonly id = '@revideo/core/ffmpeg';
  public static readonly displayName = 'Video (FFmpeg)';

  private readonly settings: RendererSettings;
  private readonly exporterOptions: FfmpegExporterOptions;

  public static async create(_: Project, settings: RendererSettings) {
    return new FFmpegExporterClient(settings);
  }

  private static readonly response = new EventDispatcher<ServerResponse>();

  static {
    if (import.meta.hot) {
      import.meta.hot.on(
        `revideo:ffmpeg-exporter-ack`,
        (response: ServerResponse) => this.response.dispatch(response),
      );
    }
  }

  public constructor(settings: RendererSettings) {
    if (settings.exporter.name !== FFmpegExporterClient.id) {
      throw new Error('Invalid exporter');
    }
    this.settings = settings;
    this.exporterOptions = settings.exporter.options;
  }

  public async start(): Promise<void> {
    await this.invoke('start', this.settings);
  }

  public async handleFrame(canvas: HTMLCanvasElement): Promise<void> {
    const blob = await new Promise<Blob | null>(resolve =>
      canvas.toBlob(resolve, 'image/png'),
    );

    if (!blob) {
      throw Error('Failed to convert canvas to Blob.');
    }

    const dataUrl = await this.blobToDataUrl(blob);
    await this.invoke('handleFrame', {
      data: dataUrl,
    });
  }

  private async blobToDataUrl(blob: Blob): Promise<string> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result as string);
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });
  }