Skip to main content

Loading <Img> with src http://localhost:3000/proxy

The error message A delayRender() "Loading <Img> with src=http://localhost:3000/proxy?src=[...]&time=[...]&transparent=[...]" was called but not cleared after 28000ms. See https://remotion.dev/docs/timeout for help:

A delayRender() "Loading <Img> with src=http://localhost:3000/proxy?src=http%3A%2F%2Flocalhost%3A3000%2Fpublic%2Fbackground.mp4&time=683.45&transparent=false" was called but not cleared after 28000ms. See https://remotion.dev/docs/timeout for help
A delayRender() "Loading <Img> with src=http://localhost:3000/proxy?src=http%3A%2F%2Flocalhost%3A3000%2Fpublic%2Fbackground.mp4&time=683.45&transparent=false" was called but not cleared after 28000ms. See https://remotion.dev/docs/timeout for help

occurs when loading an <OffthreadVideo> and the frame cannot be extracted within the timeout.

To be able to extract a frame, <OffthreadVideo> needs to:

  • Download the file in full
  • Open the file and seek to the correct position
  • Decode the frame and convert it into an image

Especially for large files which take some time to download, this error may occur.

Increase the timeout​

Consider increasing the timeout using the delayRenderTimeoutInMilliseconds prop.

Debug using verbose logging​

You can also enable verbose logging to see the progress of the work that <OffthreadVideo> is doing. In the usual case, you can understand from the timings why the timeout occurred.

Chunk the video​

Currently, <OffthreadVideo> needs to download the entire video in order to extract a frame (we work on eliminating this need in the future).

If you are loading a large video, consider chunking it into smaller parts and only load part of the video at a time.

For example, create a <Series> of <OffthreadVideo> components, each with a different src prop.

tsx
import { Series, useVideoConfig, OffthreadVideo, staticFile } from "remotion";
 
const parts = ["part1.mp4", "part2.mp4", "part3.mp4"];
 
const SeriesTesting: React.FC = () => {
  const { fps } = useVideoConfig();
 
  return (
    <Series>
      {parts.map((part) => {
        return (
          <Series.Sequence durationInFrames={30 * 60}>
            <OffthreadVideo src={staticFile(part)} />
          </Series.Sequence>
        );
      })}
    </Series>
  );
};
tsx
import { Series, useVideoConfig, OffthreadVideo, staticFile } from "remotion";
 
const parts = ["part1.mp4", "part2.mp4", "part3.mp4"];
 
const SeriesTesting: React.FC = () => {
  const { fps } = useVideoConfig();
 
  return (
    <Series>
      {parts.map((part) => {
        return (
          <Series.Sequence durationInFrames={30 * 60}>
            <OffthreadVideo src={staticFile(part)} />
          </Series.Sequence>
        );
      })}
    </Series>
  );
};

Use a faster CDN​

Ensure using a place to host your video that has enough egress bandwidth capacity.
Place the video onto a server that is close to your render geographically.

If you believe this error was triggered by a bug in Remotion, please open an issue.