🎥 Create videos programmatically in React

Jonny Burger

Last update: Dec 31, 2022

Related tags

Overview

Join the Discord

Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

Why create videos in React?

Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem

Example videos

Remotion Trailer Watch • Source code • The announcement video for Remotion was written in Remotion itself!
AnySticker Welcome Video Watch • Source code • An in-app explainer video for my app AnySticker.
Spotify Wrapped Recreated Watch • Tutorial • Source code • A recreation of Spotify Wrapped where you can override all text and images via command line.
"Game changer or no game changer" intro Watch • Source code • An intro for a quiz show I did with William Candillon.
"The X in MDX" talk Watch • Source code • A re-recording of this talk using Remotion.
Redesigning the Scatterplot Watch • Source code • An animated section of Edward R. Tufte's book The Visual Display of Quantitative Information.

Feel free to pull request your creations!

Get started

If you already have Yarn and FFMPEG installed, type

yarn create video

to get started. Otherwise, read the installation page in the documentation.

Documentation

Head to remotion.dev to learn the in and outs of Remotion!

License

Be aware of that Remotion has a special license and requires obtaining a company license in some cases. Read the LICENSE documentation for more information.

Contributing

Please read CONTRIBUTING.md to learn about contributing to this project.

Comments

Write article about how to create a series of videos from a dataset
🎃 This issue is part of our Hacktoberfest campaign! 📚 Read more about Hacktoberfest here ⏲️ This issue is currently assigned to @ThePerfectSystem! 💰 Thanks to CodeChem for sponsoring this issue!

A common problem that users want to solve with Remotion is that they have a dataset (let's assume JSON for simplicity) and create a video for each one of the entries in their set.

How I would recommend to do it is to create a TypeScript script, and use renderMedia() to render a video for each data and parametrize the video based on input props. There is already https://remotion.dev/docs/ssr which is similar but does not specifically explain how to approach the problem if you have a dataset.

Acceptance criteria

Write an article and add it to the website (take for example the Figma article as a reference: #1378)

In that article, assume that you have a simple example video (it can for example be the example from https://www.remotion.dev/docs/player, source can be found at the bottom of the page) with few parameters (e.g. color and name)

Explain step for step, how one would write and run a script that renders a video for each person in a dataset. Also create a small sample dataset, for example of 10 people who each have a name and favorite color.

Include code snippets and screenshots where it makes sense.

IssueHunt Summary

theperfectsystem has been rewarded.

Backers (Total: $195.00)

remotion-dev ($195.00)

Submitted pull Requests

#1503 add documentation for rendering from dataset

Tips

Checkout the Issuehunt explorer to discover more funded issues.

Need some help from other developers? Add your repositories on IssueHunt to raise funds.

:gift: Rewarded on Issuehunt
opened by JonnyBurger 23

Easy to import Google Fonts using `@remotion/google-fonts`

🎃 This issue is part of our Hacktoberfest campaign! 📚 Read more about Hacktoberfest here 🕛 This issue is taken by @ayatkyo! 💰 Thanks to CodeChem for sponsoring this issue!

Currently it is a bit of a hassle to add Google fonts to Remotion. Here is an idea of how we can make an easy to use API:

There is JSON information about each Google Font, for example about Roboto:

{
	category: 'sans-serif',
	lastModified: '2021-09-22',
	subsets: [
		'cyrillic',
		'cyrillic-ext',
		'greek',
		'greek-ext',
		'latin',
		'latin-ext',
		'vietnamese',
	],
	unicodeRange: {
		cyrillic: 'U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116',
		'cyrillic-ext':
			'U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F',
		greek: 'U+0370-03FF',
		'greek-ext': 'U+1F00-1FFF',
		latin:
			'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
		'latin-ext':
			'U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF',
		vietnamese:
			'U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB',
	},
	variants: {
		italic: {
			'100': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOiCnqEu92Fr1Mu51QrEz4dKw.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOiCnqEu92Fr1Mu51QrEz4dKA&skey=8f53aa2e7deadc4a&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOiCnqEu92Fr1Mu51QrEz4dKg.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOiCnqEu92Fr1Mu51QrEz4dKQ.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOiCnqEu92Fr1Mu51QrEzAdLw.woff2',
				},
			},
			'300': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TjASc0CsA.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOjCnqEu92Fr1Mu51TjASc0CsM&skey=8f644060176e1f7e&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TjASc0CsE.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TjASc0CsI.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2',
				},
			},
			'400': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1Mu51xGIzY.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOkCnqEu92Fr1Mu51xGIzU&skey=c608c610063635f9&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1Mu51xGIzc.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1Mu51xGIzQ.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1Mu51xIIzI.woff2',
				},
			},
			'500': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51S7ACc0CsA.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOjCnqEu92Fr1Mu51S7ACc0CsM&skey=c985e17098069ce0&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51S7ACc0CsE.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51S7ACc0CsI.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51S7ACc6CsQ.woff2',
				},
			},
			'700': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TzBic0CsA.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOjCnqEu92Fr1Mu51TzBic0CsM&skey=dd030d266f3beccc&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TzBic0CsE.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TzBic0CsI.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2',
				},
			},
			'900': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TLBCc0CsA.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOjCnqEu92Fr1Mu51TLBCc0CsM&skey=b80be3241fe40325&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TLBCc0CsE.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TLBCc0CsI.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOjCnqEu92Fr1Mu51TLBCc6CsQ.woff2',
				},
			},
		},
		normal: {
			'100': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxGIzY.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOkCnqEu92Fr1MmgVxGIzU&skey=5473b731ec7fc9c1&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxGIzc.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxGIzQ.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2',
				},
			},
			'300': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fChc8.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmSU5fChc_&skey=11ce8ad5f54705ca&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fChc9.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fChc-.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4.woff2',
				},
			},
			'400': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxO.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Mu7GxN&skey=a0a0114a1dcab3ac&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxP.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxM.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2',
				},
			},
			'500': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fChc8.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmEU9fChc_&skey=ee881451c540fdec&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fChc9.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fChc-.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4.woff2',
				},
			},
			'700': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfChc8.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmWUlfChc_&skey=c06e7213f788649e&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfChc9.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfChc-.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfBBc4.woff2',
				},
			},
			'900': {
				local: [],
				url: {
					eot: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmYUtfChc8.eot',
					svg: 'https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmYUtfChc_&skey=934406f772f9777d&v=v29#Roboto',
					ttf: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmYUtfChc9.ttf',
					woff: 'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmYUtfChc-.woff',
					woff2:
						'https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmYUtfBBc4.woff2',
				},
			},
		},
	},
	version: 'v29',
}

