☁ Lambda rendered video flickering | Remotion | Page 1

hearty blade Jan 31, 2024, 2:51 PM

#

Hey there!

I'm currently creating dynamic compositions from a json schema. I use the Series component to render text and a background.

Backgrounds can be images or videos.

I'm using Remotion version 4.0.86.

I'm rendering on lambda, but random flashes are happening in some of my rendered videos. I could not pin point what's causing it.

Any help is appreciated!

#

This is my node.js code.

📎 message.txt

#

The composition code.

📎 message.txt

#

This is a rendered video. The flick happend around 6 seconds.

solar heron Jan 31, 2024, 3:11 PM

#

hearty blade The composition code.

interesting! I'm curious how you calculate how video (VideoType) is calculated. is it for sure not asynchronous on any way? also not in an useEffect?

it's interesting to see that the white background still renders, I wonder if video.slides is empty somehow

hearty blade Jan 31, 2024, 4:20 PM

#

VideoType is generated as a typeof the videoSchema.
Like this:

const videoSchema = {...}
export type VideoType = typeof videoSchema;

This is the code of the root Composition.

import { MyComposition } from "./MyComposition";
import { Composition } from "remotion";

function getDurationInFrames(slides: { duration: number }[], fps: number) {
  return slides.reduce((acc, curr) => acc + curr.duration * fps, 0);
}

export const RootComposition = (props: any) => {
  return (
    <Composition
      id="my-composition"
      defaultProps={{}}
      component={(props: any) => <MyComposition {...props} />}
      calculateMetadata={async ({ props }: any) => {
        return {
          fps: props.fps,
          durationInFrames: getDurationInFrames(props.video.slides, props.fps),
          width: props.video.width,
          height: props.video.height,
        };
      }}
    />
  );
};

hearty blade Jan 31, 2024, 4:38 PM

#

Also, I added this piece of code inside the AbsoluteFill with the white background, to see if videos.slides is empty and render a text:

{(video.slides.length === 0 || !video.slides) && (
        <AbsoluteFill
          style={{
            display: "flex",
            alignItems: "center",
            paddingTop: 20,
            paddingBottom: 30,
            paddingLeft: 12,
            paddingRight: 12,
            justifyContent: "top",
          }}
        >
          <div
            style={{
              padding: 24,
              fontWeight: "bold",
              color: "#ffffff",
              fontSize: 150,
            }}
          >
            video.slides is empty
          </div>
        </AbsoluteFill>
      )}

But the "videos.slides is empty" text didn't render.

hearty blade Feb 1, 2024, 8:30 PM

#

@solar heron could my error maybe be related to how I'm using calculateMetadata?

solar heron Feb 2, 2024, 9:12 AM

#

hearty blade <@701030996430159872> could my error maybe be related to how I'm using calculate...

it does not seem like it to be honest. I also received a similar bug report from @brittle surge and @verbal breach and I am now making a new release with this change after a lot of testing: https://github.com/remotion-dev/remotion/pull/3439

v4.0.106 might fix it, would appreciate some testing!