Failed to load resource (pexels video url) during lambda rendering process

[tonyabracadabra]

Failed to load pexel stock videos during rendering process, causing the render to fail, how am I suppose to deal with it. Advice needed!

This is how I use the pexel video in my remotion code

export const VideoElementComponent: React.FC<{
  element: VideoElement;
  end: number;
}> = ({ element, end }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  return (
    <OffthreadVideo
      src={element.src}
      style={createMediaStyle(element, frame, fps)}
      volume={element.volume}
      muted={element.muted}
      playbackRate={element.loop ? 1 : 0}
      endAt={end}
    />
  );
};

Attaching the cloudwatch logs

Attaching the function I used for rendering on lambda

const result = await renderMediaOnLambda({
      codec: "h264",
      functionName: speculateFunctionName({
        diskSizeInMb: DISK,
        memorySizeInMb: RAM,
        timeoutInSeconds: TIMEOUT,
      }),
      // crf: CRF,
      region: REGION as AwsRegion,
      serveUrl: SITE_NAME,
      composition: "OffthreadRemoteVideo",
      inputProps: {
        src: "https://videos.pexels.com/video-files/5530402/5530402-uhd_3840_2160_25fps.mp4",
      },
    });

it makes sense to me why it failed if somewhere in the rendering process fetches the url with &time=0.03333333333333333&transparent=false&toneMapped=true suffix

[JonnyBurger]

@tonyabracadabra Unable to reproduce with the latest Remotion version:

<Composition
					id="OffthreadRemoteVideo"
					component={OffthreadRemoteVideo}
					fps={30}
					calculateMetadata={calculateMetadataFn}
					defaultProps={{
						src: 'https://videos.pexels.com/video-files/5530402/5530402-uhd_3840_2160_25fps.mp4',
					}}
				/>

import {getVideoMetadata} from '@remotion/media-utils';
import {CalculateMetadataFunction, OffthreadVideo} from 'remotion';

type Props = {
	src: string;
};

const fps = 30;

export const calculateMetadataFn: CalculateMetadataFunction<Props> = async ({
	props,
}) => {
	const {src} = props;
	const {durationInSeconds, width, height} = await getVideoMetadata(src);

	return {
		durationInFrames: Math.round(durationInSeconds * fps),
		fps,
		width,
		height,
	};
};

export const OffthreadRemoteVideo: React.FC<{
	src: string;
}> = ({src}) => {
	return <OffthreadVideo src={src} />;
};

renders fine on Lambda.

Can you upgrade to the latest version and if it doesn't work, post also a component that has this problem?
Please include a reproducible example in plain text

[tonyabracadabra]

I am still getting the Failed to fetch error with the latest version of remotion

[JonnyBurger]

@tonyabracadabra I've been using just npx remotion render without specifying any additional parameters and the config file is also empty

[tonyabracadabra]

This is the function I used for rendering on lambda

const result = await renderMediaOnLambda({
      codec: "h264",
      functionName: speculateFunctionName({
        diskSizeInMb: DISK,
        memorySizeInMb: RAM,
        timeoutInSeconds: TIMEOUT,
      }),
      // crf: CRF,
      region: REGION as AwsRegion,
      serveUrl: SITE_NAME,
      composition: "OffthreadRemoteVideo",
      inputProps: {
        src: "https://videos.pexels.com/video-files/5530402/5530402-uhd_3840_2160_25fps.mp4",
      },
    });

[tonyabracadabra]

Ok I think npx remotion render also works to me, and the problem may lie in the lambda rendering

[tonyabracadabra]

Could you try renderMediaOnLambda with the same code snippet and see if you could replicate the failed to fetch error I was facing? Thanks! @JonnyBurger