The whole list of Google Fonts is 8MB. This is too big, so we need a way to only load specific fonts.
Idea: Make a separate import statement for each font, e.g. import {loadFont} from "@remotion/google-fonts/Roboto" and import {loadFont} from "@remotion/google-fonts/Montserrat". For that we need to code-generate a TypeScript file for each font.
If we can code-generate some TypeScript types based on the JSON...

type Variants = {
	normal: {
		weights: '400' | '500';
		subsets:  'greek';
	};
	bold: {
		weights: '600' | '700';
		subsets: 'cyrillic' | 'cyrillic-ext';
	};
};

...We can make an awesome autocomplete experience with it:

https://user-images.githubusercontent.com/1629785/195180349-8c84d55a-ceb5-4b7f-9171-3ca6aa3d9cf9.mov

Using the following function signature:

const loadFont = <T extends keyof Variants>(
	variant: T,
	options: {
		weights: Variants[T]['weights'][];
		subsets: Variants[T]['subsets'][];
	}
) => void

I have implemented an example function of how a Google font could be loaded from JSON:

const loadFont = <T extends keyof Variants>(
	variant: T,
	options: {
		weights: Variants[T]['weights'][];
		subsets: Variants[T]['subsets'][];
	}
) => {
	options.weights.forEach((weight) => {
		options.subsets.forEach((subset) => {
			const handle = delayRender(
				'Fetching Roboto font ' +
					JSON.stringify({
						variant,
						weight: options.weights,
						subset: options.subsets,
					})
			);

			const fontFace = new FontFace(
				'Roboto',
				`url(${
					data.variants[variant as unknown as keyof typeof data['variants']][
						weight
					].url.woff2
				}) format('woff2')`,
				{
					weight,
					style: variant,
					unicodeRange: data.unicodeRange[subset],
				}
			);
			fontFace
				.load()
				.then(() => {
					document.fonts.add(fontFace);
					continueRender(handle);
				})
				.catch((err) => {
					console.log(err);
				});
		});
	});
};

Task

Create a @remotion/google-fonts package that allows to load each font with TypeScript autocompletion.

Acceptance criteria

Should write a script that takes the JSON from https://github.com/jonathantneal/google-fonts-complete and generates a file for each font
Developer should be able to import a single font using the import {loadFont} from "@remotion/google-fonts/Roboto" syntax, without importing the whole 8MB database
The font should be properly loaded, with only the styles and weights the user wants to be loaded
Should not do additional work if the user calls the same function multiple times
Write a new documentation page detailing how to exactly use this API, similar to API pages of other packages
Update the Fonts page https://www.remotion.dev/docs/fonts to mention this new option.

If you have a different implementation idea, let me know!

IssueHunt Summary

ayatkyo has been rewarded.

Backers (Total: $279.00)

remotion-dev ($279.00)

Submitted pull Requests

#1446 feat: @remotion/google-fonts

Tips

Checkout the Issuehunt explorer to discover more funded issues.
Need some help from other developers? Add your repositories on IssueHunt to raise funds.

:gift: Rewarded on Issuehunt 🥨 hacktoberfest

opened by JonnyBurger 23

add --height --width flags
this references issue #808

I tried implementing as advised and came up with the following. Am I moving in the right direction? I'll be extending this to the lambda and still commands and documenting afterwards.

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

#808: Dynamically set width and height & FPS
opened by exitflynn 20

Could not play audio with src /static-f03a0c550524/audio.wav: [object MediaError]

hi i am new user i cant use audio tag in my code its get me an error i didnt install ffmpeg cause i didnt need to render my video please help me here is my code

      <>
        <AbsoluteFill className="items-center justify-center" >
            <Video
                width={width}
                height={height}
                startFrom={0}
                src={video}
            />
          
            <Sequence from={10} durationInFrames={120}>
                <h1 className='text-9xl w-[100%] text-center mt-32 font-extrabold'
                 style={{opacity:interpolated}}>{text}</h1>
            </Sequence>
         </AbsoluteFill>
          <Audio src={staticFile("audio.wav")}/>
          </>

