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.