[Questions] Debug why images don't show up in the editor even after being fetched

[evidanary]

I've created a copy of the youtube-shorts folder and customized it. Everything is working great. The npm run render produces the right video with the correct images, audio, captions, etc.

However, when I view the video in the editor, the images are not shown. The captions and audio work as expected in the editor. I can confirm that the files are being fetched (by looking at the network traffic). They just aren't displayed in the editor.

Any pointers on how I can go about debugging why the images are not shown in the editor?

[evidanary]

Bumping this up @justusmattern27 . Any pointers on how to debug will be greatly appreaciated

[justusmattern27]

@evidanary sorry for the late response! Are you using the default images from the repository from our revideo bucket? If not, images from remote urls often cause CORS permission errors.

I would also always check if downloading the images and putting them into your /public folder solves things to rule out that anything is wrong with the image itself. Can you check that that is the case?

[justusmattern27]

@evidanary I would also advise you to upgrade to 0.5.7 (I'm seeing that you use 0.4.8 since the shorts repo wasn't updated anymore since this version).

[creaz35]

Hi @justusmattern27, cany ou please advise how to upgrade, having the same issue, specifically when i try to render: Error: Error: ffmpeg exited with code 1: Output #0, mp4, to 'output\video-visuals.mp4':
Output file #0 does not contain any stream

at ChildProcess.<anonymous> (C:\Users\Brian\Desktop\projects\examples\youtube-shorts\node_modules\fluent-ffmpeg\lib\processor.js:180:22)
at ChildProcess.emit (node:events:519:28)
at ChildProcess._handle.onexit (node:internal/child_process:294:12)

node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^

Error: ffmpeg exited with code 1: Output #0, mp4, to 'output\video-visuals.mp4': the file is savedb ut containing only audio. My package.json is {
"name": "revideo-app",
"private": true,
"version": "0.0.0",
"scripts": {
"start": "revideo editor --projectFile ./src/project.tsx",
"render": "tsc && node dist/render.js"
},
"dependencies": {
"@deepgram/sdk": "^3.3.1",
"@revideo/2d": "0.10.1",
"@revideo/core": "0.10.1",
"@revideo/renderer": "0.10.1",
"dotenv": "^16.4.5",
"express": "^4.19.2",
"openai": "^4.40.2",
"uuid": "^9.0.1"
},
"devDependencies": {
"@revideo/cli": "0.10.1",
"@revideo/ui": "0.10.1",
"@types/uuid": "^10.0.0",
"typescript": "5.5.4",
"vite": "^4.5"
}
}