bug

opened by pooooriya 19

TimeoutError: waiting for function failed: timeout 30000ms exceeded

First of all I want to congratulate you for this project, it's really awesome!

I have a small issue when I try to render my video, I get this error from Puppeteer: TimeoutError: waiting for function failed: timeout 30000ms exceeded.

I usually get this when I have a video file in the background, what can be done?

opened by apopiidoru 19
Exporting from Figma to Remotion
#1361

Hi @JonnyBurger, I'm having an issue with previewing the changes I made when I start the docusaurus server.

In sidebar.js I added the appropriate item under the "Techniques" category. But, I'm having an error related to the id of the doc.

Kindly take a look. Thanks!

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

#1361: Write a tutorial for how to export from Figma to Remotion
opened by kaf-lamed-beyt 18
Dynamically set `width` and `height` & FPS
Edit by @JonnyBurger:

🎃 This issue is part of our Hacktoberfest campaign! 📚 Read more about Hacktoberfest here ✅ This issue is currently assigned to @exitflynn!

Hacktoberfest acceptance criteria:

Should introduce new height and width flags for renderMediaOnLambda() and renderStillOnLambda() (it is not required for renderMedia() and renderStill() since you can override the composition object)

Should introduce a new --height and --width flag to be used for the npx remotion render, npx remotion still, npx remotion lambda render and npx remotion lambda still commands.

These flags will override the width and height of the render regardless of what was passed to <Composition>.

Some restrictions apply: For h264 videos, the dimensions must be even (divisible by 2), must be integer and not negative. This is currently validated and one should not be able to bypass that validation

Document the feature in all API pages where those options can be passed

Original issue:

Use Case

Rapidly changing FPS & video size for:

local development vs final product

multiple hosting target sizers (eg Social media)

dynamic playback (Responsive, keep in sync with imbedded video)

Changing FPS when source data is in seconds (eg WebVTT)

Problem

While it is clear Remotion uses Frames and FramesPerSecond for time, & pixels for size, these are inconvenient standards for dynamic situations. For example, the movie producer, SEO professional, etc who wants to change the video size & rate easily can not when the components hard-coded.

While everyone could hard-code their own way of handling translations, it would hinder sharing components & complicate development.

Possible Solutions

Unsure best way forward; here is a brainstorm of easiest to complex implementation:

Document better, with more examples of dynamic sizes/FPS

