[SOLVED] remotion renderer error

[peak rock]

Error during rendering: [Event] { stackFrame: [{columnNumber:4, fileName:'http://localhost:3000/bundle.js', functionName: 'preloadImages', lineNumber:1549}], frame:1, delayRenderCall: null}

i get this error in remotion when using renderMedia function in remotion

preLoadImages function is this in my bundled code

const preloadImages = async () => {
await Promise.all(
updatedCover.map((url) => {
return new Promise((resolve, reject) => {
const fileType = getFileType(url);
if (fileType === "image" || fileType === "gif") {
const img = new Image();
img.src = url;
img.onload = () => resolve(url);
img.onerror = reject;
} else if (fileType === "video") {
const video = document.createElement("video");
video.src = url;
video.onloadeddata = () => resolve(url);
video.onerror = reject;
} else {
resolve(url);
}
});
}),
);
setIsReady(true);
(0, cjs.continueRender)(handle);

this error only comes on trying to export from mp4 urls

[peak rock]

this works locally as well only gives error on the docker image

[peak rock]

im confused as to why would it try to preloadImages when my composition only has videos

this is renderMedia()

      composition,
      serveUrl: bundleLocation,
      codec: 'h264',
      onStart: ({ frameCount }) => {
        console.log(`[REMOTION RENDER STAGE] Starting render of ${frameCount} frames`);
      },
      verbose: true,
      onProgress: async ({ renderedFrames, encodedFrames, encodedDoneIn, progress }) => {
        console.log(`[REMOTION RENDER STAGE] Rendered ${renderedFrames} frames, encoded ${encodedFrames} frames`);

        console.log(`[REMOTION RENDER STAGE] Progress: ${progress}`);

        let task = await TaskModel.findOne({ uuid: unique });

        task.progress = progress;
        await task.save();

        if (encodedFrames > 1 && task.taskStatus !== TaskStatus.EXPORTING) {
          task.taskStatus = TaskStatus.EXPORTING;
          await task.save();
        }
      },
      outputLocation,
      inputProps,
      timeoutInMilliseconds: 1800000,
    });

versions -

    "@remotion/cli": "^3.3.99",
    "@remotion/lambda": "^3.3.99",
    "@remotion/media-utils": "^3.3.99",
    "@remotion/player": "^3.3.99",
    "@remotion/renderer": "^3.3.99",```

[peak rock]

any help anyone?

[fleet imp]

@peak rock what chrome do you use?

maybe you installed a version of chromium which has no proprietary codecs and it cannot read MP4s.
check the source of the chrome you installed

http://remotion.dev/docs/docker has an example of a linux setup that supports those MP4 videos!

[peak rock]

hey ive followed these steps and made sure chromium and ffmpeg are installed

but getComposition function is now taking forever and doesnt time out

again only on the kubernetes service

@fleet imp

please any help would be appreciated

[fleet imp]

have you tried running it with logLevel: "verbose"?
I would recommend selectComposition() over getComposition(), it only evaluates one instead of all

then you can debug the relevant code only

[peak rock]

i tried with this

const comps = await getCompositions(bundleLocation, {
inputProps,
onBrowserLog: (info) => {
console.log("REMOTION: ${info.type}: ${info.text});

    console.log(
      info.stackTrace
        .map((stack) => {
          return `  ${stack.url}:${stack.lineNumber}:${stack.columnNumber}`;
        })
        .join('\n'),
    );
  },
});

but there's no log im getting

await ensureFfmpeg();
and await ensureFfmprobe(); both return true as well

[peak rock]

any reason why this could be only be an issue on my kubernetes deployment instance

[peak rock]

can this be due to chromium?

[fleet imp]

it's kinda hard to tell, because the version is almost 2 years old, I also kind of forgot about the issues there
there is also no information about what code should be run

maybe still try logLevel=verbose? seems like you did not put it

[peak rock]

this same flow was working earlier😭

[fleet imp]

if you changed nothing,
maybe it is because chrome auto upgraded itself

try installing a browser using https://pptr.dev/browsers-api
and using this using --browser-executable

[peak rock]

some progress

i logged into the shell of my kubernetes pod

and removed all chromium and let puppeteer install at runtime

[peak rock]

i am this stage

Error during rendering: [Event] { stackFrame: [{columnNumber:4, fileName:'http://localhost:3000/bundle.js', functionName: 'preloadImages', lineNumber:1549}], frame:1, delayRenderCall: null}

its not able to fetch mp4 video urls

looks like a chromium issue again

[peak rock]

but im on chromium latest version

[peak rock]

i have found some fix!

mix of chromium plus the mp4 urls that i was using

added google-chrome instead of chromium on the image

works fine

[peak rock]

now i feel like i can be a remotion expert as well

😭