Chapter 829: Cutting clips

Core Idea

The recommended way is to record many small bite-sized clips with the Recording interface and create many scenes. You will have to do less re-takes due to mistakes and having multiple scenes allows adding transitions inbetween.

Key Concepts

• Cutting clips: The recommended way is to record many small bite-sized clips with the Recording interface and create many scenes.

Code Examples

import {
  ALTERNATIVE1_PREFIX,
  ALTERNATIVE2_PREFIX,
  CAPTIONS_PREFIX,
  DISPLAY_PREFIX,
  WEBCAM_PREFIX,
} from "./config/cameras";

const compositionId = process.argv[2];
if (!compositionId) {
  throw new Error("Expected composition ID as first argument");
}

console.log("Composition ID", compositionId);
const timestamp = process.argv[3];
if (!timestamp) {
  throw new Error("Expected timestamp as second argument");
}

const trimPoint = process.argv[4];
if (!trimPoint) {
  throw new Error("Expected trim point as third argument");
}

console.log("Timestamp", timestamp);
console.log("Trim point", trimPoint);

const folder = join("public", compositionId);
const files = readdirSync(folder);

const webcamFile = files.find((f) => f.startsWith(`webcam${timestamp}`));

if (!webcamFile) {
  throw new Error(
    `Expected file ${compositionId}/webcam${timestamp}.* to exist`,
  );
}

const webcamTimestamp = webcamFile.match(/\d{1,14}/g)?.[0] ?? null;

if (!webcamTimestamp) {
  throw new Error(
    `Expected file ${compositionId}/webcam${timestamp}.* to have timestamp ${timestamp}`,
  );
}

const allFilesWithTimestamp = files.filter((f) => {
  return (
    f.startsWith(`${WEBCAM_PREFIX}${timestamp}`) ||
    f.startsWith(`${DISPLAY_PREFIX}${timestamp}`) ||
    f.startsWith(`${ALTERNATIVE1_PREFIX}${timestamp}.mp4`) ||
    f.startsWith(`${ALTERNATIVE2_PREFIX}${timestamp}.mp4`)
  );
});

c
// ...(truncated)

• What it demonstrates: Usage pattern for Cutting clips from the official docs.

Key Takeaways

1. Understand cutting clips when working with Cutting clips.

Connects To

• Captions: related page in the Recorder (@remotion/recorder) section.
• Create: related page in the Recorder (@remotion/recorder) section.
• Demo: related page in the Recorder (@remotion/recorder) section.