How To Remove Flickering in Video Generated by Remotion

Question

I have created the video using Remotion. But after generating the video, There is a lot of flickering in the video. Here are my codes to generate the video using Remotion.

return (
        <>
            <Composition
                id="Story"
                component={Story}
                durationInFrames={DURATION_IN_FRAMES > videoDuretion ? DURATION_IN_FRAMES : videoDuretion}
                fps={FRAME_PER_SECOND}
                width={VIDEO_RESOLTION_WIDTH}
                height={VIDEO_RESOLTION_HEIGHT}
                defaultProps={{
                    messageIds: '',
                    apiResponse
                }}
            />
        </>
    );

Need your help to understand the problem and its solution.

And this is the command to generate the Remotion videos.

"scripts": {
        "start": "remotion preview src/index.tsx",
        "build": "remotion render src/index.tsx Story results/$(date \"+%Y-%m-%d_%H-%M-%S\").mp4",
    }

Answer 1

One of our projects was built with remotion and we rendered the video using server API. We also got the flickering issue. We solved that using less concurrency. We used concurrency level 2. I think you can try to reduce the concurrency

Answer 2

I explored a lot and tried to find out the solution to the given problem.

Here are my findings:

Quick Solution: Bypass multithreading

Change the build script in package.json file:

"scripts": {
    "build": "remotion render src/index.tsx Story results/$(date \"+%Y-%m-%d_%H-%M-%S\").mp4  --concurrency=1",
}

If your animation relies on sequential frame rendering to maintain its integrity, users frequently utilize the --concurrency=1 flag as a solution.

This flag helps address issues such as flickering or choppiness in many instances, providing a viable option when refactoring efforts are substantial. However, it's important to note that this technique significantly slows down the rendering process and does not guarantee precise timing of the animations.

Why Flickering: If your video experiences flickering or stuttering during rendering, it is a sign that there is a problem with multi-threading.

The workflow of Remotion's rendering process is as follows:

It is a strategy of utilizing multiple tabs to enhance the rendering speed of the video significantly. Each tab operates independently and does not share states. However, it is important to note that animations running separately from the useCurrentFrame() function may encounter issues. Additionally, it is worth mentioning that the frames may not be rendered in a strict sequential order, and there is a possibility of skipped frames.

Solution:

To ensure optimal functionality, it is essential to structure your video code in a manner that enables animations to be solely dependent on the value of useCurrentFrame(). Conceptualize your component as a function that converts a frame number into an image. It is vital to fulfill the following requirements:

Consistent Image Display: Your component must consistently present the same image when called multiple times.

Non-Sequential Frame Rendering: Your component should not rely on frames being rendered in sequential order.

Pause-Safe Animation: Your component should not animate when the video is paused.

Avoid Reliance on Randomness: It is advised to minimize reliance on randomness, except in cases where the usage of random() is necessary.

You can optimize the performance and reliability of your video component while ensuring consistent and controlled animation behavior.