Standardized helper functions, eg secondsToFrames(), viewhightToPixels() (I'm about to try this)

Remotion bakes in automatic conversions similar to CSS units (interpolate(frame, [0, 2sec], [15vw, 50vw]))

IssueHunt Summary

exitflynn has been rewarded.

Backers (Total: $167.00)

jonnyburger ($112.00)

remotion-dev ($55.00)

Submitted pull Requests

#1427 add --height --width flags

Tips

Checkout the Issuehunt explorer to discover more funded issues.

Need some help from other developers? Add your repositories on IssueHunt to raise funds.

:gift: Rewarded on Issuehunt 🥨 hacktoberfest
opened by tomByrer 18
Add audio support

This PR adds audio support!

It might not work fine with many audios by limitation of ffmpeg and pattern detecting from audio data of every frame, so we need more tests.

opened by yuta0801 18
Support for other frameworks (e.g. Vue)
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.

IssueHunt Summary

Backers (Total: $0.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

Checkout the Issuehunt explorer to discover more funded issues.

Need some help from other developers? Add your repositories on IssueHunt to raise funds.
opened by 43081j 18
Allow to open project in VS Code or other editor from the preview

Workflow:

I cd into a project, run npm start. Then I realize I forgot to run code ., and I need to Ctrl+C, run it and then start the preview again.

Somewhere around here we could put a button "Open in VS Code", but of course it should be editor agnostic. The logic from the error overlay should be reused:

💎 Bounty 💰 Rewarded

opened by JonnyBurger 17
TTS example
Would be great if there is support for converting text to speech automatically and include as part of the video output.

IssueHunt Summary

felippechemello has been rewarded.

Backers (Total: $115.00)

jonnyburger ($115.00)

Submitted pull Requests

#427 Bogus PR for https://github.com/JonnyBurger/remotion/issues/249

Tips

Checkout the Issuehunt explorer to discover more funded issues.

Need some help from other developers? Add your repositories on IssueHunt to raise funds.

:gift: Rewarded on Issuehunt 💙 developer experience templates
opened by Purus 17

Random ENOENT failure with complex-filter file

Bug Report 🐛

Randomly, the complex-filter file has disappeared before ffmpeg is run. Restarting the job (and re-rendering all 1100 frames 😪) helps.

$ remotion render Foo ./out/foo.mp4 --crf 19 --image-format png --scale 0.5 --concurrency 4 --props '{"redacted": true}'
(1/3) [====================] Bundled code 955ms
Entry point = src/index.ts (common paths), Composition = Foo (Passed as argument), Codec = h264 (derived from out name), Output = ./out/foo.mp4
(2/3) [====================] Rendered frames (4x) 615425ms
    + [====================] Downloading http://localhost:3002/public/music.mp3
(3/3) [                    ] Encoding video 0/1100
An error occurred:
Error: ENOENT: no such file or directory, open '/var/folders/n0/8r8c6bms2fj7753rvhmtybqm0000gn/T/remotion-v3-3-27-assetszwb2b3dcjd/remotion-complex-filter/complex-filter-05051967092679592.txt'

bug

opened by akx 0

Concurrency in percent

I think extending the API of the concurrencyproperty in the renderMedia() function by a percentage value would be a great addition, for example 100% using all CPU Threads avaibale on the machine.
💎 Bounty

opened by JonnyBurger 3
`remotion render --sequence` fails when output path starts with a dot
Bug Report 🐛

$ yarn remotion render Foo ./out --crf 19 --muted --sequence The output directory of the image sequence cannot have an extension. Got: /out

I suppose whatever determines whether a pathname has an extension shouldn't think that leading dots are part of an extension. (Also, why wouldn't ./out/foo.1.2.3 be a valid directory name?)
bug
opened by akx 1
"recursive": true in fs.watch() raises ERR_FEATURE_UNAVAILABLE_ON_PLATFORM on Linux
@JonnyBurger first: What a fantastic project!!! 🙌🎉🙏 I started playing with it recently and building a small project - hope to share soon on discord!

Bug Report 🐛

Background

Between 3.3.25-3.3.26 you have introduced function watchPublicFolder (in packages/cli/src/preview-server/public-folder.ts)

Git diff: https://github.com/remotion-dev/remotion/compare/v3.3.25...v3.3.26

It uses fs.watch and {recursive: true}

Error

On my system: WSL 2 Ubuntu 20.04, Node v18.13

After upgrading to 3.3.26 or 3.3.27 npx remotion preview results in

An error occurred: TypeError [ERR_FEATURE_UNAVAILABLE_ON_PLATFORM]: The feature watch recursively is unavailable on the current platform, which is being used to run Node.js at new NodeError (node:internal/errors:400:5) at watch (node:fs:2313:11) at watchPublicFolder ( /projects/remotion/node_modules/@remotion/cli/dist/preview-server/public-folder.js:31:20) at initPublicFolderWatch ( /projects/remotion/node_modules/@remotion/cli/dist/preview-server/public-folder.js:13:35) at previewCommand ( /projects/remotion/node_modules/@remotion/cli/dist/preview.js:91:47) at async cli ( /projects/remotion/node_modules/@remotion/cli/dist/index.js:68:13)

Issue

Looks like the recursive feature is not supported on Linux.

From [Stackoverflow] (https://stackoverflow.com/questions/61806341/how-to-fix-the-feature-watch-recursively-is-unavailable-on-the-current-platform)

Node v14 introduced a breaking change to the fs.watch() API, specifically that the recursive option (which has never been supported on Linux) now raises the ERR_FEATURE_UNAVAILABLE_ON_PLATFORM error if used on Linux.

From [Node documentation] (https://nodejs.org/docs/latest/api/fs.html#fswatchfilename-options-listener):

recursive Indicates whether all subdirectories should be watched, or only the current directory. This applies when a directory is specified, and only on supported platforms (See caveats). Default: false.

Solution

I am way out of my depth here, but I have seen two possibilities:

use {chokidar)[https://github.com/paulmillr/chokidar] instead of fs.watch, it will stop error from happening on Linux, but I have no experience with this library

turn of recursive option in case of process.platform === "linux"

I did not look on the implication of removing the "recursive", so I won't dare to submit any PR, but I hope this is helpful!

Thank you guys!
bug
opened by gregonarash 1

`@remotion/google-fonts` usage with remotion player in Next.js gives `ReferenceError`

Bug Report 🐛

I'm using a remotion player component, playing a composition that has the Montserrat from imported and used in the following manner:

import * as Montserrat from "@remotion/google-fonts/Montserrat";

const { fontFamily: montserratFontFamily } = Montserrat.loadFont("normal", {
  weights: ["400", "500", "600", "700"],
  subsets: ["latin"],
});

// usage like
<main style={{ fontFamily: montserratFontFamily, }} />

What's strange is that the error shows up randomly, only bothers 60% of the times I run the dev server, but sometimes it works like a charm and the fonts are loaded on the remotion player.

Dev environment

My package.json has the following packages

{"scripts": {
    "@remotion/bundler": "^3.3.25",
    "@remotion/cli": "^3.3.25",
    "@remotion/google-fonts": "^3.3.25",
    "@remotion/lambda": "^3.3.25",
    "@remotion/motion-blur": "^3.3.25",
    "@remotion/player": "^3.3.25",
    "remotion": "^3.3.25",

    "next": "13.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
}}

This is the exact error message:

ReferenceError: FontFace is not defined
    at loadFonts (/hidden-random-lolproj-ect/node_modules/.pnpm/@[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/@remotion/google-fonts/dist/base.js:39:34)
    at Object.loadFont (/hidden-random-lolproj-ect/node_modules/.pnpm/@[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/@remotion/google-fonts/dist/Montserrat.js:153:33)
    at eval (webpack-internal:///./src/animations/loving-customers.tsx:26:110)
    at Object../src/animations/loving-customers.tsx (/hidden-random-project-lol/.next/server/pages/_app.js:77:1)
    at __webpack_require__ (/hidden-random-project-lol/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/animations/templates.ts:6:75)
    at Object../src/animations/templates.ts (/hidden-random-project-lol/.next/server/pages/_app.js:88:1)
    at __webpack_require__ (/hidden-random-project-lol/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/store/playerSlice.ts:7:78)
    at Object../src/store/playerSlice.ts (/hidden-random-project-lol/.next/server/pages/_app.js:165:1) {
  page: '/'
}

bug

opened by Just-Moh-it 0

Releases(v3.3.27)

v3.3.27(Jan 4, 2023)
What's Changed

fix preview server crashing when public/ dir does not exist by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1644

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.26...v3.3.27
Source code(tar.gz)
Source code(zip)
v3.3.26(Jan 3, 2023)
What's Changed

New getStaticFiles() Core API: https://www.remotion.dev/docs/getstaticfiles by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1639

Fix accelerated video after URL timestamp hashes were implemented by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1636

Upgrade react types && don't overwrite default react types by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1638

Fix FFmpeg installation for yarn pnp by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1637

Fix alpha compositing of compositor by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1631

Argue against importing renderMediaOnLambda from @remotion/lambda by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1641

Docs

New Polygon.io showcase video by @timetraveler328 in https://github.com/remotion-dev/remotion/pull/1633

docs: add deploySite webpack override example by @Just-Moh-it in https://github.com/remotion-dev/remotion/pull/1632

New Contributors

@timetraveler328 made their first contribution in https://github.com/remotion-dev/remotion/pull/1633

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.25...v3.3.26
Source code(tar.gz)
Source code(zip)
v3.3.25(Dec 30, 2022)
What's Changed

The start of some Rust-based capabilities! The @remotion/renderer package now includes a native binary (around 1MB in size) which can compose layers together. In the future, this will allow to declare graphics without having to take screenshots.

Two components have been added for now that can speed up a render in certain cases:

<Experimental.Clipper>: https://www.remotion.dev/docs/clipper by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1586

<Experimental.Null>: https://www.remotion.dev/docs/null by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1586

If these components are used, less or no time is spent screenshotting, but the Rust processing pipeline gets added. Expect none to very modest render time improvements for now.

Also:

Allow importing remotion/version and @google-fonts/[font-name] when tsconfig.module is NodeNext by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1627

Website: Fix template copied icon not respecting dark mode by @KarthikRaju391 in https://github.com/remotion-dev/remotion/pull/1626

New Contributors

@KarthikRaju391 made their first contribution in https://github.com/remotion-dev/remotion/pull/1626

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.19...v3.3.25
Source code(tar.gz)
Source code(zip)
v3.3.19(Dec 28, 2022)
What's Changed

Add option --no-open to prevent Remotion from opening a browser in preview by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1623

Allow dependencies to be imported in remotion.config.ts by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1621

Require src to be a string for

Prevent case where Video loop crashes by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1618

fix parser for certain GIFs for preview by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1620

Website

New tutorial: Apple "Wow" https://remotion.dev/learn/apple-wow by @MehmetAdemi in https://github.com/remotion-dev/remotion/pull/1614

Added a new video to Showcase by @AmitNemade in https://github.com/remotion-dev/remotion/pull/1610

Insert link to Learn section on website by @MehmetAdemi in https://github.com/remotion-dev/remotion/pull/1615

rename @remotion.dev instagram handle to @remotion by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1624

Update api.md by @UmungoBungo in https://github.com/remotion-dev/remotion/pull/1625

New Contributors

@AmitNemade made their first contribution in https://github.com/remotion-dev/remotion/pull/1610

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.18...v3.3.19
Source code(tar.gz)
Source code(zip)
v3.3.18(Dec 23, 2022)
What's Changed

Enable faster png encoding (preparing for Chrome v109) by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1604

Allow amplification of audio during render: https://www.remotion.dev/docs/audio/#allowamplificationduringrender by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1606

New template + Docs: Creating overlays in Remotion! https://remotion.dev/docs/overlay by @patsalv in https://github.com/remotion-dev/remotion/pull/1603

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.16...v3.3.17
Source code(tar.gz)
Source code(zip)
v3.3.16(Dec 21, 2022)
What's Changed

Loop audio and video with playbackRate correctly + correctly visualize it in timeline by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1594

Remove a superfluous getOrCreateBucket() call - makes start time for a Lambda render faster! by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1600

Website

New beginner tutorial! "Apple Wow": https://www.remotion.dev/learn/apple-wow

rename @remotion_dev twitter handle to @remotion by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1595

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.13...v3.3.16
Source code(tar.gz)
Source code(zip)
v3.3.13(Dec 18, 2022)
What's Changed

Newly created Remotion Lambda S3 buckets now include the region name in the bucket name, e.g remotionlambda-useast2-v9pz9hjk88. This enables to skip a region probing request that previously we had to do for every bucket and therefore the bucket detection can be made a lot faster. by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1591

remove --enable-extensions flag by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1590

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.12...v3.3.13
Source code(tar.gz)
Source code(zip)
v3.3.12(Dec 18, 2022)
What's Changed

Fix some GIFs only showing the first frame by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1583

Use URL time fragments for displaying the time in the video to make video loading more efficient by @faisalsayed10 in https://github.com/remotion-dev/remotion/pull/1582

don't give ESLint error on <Gif src={staticFile("gif.gif")}> by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1587

Fix audio being cut short when having a high playback rate by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1588

New Contributors

@faisalsayed10 made their first contribution in https://github.com/remotion-dev/remotion/pull/1582

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.11...v3.3.12
Source code(tar.gz)
Source code(zip)
v3.3.11(Dec 15, 2022)
What's Changed

Open project in IDE from menu and quick switcher by @orimdominic in https://github.com/remotion-dev/remotion/pull/1569

Allow to enable Chrome extensions during rendering by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1576

Post estimated render cost in Webhook response by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1577

Fix timeout while downloading large files by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1575

allow getRegions() to return only the regions that are enabled by default by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1579

fix ffprobe binary on macOS by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1581

Add .web.js to Webpack extensions for better RN support by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1568

Implement webpack polling option by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1578

Docs

fix: small errors by @0xflotus in https://github.com/remotion-dev/remotion/pull/1567

fix typo by @zavalit in https://github.com/remotion-dev/remotion/pull/1574

New Contributors

@zavalit made their first contribution in https://github.com/remotion-dev/remotion/pull/1574

@orimdominic made their first contribution in https://github.com/remotion-dev/remotion/pull/1569

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.10...v3.3.11
Source code(tar.gz)
Source code(zip)
v3.3.10(Dec 13, 2022)
What's Changed

Fix outputSizeInBytes for Lambda by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1558

exclude favicon from bundle by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1562

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.9...v3.3.10
Source code(tar.gz)
Source code(zip)
v3.3.9(Dec 9, 2022)
What's Changed

preload: New preloadImage() and preloadFont() methods in @remotion/preload by @jmaguirrei in https://github.com/remotion-dev/remotion/pull/1552

renderer: renderStill() is now also able to return a Buffer by @afzalsayed96 in https://github.com/remotion-dev/remotion/pull/1553

lambda: Support getting credentials via AWS profile by @alexey-pelykh in https://github.com/remotion-dev/remotion/pull/1542

lambda: Drop S3 Website option, don't require permission anymore by @alexey-pelykh in https://github.com/remotion-dev/remotion/pull/1554

three: Fix suspense loader for newer versions of R3F and react by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1555

lambda: getRenderProgress() now also returns output size

Docs

fix useCurrentPlayerFrame() hook by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1551

New Contributors

@jmaguirrei made their first contribution in https://github.com/remotion-dev/remotion/pull/1552

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.8...v3.3.9
Source code(tar.gz)
Source code(zip)
v3.3.8(Dec 7, 2022)
What's Changed

More granular and accurate Lambda progress reporting by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1549

Remotion Lamdba does not require the iam:GetUser role anymore by @alexey-pelykh in https://github.com/remotion-dev/remotion/pull/1544

New docs

How to create a component synchronizing the time with the player by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1545

Fix multiple versions warning, especially for Next 13 by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1547

Mention transparency in "Video vs OffthreadVideo" by @UmungoBungo in https://github.com/remotion-dev/remotion/pull/1548

New Contributors

@alexey-pelykh made their first contribution in https://github.com/remotion-dev/remotion/pull/1544

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.7...v3.3.8
Source code(tar.gz)
Source code(zip)
v3.3.7(Dec 5, 2022)
What's Changed

Incremental uploads for deploying Lambda sites! Don't reupload assets already on S3 by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1541

Support 11 more AWS regions: eu-west-3, eu-south-1, eu-north-1, us-west-1, af-south-1, ap-east-1, ap-northeast-2, ap-northeast-3, ca-central-1, me-south-1, sa-east-1 by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1539

Use Node 18 in Lambda and support more AWS regions by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1539

Don't download FFmpeg for linux on ARM64 by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1537

Fix "Cannot render Vp9 video with alpha channel" by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1540

New experts

Welcome Alex Fernandez as a Remotion Expert!: https://www.remotion.dev/experts/alex-fernandez @MehmetAdemi in https://github.com/remotion-dev/remotion/pull/1533

New docs

Changing the temporary directory https://www.remotion.dev/docs/miscellaneous/changing-temp-dir by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1534

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.6...v3.3.7
Source code(tar.gz)
Source code(zip)
v3.3.6(Dec 1, 2022)
What's Changed

Fix video renders breaking due to Chrome 108 upgrade by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1529

New projects now have a packageManager field to decrease likelihood of wrong package managers being used #1520 by @mykeels in https://github.com/remotion-dev/remotion/pull/1530

@remotion/paths: New getSubpaths() API (deprecated getParts): https://www.remotion.dev/docs/paths/get-subpaths by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1521

Website

Each documentation page now has a og:image preview card! by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1518

Add Funeral Collageshowcase video by @willhalling in https://github.com/remotion-dev/remotion/pull/1523

New Contributors

@willhalling made their first contribution in https://github.com/remotion-dev/remotion/pull/1523

@mykeels made their first contribution in https://github.com/remotion-dev/remotion/pull/1530

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.5...v3.3.6
Source code(tar.gz)
Source code(zip)
v3.3.5(Nov 28, 2022)
What's Changed

fix @remotion/google-fonts shipping without types by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1515

Update all AWS clients to address deprecation warning by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1510

Decode URL-encoded filenames from staticFile() by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1517

New documentation

We will create some articles with the aim to help you build video applications! A new article has been released:

How to scale user uploads with presigned URLs: https://www.remotion.dev/docs/presigned-urls

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.4...v3.3.5
Source code(tar.gz)
Source code(zip)
v3.3.4(Nov 24, 2022)
What's Changed

Expose style and ref in Series.Sequence and <Loop> by @afzalsayed96 in https://github.com/remotion-dev/remotion/pull/1507

Docs

add documentation for rendering from dataset: https://www.remotion.dev/docs/dataset-render by @ThePerfectSystem in https://github.com/remotion-dev/remotion/pull/1503

First article in a series of how to build apps with Remotion!: How to play user-provided videos! https://www.remotion.dev/docs/video-uploads by @patsalv in https://github.com/remotion-dev/remotion/pull/1497

doc: add entrypoint of lambda function in the faq by @Grummfy in https://github.com/remotion-dev/remotion/pull/1505

New Contributors

@ThePerfectSystem made their first contribution in https://github.com/remotion-dev/remotion/pull/1503

@Grummfy made their first contribution in https://github.com/remotion-dev/remotion/pull/1505

@afzalsayed96 made their first contribution in https://github.com/remotion-dev/remotion/pull/1507

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.3...v3.3.4
Source code(tar.gz)
Source code(zip)
v3.3.3(Nov 21, 2022)
What's Changed

Handle symlinks in public/ dir by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1500

Show progress of copying public dir by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1500

docs: link to remotion-transition-series repo by @marcusstenbeck in https://github.com/remotion-dev/remotion/pull/1501

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.2...v3.3.3
Source code(tar.gz)
Source code(zip)
v3.3.2(Nov 18, 2022)
What's Changed

New getCanExtractFramesFast() API: https://www.remotion.dev/docs/renderer/get-can-extract-frames-fast by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1493

New getCompositionsOnLambda() API and npx remotion lambda compositions command: https://www.remotion.dev/docs/lambda/getcompositionsonlambda by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1496

Allow to enable shared audio tags also in Remotion Preview: https://www.remotion.dev/docs/config#setnumberofsharedaudiotags by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1495

Handle 303 status code when downloading files by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1492

Better Type Safety for CLI params by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1494

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.1...v3.3.2
Source code(tar.gz)
Source code(zip)
v3.3.1(Nov 16, 2022)
What's Changed

Handle downloads getting stuck by throwing a timeout error by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1488

Make old node versions throw an error message by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1489

Fix bug in v3.3 where FFmpeg could get downloaded infinitely

fix: small typo error in docs by @0xflotus in https://github.com/remotion-dev/remotion/pull/1485

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.3.0...v3.3.1
Source code(tar.gz)
Source code(zip)
v3.3.0(Nov 15, 2022)
Proper blog post with all the changes is in the works!

What's Changed

It is not necessary to install FFmpeg anymore! https://www.remotion.dev/docs/ffmpeg @patsalv in https://github.com/remotion-dev/remotion/pull/1374

Automatic retries when a browser tab crashes by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1469

New conventions for project structure: src/Video.tsx was renamed to src/Root.tsx and RemotionVideo to RemotionRoot as Video was not a good name for the root file by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1477

Allow relative path for bundle() by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1479

Website

Individual Expert pages by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1480

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.2.44...v3.3.0
Source code(tar.gz)
Source code(zip)
v3.2.44(Nov 10, 2022)
What's Changed

Update ESBuild by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1467.

Bundler: Prevent cyclic references error.

Fix WebM video sometimes being shorter than expected on Lambda by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1474.

When passing --log=verbose, a Lambda render will not have it's artifacts cleaned up in order to make debugging easier.

renderMediaOnLambda and rendering on CLI with the verbose flag will print a URL to the AWS console S3 bucket page in order to inspect artifacts by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1474.

Website

https://www.remotion.dev/blog/seed-funding We raised CHF 180k to simplify programmatic video!

docs: remove misleading info by @marcusstenbeck in https://github.com/remotion-dev/remotion/pull/1466

Put more links so you find things more easily in the Lambda docs by @patsalv in https://github.com/remotion-dev/remotion/pull/1473

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.2.42...v3.2.44
Source code(tar.gz)
Source code(zip)
v3.2.42(Nov 5, 2022)
What's Changed

New acceptableTimeShiftInSeconds prop for video and audio tags by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1464

Fix <Video> tag getting a type error saying that "nonce" is missing

Website

Welcome our new expert Benjamin Jameson! https://www.remotion.dev/experts

New article: How to change the speed of a video over time: https://www.remotion.dev/docs/miscellaneous/snippets/accelerated-video by @kaf-lamed-beyt

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.2.41...v3.2.42
Source code(tar.gz)
Source code(zip)
v3.2.41(Nov 3, 2022)
What's Changed

New <Thumbnail /> component for rendering a still in your webapp! https://www.remotion.dev/docs/player/thumbnail by @Slashgear in https://github.com/remotion-dev/remotion/pull/1405

Retry to render a frame if renderFrames() crashes with Target closed by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1456

Fixes an issue where TypeScript would compain that nonce is not passed to <Audio> or <Video>

Website

Fix Remix template description by @rfoel in https://github.com/remotion-dev/remotion/pull/1454

fix: hot reload instead of fast refresh by @Just-Moh-it in https://github.com/remotion-dev/remotion/pull/1453

New Contributors

@rfoel made their first contribution in https://github.com/remotion-dev/remotion/pull/1454

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.2.40...v3.2.41
Source code(tar.gz)
Source code(zip)
v3.2.40(Oct 29, 2022)
What's Changed

New @remotion/google-fonts package! https://remotion.dev/docs/google-fonts by @ayatkyo in https://github.com/remotion-dev/remotion/pull/1446

You don't have to specify the entry point (src/index.tsx) anymore! by @JRavi2 in https://github.com/remotion-dev/remotion/pull/1448

Pass --height and --width during render to override the composition width! by @exitflynn in https://github.com/remotion-dev/remotion/pull/1427

New Remotion X Spline tutorial! https://remotion.dev/docs/spline by @pabloescoder in https://github.com/remotion-dev/remotion/pull/1429

Fix keyboard navigation in Remotion Preview by @arthurdenner in https://github.com/remotion-dev/remotion/pull/1447

New Contributors

@exitflynn made their first contribution in https://github.com/remotion-dev/remotion/pull/1427

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.2.39...v3.2.40
Source code(tar.gz)
Source code(zip)
v3.2.39(Oct 27, 2022)
What's Changed

New CameraMotionBlur component! https://www.remotion.dev/docs/motion-blur/camera-motion-blur by @marcusstenbeck in https://github.com/remotion-dev/remotion/pull/1443

Search documentation in the Remotion Preview! Press ? to start by @uragirii in https://github.com/remotion-dev/remotion/pull/1444

Rename <MotionBlur> to <Trail> by @marcusstenbeck in https://github.com/remotion-dev/remotion/pull/1443

lambda: Don't set expectedbucketowner if customCredentials

New Contributors

@neverything made their first contribution in https://github.com/remotion-dev/remotion/pull/1442

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.2.38...v3.2.39
Source code(tar.gz)
Source code(zip)
v3.2.38(Oct 26, 2022)
Fixes a bug in Remotion Lambda that would cause inputProps to be malformed in versions v3.2.35-v3.2.37

Fixes a bug in Remotion Lambda that would cause the timeout webhook to be fired prematurely

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.2.37...v3.2.38
Source code(tar.gz)
Source code(zip)
v3.2.37(Oct 25, 2022)
Fixed a bug in v3.2.35 and v3.2.36: Remotion Lambda does not retrieve input props correctly

Source code(tar.gz)
Source code(zip)
v3.2.36(Oct 25, 2022)
What's Changed

The from prop in <Sequence> is now optional! by @pabloescoder in https://github.com/remotion-dev/remotion/pull/1436

You don't have to pass a composition name to the CLI anymore - if you omit it, Remotion will ask you for it! by @Uzunov-Stefan in https://github.com/remotion-dev/remotion/pull/1438

@remotion/noise: Upgrade to [email protected] by @satelllte in https://github.com/remotion-dev/remotion/pull/1437

New Contributors

@pabloescoder made their first contribution in https://github.com/remotion-dev/remotion/pull/1436

@Uzunov-Stefan made their first contribution in https://github.com/remotion-dev/remotion/pull/1438

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.2.35...v3.2.36
Source code(tar.gz)
Source code(zip)
v3.2.35(Oct 22, 2022)
This version contains a bug in Remotion Lambda. Do use a newer version!

What's Changed

New Remix Starter Kit! Create your own video-generating SaaS: npx create-video --remix by @florentpergoud in https://github.com/remotion-dev/remotion/pull/1418

New Quick switcher! Press Cmd + K on Mac and Ctrl + K elsewhere in the Remotion Preview to quickly switch between compositions and execute actions! by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1428

Lift Lambda payload limit - now your input props can be bigger than 256K! by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1430

Make prefetch() work better in Safari: Bugfixes and allow base64 method for prefetch(): https://remotion.dev/docs/prefetch by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1425

Docs

Updated website footer by @MehmetAdemi in https://github.com/remotion-dev/remotion/pull/1407

New Contributors

@soumakkdev made their first contribution in https://github.com/remotion-dev/remotion/pull/1420

@florentpergoud made their first contribution in https://github.com/remotion-dev/remotion/pull/1421

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.2.34...v3.2.35
Source code(tar.gz)
Source code(zip)
v3.2.34(Oct 24, 2022)
What's Changed

Patch a bug that broke Lambda rendering in v3.2.33

Upgrade AWS clients by @JonnyBurger in https://github.com/remotion-dev/remotion/pull/1416

Full Changelog: https://github.com/remotion-dev/remotion/compare/v3.2.33...v3.2.34
Source code(tar.gz)
Source code(zip)