Skip to main content

External recordings

You can also include recordings that you recorded externally in your Recorder video.
For example, you may edit a vlog with it.

Add files​

Transfer the recordings from your camera to your computer and put them in the public/<composition-id> folder.
The file structure should look like this:

Assuming the composition id is 'vlog'
bash
public
├── vlog
│ ├── camera10.mov
│ ├── camera20.mov
│ └── camera30.mov
Assuming the composition id is 'vlog'
bash
public
├── vlog
│ ├── camera10.mov
│ ├── camera20.mov
│ └── camera30.mov

The prefix must be "webcam" for every video.
The suffixes must be ascending in the order you want to use the videos.

Generate captions​

Run

bash
bun sub.ts
bash
bun sub.ts

to generate captions for your recordings.

Use the videos​

Now you can add more scenes in the right sidebar to start including the recordings.

iPhone recordings​

iPhone recordings are HEVC videos, which during rendering Chrome cannot get the dimensions of the video.
You will get a render failure.

Here is a script to convert the recordings to MP4:

convert.ts
ts
import { $ } from "bun";
import { renameSync, unlinkSync } from "fs";
const compositionId = "vlog";
const ls = (await $`ls public/${compositionId}`).stdout.toString("utf-8");
const files = ls.split("\n");
for (const file of files) {
  if (
    file.toLowerCase().endsWith(".mov") ||
    file.toLowerCase().endsWith(".mp4")
  ) {
    await $`bunx remotion ffmpeg -i public/${compositionId}/${file} public/${compositionId}/_${file}.mp4`;
    unlinkSync(`public/${compositionId}/${file}`);
    renameSync(
      `public/${compositionId}/_${file}.mp4`,
      `public/${compositionId}/${file.replace(/ /g, "_")}`,
    );
  }
}
convert.ts
ts
import { $ } from "bun";
import { renameSync, unlinkSync } from "fs";
const compositionId = "vlog";
const ls = (await $`ls public/${compositionId}`).stdout.toString("utf-8");
const files = ls.split("\n");
for (const file of files) {
  if (
    file.toLowerCase().endsWith(".mov") ||
    file.toLowerCase().endsWith(".mp4")
  ) {
    await $`bunx remotion ffmpeg -i public/${compositionId}/${file} public/${compositionId}/_${file}.mp4`;
    unlinkSync(`public/${compositionId}/${file}`);
    renameSync(
      `public/${compositionId}/_${file}.mp4`,
      `public/${compositionId}/${file.replace(/ /g, "_")}`,
    );
  }
}

Run it using

sh
bun convert.ts
sh
bun convert.ts

to fix the issue.

Examples​

In the our-recorder repository, the compositions marathon and airportrun are using real-life footage.