Skip to main content

addCanvasCaptureComposition()v4.0.528

Creates an interactive Canvas Capture component and registers it in the project. Both files are returned in one result. Use addComposition() when the component implementation already exists.

warning

Draft API: This API is experimental and may change.

add-canvas-capture-composition.ts
import {addCanvasCaptureComposition, type CodemodProject} from '@remotion/codemods';

declare const project: CodemodProject;

const result = addCanvasCaptureComposition({
  project,
  compositionFile: 'src/Root.tsx',
  compositionId: 'Capture',
  component: {
    filePath: 'src/Capture.tsx',
    importName: 'Capture',
    importPath: './Capture',
  },
  metadata: {width: 1920, height: 1080, fps: 30, durationInFrames: 90},
  capture: {
    videoFileName: 'capture.mp4',
    videoWidth: 1920,
    videoHeight: 1080,
    keyframeFps: 30,
    data: {
      captureMetadata: {density: 1},
      mouseMovements: [{timeInSeconds: 0, canvasX: 100, canvasY: 200, cursor: 'pointer'}],
      pointerClicks: [],
    },
  },
});

console.log(result.changes);

Options​

project​

An in-memory CodemodProject. The input project is not mutated.

compositionFile​

The existing project file containing the registration component. The same registration-root requirements and import support as addComposition() apply.

compositionId​

The new composition ID. Must contain only ASCII letters, numbers, CJK characters, or hyphens and be unused in the registration file.

component​

The component file and import to create.

filePath​

The new project file path. An existing file cannot be overwritten.

importName​

The named component export, beginning with an uppercase letter, _, or $.

importPath​

The module specifier to use in the registration file, such as ./Capture. It must resolve to component.filePath; the path is not derived automatically.

metadata​

The composition's width, height, fps, and durationInFrames. See addComposition().

folder?​

An existing folder reference {name, parentName}. By default, inserts at the registration root.

capture​

The recorded video and cursor data. The video must already be available in the public folder.

videoFileName​

The path to the video within the public folder, passed to staticFile().

videoWidth​

The recorded video's width in pixels.

videoHeight​

The recorded video's height in pixels.

keyframeFps​

The frame rate used to convert recording timestamps into cursor keyframes.

data​

Capture data containing captureMetadata.density, mouseMovements, and pointerClicks. Mouse movements have timeInSeconds, canvasX, canvasY, and cursor. Clicks have timeInSeconds and type: 'pointer-down' | 'pointer-up'. At least one movement must have non-null canvas coordinates.

The generated component uses @remotion/media and @remotion/mac-cursors. These packages must be installed in the project.

Return value​

project​

The updated project. Unchanged files and extra project fields are preserved.

changes​

Two {filePath, previousContents, nextContents} entries: the modified registration file and the created component file. The new component's previousContents is null. Save both changes to persist the operation; the video asset is not created or copied.

Errors​

Throws if the component file already exists, the registration target cannot be resolved, the capture has no usable cursor movements, or an option is invalid. Failed operations leave the input project unchanged.

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

See also​