remotion-dev / remotion Goto Github PK

I noticed there is no documentation for the --overwrite flag

The repository is quite big and takes a long time to clone. That's because there were media files that are now deleted. Need to find a way to somehow purge them so the repo is lightweight.

hey there when i ran npm run build after installing ffmpeg as advised by the console log , it didn't want to render my video as well despite having ffmpeg appear when i run ffmpeg -version , so after some digging in the code base i found out that it checks for the ffmpeg module with the where command which can only be ran inside C:\Windows\system32 , so to work around this if anybody is facing the same problem is to set an environment variable which includes this folder, another way is>

1- Go to your pc desktop icon , hit right click and properties
2-on the left hit the Advanced system settings
3-go to Advanced on the bottom environment variables
4-search for the Path environment variable , hit edit and browse to the folder mentioned above in c>>windows>system32 hit ok two time
5-restart your terminal and run the command npm run build command again and voila it works

This should be a seemless process on windows as well , i suggest adding such message to the user to include his environment variable in the console log or by handling it differently in your code , Hope this helps somebody as well

Hi, I would like to use this project alongside the web audio API to create audio visualizations. Before I start trying to implement this, are there any caveats or nuances that would prevent it from being possible?

Right now, the Audio does not get rendered in the output.

Ideally you can add as many elements whereever you want, and Remotion will do the composition! Most likely this will use FFMPEG flags to do the composition, but I am not yet 100% sure.

You can subscribe to this issue to follow the progress.

Issue:

Because the render --png mode outputs images without leading zero-padding, ls outputs them in the wrong order (using alphabetical rather than numerically aware order). This means that using ImgMagick to convert them into a gif fails because the frames are out of order.

Fix:

The indices should be padded with leading zeroes so that ls -a of the output folder is in frame order.

I occasionally get the error from Puppeteer "Session closed. Most likely the page has been closed", especially when heavily multithreading. Wondering if it can be fixed by upgrading puppeteer, retrying etc.

do u use SSR render react to html then convert html to image by puppeteer?

@pomber reported that video frames don't perfectly sync over time in this example.
https://github.com/pomber/record-talk-with-remotion

Something to take a look at and see if it can be optimized.

I'm not sure I get the logic behind sequences changing the layout.

For example, I wanted to make a component that staggers its children, each in its own sequence. Then each child can have its own entrance animation.

import React from 'react';
import {Sequence} from 'remotion';

export default ({
	staggerInFrames = 0,
	durationInFrames = Infinity,
	children = [<></>],
}) => {
	return (
		<>
			{React.Children.map(children, (child, i) => (
				<Sequence
					from={i * staggerInFrames}
					durationInFrames={durationInFrames - i * staggerInFrames}
					name={`Stagger-${i + 1}`}
				>
					{child}
				</Sequence>
			))}
		</>
	);
};

After a quick discussion in #13, we realized that having a Docker image for development would be awesome.

The Docker image would have to have:

• A stable Linux distro (I don't have much experience with Alpine but Ubuntu has a lot of guides on installing stuff)
• FFmpeg
• Node (probably would be best to have v14)
• Yarn (npm install -g yarn)

Can you please add a .dockerignore file to create-video and ignore the folder node_modules?

As reported on Discord:

I am having some problems running the npx create-video command on windows.

'mv' is not recognized as an internal or external command, operable program or batch file.

Could we use some universal strategy? Maybe the mv, cp and rimraf packages.

Thanks, nice project!

Asking for Deno support is new "asking for typescript support". So I've done it.

deno eval 'import * as x from "https://dev.jspm.io/remotion"; console.log(x)'

example of the expected result:

$ deno eval 'import * as x from "https://dev.jspm.io/lodash"; console.log(x)'
Module { default: [Function: lodash], [Symbol(Symbol.toStringTag)]: "Module" }

actual result:

$ deno eval 'import * as x from "https://dev.jspm.io/remotion"; console.log(x)'
error: Uncaught TypeError: Cannot read property 'ReactCurrentDispatcher' of undefined
      var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
                                                        ^
    at https://dev.jspm.io/npm:[email protected]/cjs/react-jsx-runtime.development.dew.js:323:57
    at dew (https://dev.jspm.io/npm:[email protected]/cjs/react-jsx-runtime.development.dew.js:1196:7)
    at dew (https://dev.jspm.io/npm:[email protected]/jsx-runtime.dew.js:8:15)
    at dew (https://dev.jspm.io/npm:[email protected]/dist/AbsoluteFill.dew.js:13:25)
    at dew (https://dev.jspm.io/npm:[email protected]/dist/index.dew.js:51:16)
    at https://dev.jspm.io/remotion:2:16

The webpack config doesn't include a class property transform.

The license document says:

This two-tier system was designed to ensure funding for this project while still allowing it to be open source.

However, this is incorrect; the license conditions violate points 3 and 5 of the Open-Source Definition, and therefore it cannot be called open-source. Something being open-source is about more than just being able to look at the source code, and so several additional requirements around usage rights and non-discrimination apply.

The common term for the sort of license used for this project is a "source-available license", though "while still allowing the source code to be publicly readable" would probably be easier to read and understand :)

Relatedly, the following from the website is also not entirely right:

Unlike many open source projects, it is not allowed to clone or fork Remotions code for the purpose of creating a competitor.

You can just leave out "many" here - people being allowed to fork and/or create a 'competitor' is inherently allowed by an open-source license. If that is not allowed, then it wouldn't qualify as open-source.

Those seem to be the only two places I've found; everything else I've looked at seems fine to me, wording-wise.

Can be reproduced here:

JonnyBurger/youtube-likes-recap-video-maker@7b15213

Should send a PR once the issue is fixed

Using normal HTML tags has the disadvantage that the image might not yet be loaded when Remotion is ready. I am thinking of adding a simple component which will hook into the onLoad event and wait for all images to be loaded using delayRender.

You can subscribe to this issue to follow the progress.

Solution for now:

import {useCallback, useState} from 'react';
import {continueRender, delayRender} from 'remotion';

export const Img: React.FC<Omit<
	React.DetailedHTMLProps<
		React.ImgHTMLAttributes<HTMLImageElement>,
		HTMLImageElement
	>,
	'onLoad'
>> = (props) => {
	const [handle] = useState(() => delayRender());

	const onLoad = useCallback(() => {
		continueRender(handle);
	}, [handle]);

	return <img {...props} onLoad={onLoad} />;
};

Imagine you render a video multiple times, you don't wanna bundle Webpack every time. Add some way to achieve it

I am adding GIF to an img tag, it looks normal in the dev preview but on build it seems to flicker
I have configured the Composition to be in 60 FPS

I am using windows WSL with node v14

I love this project, but I find typescript cumbersome to work with.

Would it be possible to a default setting for disabling TS?

I'd love it.

As reported on Discord

I told @timolins and @tobiaslins I'd try out splitbee.io for the docs!

1. Fork this repository
2. Clone this repository

~/desktop
$ git clone [email protected]:wafuwafu13/remotion.git

3. Add upstream branch and merge

~/desktop/remotion
$ git remote add upstream [email protected]:JonnyBurger/remotion.git

~/desktop/remotion
$ git fetch upstream

~/desktop/remotion
$ git merge upstream/main

Ref: https://github.com/JonnyBurger/remotion/blob/main/CONTRIBUTING.md#code-setup

4. npm i && npx lerna bootstrap (success)

~/desktop/remotion
$ npm i && npx lerna bootstrap  (success)
npm WARN [email protected] requires a peer of eslint@^6.1.0 but none is installed. You must install peer dependencies yourself.

audited 569 packages in 3.318s

52 packages are looking for funding
  run `npm fund` for details

found 6 vulnerabilities (3 low, 3 high)
  run `npm audit fix` to fix them, or `npm audit` for details
lerna info version 2.11.0
lerna info Bootstrapping 9 packages
lerna info lifecycle preinstall
lerna info Installing external dependencies
lerna info Symlinking packages and binaries
lerna info lifecycle postinstall
lerna info lifecycle prepublish
lerna info lifecycle prepare
lerna success Bootstrapped 9 packages

5. npm run build (failed)

~/desktop/remotion
$ npm run build

> @1.0.0-alpha.4 build /Users/tagawahirotaka/Desktop/remotion
> lerna run build

lerna info version 2.11.0

> [email protected] build /Users/tagawahirotaka/Desktop/remotion/packages/create-video
> tsc -d && node add-bin.js


> [email protected] build /Users/tagawahirotaka/Desktop/remotion/packages/core
> tsc -d


> @remotion/[email protected] build /Users/tagawahirotaka/Desktop/remotion/packages/eslint-plugin
> tsc -d


> [email protected] build /Users/tagawahirotaka/Desktop/remotion/packages/docs
> docusaurus build

[en] Creating an optimized production build...
ℹ Compiling Client
ℹ Compiling Server
✔ Client: Compiled successfully in 13.82s
✔ Server: Compiled successfully in 16.17s

Success! Generated static files in build. Use `npm run serve` to test your build locally.


> @remotion/[email protected] build /Users/tagawahirotaka/Desktop/remotion/packages/eslint-config
> tsc -d


> @remotion/[email protected] build /Users/tagawahirotaka/Desktop/remotion/packages/bundler
> tsc -d


> @remotion/[email protected] build /Users/tagawahirotaka/Desktop/remotion/packages/renderer
> tsc -d

lerna ERR! build Errored while running script in '@remotion/cli'
lerna ERR! execute callback with error
lerna ERR! Error: Command failed: npm run build
lerna ERR! npm ERR! code ELIFECYCLE
lerna ERR! npm ERR! errno 2
lerna ERR! npm ERR! @remotion/[email protected] build: `tsc -d && node add-bin.js`
lerna ERR! npm ERR! Exit status 2
lerna ERR! npm ERR!
lerna ERR! npm ERR! Failed at the @remotion/[email protected] build script.
lerna ERR! npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
lerna ERR!
lerna ERR! npm ERR! A complete log of this run can be found in:
lerna ERR! npm ERR!     /Users/tagawahirotaka/.npm/_logs/2021-02-09T23_50_38_041Z-debug.log
lerna ERR!
lerna ERR! > @remotion/[email protected] build /Users/tagawahirotaka/Desktop/remotion/packages/cli
lerna ERR! > tsc -d && node add-bin.js
lerna ERR!
lerna ERR! src/render.tsx(8,8): error TS2307: Cannot find module '@remotion/renderer' or its corresponding type declarations.
lerna ERR! src/render.tsx(58,29): error TS7006: Parameter 'c' implicitly has an 'any' type.
lerna ERR! src/render.tsx(76,19): error TS7006: Parameter 'f' implicitly has an 'any' type.
lerna ERR!
lerna ERR!     at /Users/tagawahirotaka/Desktop/remotion/node_modules/execa/index.js:236:11
Error: Command failed: npm run build
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @remotion/[email protected] build: `tsc -d && node add-bin.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @remotion/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tagawahirotaka/.npm/_logs/2021-02-09T23_50_38_041Z-debug.log

> @remotion/[email protected] build /Users/tagawahirotaka/Desktop/remotion/packages/cli
> tsc -d && node add-bin.js

src/render.tsx(8,8): error TS2307: Cannot find module '@remotion/renderer' or its corresponding type declarations.
src/render.tsx(58,29): error TS7006: Parameter 'c' implicitly has an 'any' type.
src/render.tsx(76,19): error TS7006: Parameter 'f' implicitly has an 'any' type.

    at /Users/tagawahirotaka/Desktop/remotion/node_modules/execa/index.js:236:11
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  code: 2,
  killed: false,
  stdout: '\n' +
    '> @remotion/[email protected] build /Users/tagawahirotaka/Desktop/remotion/packages/cli\n' +
    '> tsc -d && node add-bin.js\n' +
    '\n' +
    "src/render.tsx(8,8): error TS2307: Cannot find module '@remotion/renderer' or its corresponding type declarations.\n" +
    "src/render.tsx(58,29): error TS7006: Parameter 'c' implicitly has an 'any' type.\n" +
    "src/render.tsx(76,19): error TS7006: Parameter 'f' implicitly has an 'any' type.\n",
  stderr: 'npm ERR! code ELIFECYCLE\n' +
    'npm ERR! errno 2\n' +
    'npm ERR! @remotion/[email protected] build: `tsc -d && node add-bin.js`\n' +
    'npm ERR! Exit status 2\n' +
    'npm ERR! \n' +
    'npm ERR! Failed at the @remotion/[email protected] build script.\n' +
    'npm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n' +
    '\n' +
    'npm ERR! A complete log of this run can be found in:\n' +
    'npm ERR!     /Users/tagawahirotaka/.npm/_logs/2021-02-09T23_50_38_041Z-debug.log\n',
  failed: true,
  signal: null,
  cmd: 'npm run build',
  timedOut: false,
  exitCode: 1
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @1.0.0-alpha.4 build: `lerna run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @1.0.0-alpha.4 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tagawahirotaka/.npm/_logs/2021-02-09T23_50_38_095Z-debug.log

Closed captions would make a lot of sense and help improve accessibility.
Need to think about how to correctly use React APIs for this to make it as dynamic as possible!

https://twitter.com/marcysutton/status/1358837285442048002
https://twitter.com/Neoperitus/status/1358907007827406852

If we prepare some assets we can submit to Discord OSS repo and get a vanity URL.

Hi 👋

I'm the author of Humpf, a spring library and I think this project could benefit from using it instead or alongside of the current spring() function.
The main advantage of humpf compared to the current spring() is that humpf is time based and does not need to compute every past values to get the current one. This also mean that the framerate does not matter (as long as you get the current time).

Another advantage of humpf is that it handle velocity, both as input and output which allow to chain spring motion without a sudden change of velocity.

It would be great if remotion would allow to stream the video produced in a live fashion.
That would allow to send it to a livestream platform (like peertube, twitch, youtube, etc), or integrate it into OBS Studio.

Amazing project, thank you :)

I've just been stuck for an hour as I stupidly changed all my tags to remotion's tag but I only changed the src to use requires for some of them. When I rendered the project I was getting the error
Error taking screenshot TimeoutError: waiting for function failed: timeout 30000ms exceeded

It seems that if you stupidly supply a traditional string path to for example <Img src=" logo.png "/> then you'll receive the above error on rendering. It would be amazing if automatic detection is added for this to suggest using require instead

Users need at least Node v12.10.0 for Remotion to work. Let's enforce that or at the very minimum show a warning

There is some easing code but it's not documented and can't be used in a meaningful way.
Document it or remove it? And the more important question is, shouldn't all animations be spring animations?

The license field in package.json is UNLICENSED

package.json | npm Docs

Finally, if you do not wish to grant others the right to use a private or unpublished package under any terms:

I‘ve seen you already created some awesome transitions in your example repositories, such as Transition.tsx or FadeTransition.tsx.
I think it could be a nice addition to have since it is something a lot of videos will need to use!

How trivial would it be to, for example, start using d3.js (data visualization) with this?

The potential for Remotion is actually incredible

Using Math.random in a state will work during preview but not during render.

• Should Remotion offer a pseudo-randomness API which will generate deterministic entropy? With configurable seed?
• Should the ESLint plugin warn about this when using Math.random, use useState?
• Docs

Do you plan to turn it into an open source project?
GPL or LGPL or AGPL would be ok.
Thanks!

It would be nice in some cases to only render the first n frames, or get a still frame at a certain position. Thinking about an API like --range=1-10 or --range=50.

Just saw this genius tip by @sibelius on Twitter:

https://twitter.com/sseraphini/status/1360276475086307329?s=21

Problem Description : When running npx create-video it exits with the following error code

npx create-video npx: installed 24 in 3.292s What's the name of your project? (my-video) my-video Error: Command failed with exit code 1: copy -r C:\Users\mahmo\AppData\Roaming\npm-cache_npx\11472\node_modules\create-video_template my-video
The system cannot find the file specified. at makeError (C:\Users\mahmo\AppData\Roaming\npm-cache_npx\11472\node_modules\create-video\node_modules\execa\lib\error.js:59:11)
at handlePromise (C:\Users\mahmo\AppData\Roaming\npm-cache_npx\11472\node_modules\create-video\node_modules\execa\index.js:114:26)
at processTicksAndRejections (internal/process/task_queues.js:93:5) at async C:\Users\mahmo\AppData\Roaming\npm-cache_npx\11472\node_modules\create-video\dist\init.js:43:5 { shortMessage: 'Command failed with exit code 1: copy -r C:\Users\mahmo\AppData\Roaming\npm-cache\_npx\11472\node_modules\create-video\_template my-video',
command: 'copy -r C:\Users\mahmo\AppData\Roaming\npm-cache\_npx\11472\node_modules\create-video\_template my-video',
exitCode: 1, signal: undefined, signalDescription: undefined, stdout: 'The system cannot find the file specified.', stderr: '', failed: true, timedOut: false, isCanceled: false, killed: false }

Other details:

npx envinfo npx: installed 1 in 3.561s System:
OS: Windows 10 10.0.18363
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 7.93 GB / 15.88 GB

Binaries:
Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD

Managers:
pip3: 20.2.3 - C:\Python39\Scripts\pip3.EXE

Utilities:
Git: 2.29.2.

Virtualization:
Docker: 20.10.2 - C:\ProgramData\DockerDesktop\version-bin\docker.EXE

IDEs:
VSCode: 1.52.1 - C:\Users\mahmo\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
Languages:
Python: 3.9.0

Hello,

cool little project, have had a read through the source and seems like a nice concept. good work on pulling it together nicely 👍

one question i have is about your architectural choice of opting for react lock-in.

given that your architecture/process is essentially the following:

• bundle "remotion" (a bunch of react components for rendering purposes at this point) and the user's components via webpack
• visit said bundle in a browser with the frame and "composition" as parameters
• render the specified frame of the chosen "composition"
• take a screenshot
• repeat
• ultimately join these screenshots together and ffmpeg it into a video

it seems what you bundle and how doesn't really matter. you made a decision to write your rendering components in react, but it could've just as easily been a regular JS library.

do you have plans or would you ever consider reworking that part of the project to be framework-agnostic?

in reality it is a library which has been wrapped in react for sake of gaining entry into the state/ecosystem. if you reworked the bundle to instead be a library which renders "something" to DOM (still via a structured API/event flow), all frameworks would work with remotion and you'd open the door to a lot larger audience.

a simpler way of achieving that would be to separate the react rendering into its own package and maintain a core renderer which is framework-agnostic.

the cool/new concept here is the rendering/video creation, not the browser components. that part doesn't really depend on react (already), which makes it so close to being usable by non-react consumers but not quite.

Remotion allow pause render with delayRender/continueRender but it can be implemented with Suspense

previous discussion: #29

Hey! 👋 Having issues running yarn create video on M1 powered device w/out Rosetta 2.

Node v15.6.0 (native ARM), npm 7.4.0, yarn 1.x

It seems like the issue is related to puppeteer/puppeteer#6622, as Puppeteer does not find the proper installed binary during npm (re)build nor during launching browser

If I ever forget to set "durationInFrames" prop for my Sequence (and It did happen :D), the video preview and rendering will play just fine, but the timeline will look weird (the clips won't be stretched and will be look far apart from one another).
I think it should throw an exception in my face to remind my dumb ass to set it.

If you wanna reproduce : clone and checkout to this commit https://github.com/pierreminiggio/youtube-likes-recap-video-maker/blob/3351e845813145cd14dc2cb9f1664bf291d67781/src/Hello.tsx
And comment the durationInFrames line

First, congrats on the launch, this project is amazing.

I was wondering if there is any hook or any plan to let the user extend the webpack config. I'm particularly interested in importing markdown/mdx files.

Thanks!

Hey!
Just a couple of great libs that can come useful for rendering, instead of pretty shaky FFMPEG dependency from the docs.

• https://ffmpegwasm.github.io/
• https://github.com/mattdesl/mp4-h264

Hello there,
I really love this project, Because i tried to build similar personal project about 6 years ago - capture each frame then communicate to javascript runtime to render next frame using phantomjs, and stitched them using ffmpeg. but its performance wasn't optimized, hard to maintain, non-suitable for general purpose. So i'm so glad to see this project which is what i've been looking for - Thank you!

Based on that experience, I'd like to recommend few things:

• 1. H/W Accel - FFmpeg supports hardware accelerated encoding which is blazing fast. Most devices/platforms already satisfies requirements (e.g. Intel QuickSync, Apple MediaToolbox, NVIDIA NVenc). And we can fallback to x264 encoder if there's no hardware support. It also gives better HEVC or 4K encoding performance. See https://trac.ffmpeg.org/wiki/HWAccelIntro for details.
• 2. 4:4:4 Chroma Subsampling - 4:2:0 chroma subsampling usually gives poor text quality due to its behavior. So it would be nice if there's 4:4:4 chroma subsampling option. See https://github.com/leandromoreira/digital_video_introduction#chroma-subsampling and http://web.archive.org/web/20190324110017/http://images.guide/#chroma-subsampling for details.
• 3. More output codecs - HEVC gives better compression ratio (but requires more computing power)

Will submit a PR for sure, but i want to hear your thoughts!