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

Related tags

react video remotion
Overview

Discord Shield 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

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.

Issues
  • TimeoutError: waiting for function failed: timeout 30000ms exceeded

    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
  • Add audio support

    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
  • TTS example

    TTS example

    Issuehunt badges

    Would be great if there is support for converting text to speech automatically and include as part of the video output.


    IssueHunt Summary

    felippechemello felippechemello has been rewarded.

    Backers (Total: $115.00)

    Submitted pull Requests


    Tips

    :gift: Rewarded on Issuehunt 💙 developer experience templates 
    opened by Purus 17
  • Add twoslash to docs & migrate contents

    Add twoslash to docs & migrate contents

    This PR does

    • [x] Add proper Twoslash integration
    • [x] Make line highlighting work properly
    • [x] Add support for top-level await in code blocks
    • [x] Convert as much JSX API to TSX (done :tada:)
    • [x] Modularize the examples with Twoslash include blocks
    • [x] Handle imaginary imports with twoslash's multi-file system
    • [x] Add copy button to code blocks
    • ~Add syntax highlighting to type annotations?? (currently blocked by Twoslash)~

    Closes #447

    Help needed

    • [x] /parametrized-rendering contains two code blocks that don't compile
    • [x] /ssr contains a code blocks that don't import correct API
    • [x] Player API's first code block didn't complete all props so can't pass the compiler

    Remarks

    • A few code blocks from API sections that only show type definitions and don't have bodies are excluded since they can't pass compiler to migrate
    • /composition's lazy import can't be correctly typed
    opened by frencojobs 11
  • Video component jagged / jumpy in export

    Video component jagged / jumpy in export

    I have added a video a webm video to the project as per documentation. Once I export it misses frames and isn't smooth. Is there any special way to encode the video to make it work? Or is this a known problem?

    opened by TiborUdvari 11
  • Windows support

    Windows support

    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.

    image

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

    Thanks, nice project!

    opened by StefanWerW 11
  • Make the preview server's port configurable

    Make the preview server's port configurable

    Issuehunt badges

    Currently, the preview server chooses a port between 3000 and 3100 (ref). I use an express http proxy to make the preview page available and I can proxy to any port.

    The startServer occupies the "precious" 3000 port and it offers no configuration over this. It would be nice to have an optional port parameter and the express server would use that instead of finding a free port for itself.


    IssueHunt Summary

    mikaoelitiana mikaoelitiana has been rewarded.

    Backers (Total: $50.00)

    Submitted pull Requests


    Tips

    enhancement :gift: Rewarded on Issuehunt 
    opened by sashee 10
  • chore: create font-display: swap issue demo

    chore: create font-display: swap issue demo

    Relates to this comment.

    Steps to reproduce

    • Clone this branch (arthurdenner:feat/wait-for-fonts)
    • Run npm run build -- --watch in the packages/renderer folder
    • Run npm run render in the packages/example folder

    This will (hopefully) give you a video with a delayed font swapping, like the one below. PS: You may need to run the render two times - maybe some cache in the build process?

    Video

    https://user-images.githubusercontent.com/13774309/124334814-9702ff00-db98-11eb-8a41-f64a572332a2.mp4

    • Uncomment the await page.evaluateHandle('document.fonts.ready'); line (ref);
    • Verify the npm run build -- --watch output was updated just in case
    • Run npm run render in the packages/example folder

    This will (hopefully) give you a video without a delayed font swapping, like the one below, because we postpone rendering frames until fonts are ready. PS: You may need to run the render two times - maybe some cache in the build process?

    Video

    https://user-images.githubusercontent.com/13774309/124334972-0e389300-db99-11eb-840e-f4cdf3696d0e.mp4

    You can comment and uncomment the await page.evaluateHandle('document.fonts.ready'); line a few times. I was able to reproduce the bug and verify the proposed fix many times but sometimes I had to npm run render twice as mentioned above.

    opened by arthurdenner 10
  • Support for custom Puppeteer / Apple M1 support

    Support for custom Puppeteer / Apple M1 support

    fixes #39 Fixes #109 Fixes #131

    To do

    • [x] test on windows (Just tested on windows on both bash and cmd.exe, seems to be working)
    • [x] test on mac (intel) and mac (M1)
    • [x] to write custom logic to locate chrome or chromium executable
    opened by Iamshankhadeep 9
  • Player - doesn’t work in NextJS

    Player - doesn’t work in NextJS

    bug 
    opened by JonnyBurger 8
  • Document how to scale `<Player />`

    Document how to scale ``

    Very unclear that you have to pass compositionWidth and style.width props at the moment. what happens if you don't specify a style.

    opened by JonnyBurger 0
  • feat: multiple sources in Audio and Video components

    feat: multiple sources in Audio and Video components

    This is my take at #364 from a few months ago (26 July 2021). The approach is to leverage the HTML elements to make it work since they support multiple sources by default.

    I stopped working on it as someone else was assigned but their PR is stuck for some time now. I'm opening this as a draft because it needs to be rebased and tested in more scenarios. I plan to get back to it soon but feel free to have a look and provide feedback in the meantime if you're interested.

    opened by arthurdenner 0
  • [V3] Multi browser instance and Parallel Encoding mode

    [V3] Multi browser instance and Parallel Encoding mode

    PR for #584.

    /**
     * Set the concurrent mode.
     * Pass in 'tab' and the renderer will launch a single browser and pages will be opened in multiple tabs.
     * Pass in 'browser' and the renderer will launch multiple browsers and open one page in each browser.
     * Use 'browser' to maximize CPU utilization and render faster.
     */
    setConcurrentMode,
    
    /**
     * Enabling parallel encoding means render frames and encode video at the same time.
     * The image will be passed directly into ffmpeg.
     */
    setParallelEncoding,
    

    Test passed.

    TODO: documentation

    opened by yuyuyzl 1
  • [v3] no onError callback

    [v3] no onError callback

    When an error occurs in the React code, the render usually continues and times out. Users are currently expected to handle the scenario with the onError callback.

    This PR changes it that if an error occurs, the render gets aborted entirely and we clean up immediately. The renderFrames() and renderStill() methods will throw an error instead of passing the error to the onError callback.

    This will be a breaking change, therefore aiming to ship this in V3.

    opened by JonnyBurger 0
  • [v3] Allow to import in remotion.config.ts file

    [v3] Allow to import in remotion.config.ts file

    Allows to e.g. share webpack override between CLI and SSR

    opened by JonnyBurger 0
  • Simplify renderEntry.tsx

    Simplify renderEntry.tsx

    Looks like it's unnecessarily complicated

    opened by JonnyBurger 0
  • Parallel frame capturing and encoding for better performance

    Parallel frame capturing and encoding for better performance

    In fact i am using another project like Remotion to make some video to post. https://github.com/dtinth/html5-animation-video-renderer this is kind of a much simpler version of remotion, it only has a renderer and simply feeding ffmpeg with stdin https://github.com/dtinth/html5-animation-video-renderer/blob/master/render.js#L186

    After some benchmarking, as for me, it is 3x faster than remotion. I'm rendering only a moving title with some text-shadow, and animated it as below: document.querySelector("#title").style.transform=translate(${frame%300-150}px,${frame/300}px) btw im using a 5900x and 32g ram.

    In my opinion, the difference of raw performance between React and vanilla js cannot be avoided, but using memory instead of hard drive to store frames might be a good way to improve rendering performance.

    Feature Request 🛍️

    Parallel frame capturing and encoding for better performance.

    opened by yuyuyzl 11
  • WIP: add Waveform visualization api

    WIP: add Waveform visualization api

    fixes #421.

    opened by Iamshankhadeep 0
  • Ffmpeg wasm

    Ffmpeg wasm

    Feature Request 🛍️

    Use ffmpeg wasm instead of ffmpeg on server.

    Use Case

    Render remotion videos in the browser without a server.

    opened by thebetterjort 5
  • feat: initial closed captions support

    feat: initial closed captions support

    Context

    I was recently playing around with FFmpeg to embed SRT files as closed captions, merging them into the final video as subtitle tracks. Regarding FFmpeg, it's somewhat easy to do but I've found a couple of issues. I'm opening this draft PR so that others can have a look and we can start a discussion about an API for this if we see fit for the project.

    Changes

    • Reduced the number of frames for the remote-video demo for faster feedback loop;
    • Added an SRT file with 3 subtitles;
    • Resolved the path for the subtitle and added it to the list of FFmpeg inputs;
    • Added the FFmpeg flags to embed the subtitle into the final video;

    Notes

    • The final video has the duration of the subtitle, which is wrong and longer than the duration of frames;
    • 2:s is used before the subtitle is the third input. If there were more, it would change accordingly;
    • mov_text is needed to encode the SRT file and it's the only subtitle encoder supported in an MP4 container

    Demo

    Here is a video with the output of this branch/PR.

    PS: The video is cut so it doesn't show any info from my VLC but I hope it gives you a good picture of the result, including the duration bug.

    https://user-images.githubusercontent.com/13774309/129711372-ffc9be47-5fce-46da-b6d0-8c244139d6ba.mp4

    opened by arthurdenner 5
Releases(v2.3.4)
  • v2.3.4(Sep 18, 2021)

  • v2.3.3(Sep 6, 2021)

  • v2.3.2(Aug 30, 2021)

    • New <Series /> component #386
    • Warning if a video has an uneven width or height (invalid according to H264 spec) #575
    • <Player /> can now work around some audio tags not being played due to browser autoplay policies: https://remotion.dev/docs/player#numberofsharedaudiotags #554
    • Log level "error" is now better respected and does not output any logs #572
    Source code(tar.gz)
    Source code(zip)
  • v2.3.1(Aug 13, 2021)

    • renderStill(), renderFrames() and getCompositions() now all accept a browserExecutable parameter - you were already able to set it using a config file, but the Node.JS APIs were missing this functionality.
    • Upgrade to Puppeteer v10
    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Aug 11, 2021)

  • v2.2.4(Jul 30, 2021)

    • Fixes an issue where environment variables would not be set while fetching compositions
    • yarn create video / npm init video now lets you select between 4 templates!
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Jul 13, 2021)

    Read about the new features in Remotion 2.2 and all the changes since 2.1 here:

    https://www.remotion.dev/blog/2-2

    Highlights in this release:

    • <Freeze /> component
    • MKV export
    • Improvements to <Player />
    Source code(tar.gz)
    Source code(zip)
  • v2.1.12(Jun 24, 2021)

  • v2.1.11(Jun 15, 2021)

    • Can load TTF fonts from a local file
    • Fix JSX webpack config - fast refresh is working and node modules are not compiled anymore (potentially breaking, let us know if you have problems!)
    • Added new troubleshooting docs: https://remotion.dev/docs/flickering
    • Added new third party libraries docs: https://remotion.dev/docs/third-party
    • Added documentation on how to use with TailwindCSS: Custom Webpack config | Remotion
    • Fix no error being reported in getVideoMetadata() and getAudioDuration() #457
    • Fix a crash if process.env.NODE_ENV is not set (if you use @remotion/player)
    Source code(tar.gz)
    Source code(zip)
  • v2.1.10(Jun 13, 2021)

    • Fixed fast refresh not working on plain JS files
    • If your entry file is src/index.js, the config file can now be remotion.config.js.
    • You can set the timeline track limit using Config.Preview.setMaxTimelineTracks()
    • We have migrated from JonnyBurger/remotion to remotion-dev/remotion and have updated the links accordingly
    Source code(tar.gz)
    Source code(zip)
  • v2.1.8(Jun 8, 2021)

    • avoid an out of memory error when rendering a very long video
    • fix environment variables not being available immediately
    • pass inputProps to all composition components in preview mode
    • fix player not working on iOS 12
    • fix useVideoTexture causing server-side rendering to fail
    Source code(tar.gz)
    Source code(zip)
  • v2.1.7(Jun 3, 2021)

  • v2.1.6(Jun 1, 2021)

    • Added support for Apple ProRes export, see the updated Encoding guide, Transparent videos and CLI options pages.
    • Will warn if multiple versions of Remotion are imported on a page
    • player: Add doubleClickToFullscreen prop
    • Breaking change*: player: clickToPlay is only true by default if controls are enabled.
    • Warn if a non-seekable media file is imported.

    *We may do breaking changes in patch releases for features that are marked as experimental.

    Source code(tar.gz)
    Source code(zip)
  • v2.1.5(May 27, 2021)

    • Remotion would crash with Maximum call stack exceeded on very long (~8 hours) video
    • prevent really long sequence names taking up all space in the timeline
    • bugfix for broken gif component
    Source code(tar.gz)
    Source code(zip)
  • v2.1.4(May 20, 2021)

    • Make video and audio tags faster or slower with the playbackRate prop
    • --port CLI flag for overriding the default 3000 port
    • Player: Added props and methods for controlling volume https://www.remotion.dev/docs/player/
    • Encoding progress is fixed if video is longer than 10000 frames
    • Scroll position in the timeline gets persisted
    • Introduced experimental @remotion/three package - we will refine it before officially announcing it
    • Importing assets with same URL but different query string will not cause Remotion to think it's the same anymore
    • <Player /> has more strict prop validation
    • Setting crf to 0 is not allowed anymore for H264 because some operating systems cannot open the output file - we think it's best to disallow this setting as many people would shoot themselves in the foot by it.

    We also have a new homepage, with search and improved many documentation pages!

    Source code(tar.gz)
    Source code(zip)
  • v2.1.2(May 8, 2021)

    • Environment variables support: https://www.remotion.dev/docs/env-variables/
    • Fixes an issue where Remotion player could not be included in Create React App or Next.JS
    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(May 6, 2021)

  • v2.0.8(May 4, 2021)

    • New function! measureSpring()!
    • Improved CLI output, now error messages don't mix together anymore when using --log=verbose
    • Improved Node 16 / NPM7 support
    • Better timeout handling - now shows stack trace and points to documentation
    • Better handling when including media with proprietary codec in Chromium
    • Add more tests

    We also added many more pages to docs and now have a SSR API reference and a troubleshooting section in the docs.

    Source code(tar.gz)
    Source code(zip)
  • v2.0.7(Apr 28, 2021)

  • v2.0.6(Apr 28, 2021)

    • Fix error where input props are not properly passed while server side rendering
    • Added documentation for SSR APIs
    • Restructured renderer and bundler packages - internal APIs are not not directly exported but in a RenderInternals / BundlerInternals object.
    • Prettier CLI output
    • You can click to copy the upgrade command
    • npm init video will create a project with NPM, yarn create video creates a video with Yarn
    Source code(tar.gz)
    Source code(zip)
  • v2.0.5(Apr 22, 2021)

    • You can now assign refs to <Video> and <Audio> tags! #304
    • Fix a bug where assets with weird file names would crash the render #303
    • Fix a bug where audio filters would be applied to the wrong audio. #293
    • yarn create video will now create a Remotion project with yarn while npm init video will create a Remotion project with npm. #298
    • Fix Remotion installation being broken on Windows #302
    Source code(tar.gz)
    Source code(zip)
  • v2.0.4(Apr 20, 2021)

    • Persist preview size option in editor (Fit / 100% / 50%)
    • Fix an audio bug where the left and right channel get separated
    • CI now runs on FFMPEG 4.1 and 4.4
    Source code(tar.gz)
    Source code(zip)
  • v2.0.3(Apr 20, 2021)

    • New interpolateColor() function!
    • Added way more unit tests
    • Fix an editor infinite loop slowing things down a lot
    • add validation to sequence - from and durationInFrames must be integer
    • Add npm init video / yarn create video to homepage
    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Apr 17, 2021)

    • Refactored bundling pipeline - every render is roughly 5 seconds faster!
    • Removed loop prop from audio and video, because it was not doing anything.
    • Warn if your FFMPEG version is too low.
    • Cleaned up dependencies, smaller NPM packages - remotion package now has 0 dependencies
    • Fix some audio being processed in a wrong fashion
    • Fixed a bug on Windows where a too complex volume expression would cause a crash.
    • Remotion now has a --help flag in it’s CLI.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.1(Apr 16, 2021)

    • You can now control the log level. Set --log=verbose to get much more helpful debug info or in your config file: Config.Log.setLevel('verbose'). See: https://www.remotion.dev/docs/config/#setlevel
    • More locations for Chrome on Windows were added so less often a download of Puppeteer is necessary.
    • Fix a bug where the video would turn out too short if audio was added
    • Functions like interpolate are auto-imported
    • Check checkerboard / transparency option is enabled by default now.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Apr 15, 2021)

    Highlights:

    • Audio support: Include audio in your output!
    • Audio visualization: Make your visuals react to audio!
    • Export to MP3, WAV or AAC: Use Remotion to create audio!
    • @remotion/media-utils: Utility package for audio and video
    • Rich timeline (experimental): More visual timeline with more details!

    and much more! Read the blogpost for all changes: https://www.remotion.dev/blog/2-0

    Source code(tar.gz)
    Source code(zip)
  • v1.5.4(Apr 4, 2021)

  • v1.5.3(Mar 9, 2021)

    • Fixes an issue where video could get stuck at <Img> or <Video> tag with local source
    • Fixes an issue where <Video> would not play from start when looping in the preview
    Source code(tar.gz)
    Source code(zip)
  • v1.5.0(Mar 3, 2021)

    Read the blog post for more details: https://www.remotion.dev/blog/1-5

    Highlights

    • No more Chromium download necessary - Remotion will try to reuse Chrome if you have it installed
    • Improved Apple Silicon and WSL support
    • Smoother timeline
    • Failing to render a frame now exits the process.
    • Rendering frames now use the same domain as during development http://localhost:3000 to make CORS easier.
    Source code(tar.gz)
    Source code(zip)
  • v1.4.2(Mar 2, 2021)

Owner
Jonny Burger
JavaScript Hacker.
Jonny Burger
Ready-to-deploy webapp for sharing home videos: a React frontend with a Serverless Framework / AWS Lambda backend using FFmpeg to process videos.

Serverless Media Portal ?? What is this? This repo contains the full stack for creating a private, password-protected website for sharing home videos

null 81 Sep 6, 2021
Create videos using React!

Reactive Videos are videos created using HTML and React components. This allows you to leverage the almost limitless possibilities of the web browser

Mikael Finstad 30 Aug 29, 2021
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

ReactPlayer A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, M

Pete Cook 5.7k Sep 22, 2021
Ready to go Media Player Component for React.

react-media-viewer Ready to go Media Player Component for React. Supported Source: YouTube SoundCloud Facebook Vimeo Twitch Streamable Wistia DailyMot

Eric Lam 3 Sep 14, 2021
Moon Design System

Moon Design System

Coingaming 64 Sep 22, 2021
Dailymotion player component for React.

react-dailymotion Dailymotion player component for React. Install - Usage - Demo - Props Install npm install --save react-dailymotion Usage Demo - De

üWave 13 Apr 29, 2021
A collaboration application built with the twilio-video.js SDK and React.js

A collaboration application built with the twilio-video.js SDK and React.js

Twilio 1.5k Sep 22, 2021
a collection of simple demos of React.js

This is a collection of simple demos of React.js. These demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful library.

Ruan YiFeng 15.8k Sep 16, 2021
Audio player hooks & Utility Classes to play audio files, using libraries react-native-video, rxjs, with playlist handling, player controls.

react-native-audio-player-hooks Audio player hooks & Utility Classes to play audio files, using libraries react-native-video rxjs, with playlist handl

Fateh Farooqui 30 Sep 22, 2021
🌟 ᴛʜɪꜱ ɪꜱ ᴍʏ ᴍᴜꜱɪᴄ ʜᴏꜱᴛᴇʀ ᴀᴘᴘʟɪᴄᴀᴛɪᴏɴ ᴡʜᴇʀᴇ ɪ ᴜꜱᴇᴅ ʀᴇᴀᴄᴛ ᴊꜱ ꜰᴏʀ ʙᴜɪʟᴛ ɪᴛꜱ ꜰʀᴏɴᴛᴇɴᴅ 💻 🎯 🚀

?? ᴛʜɪꜱ ɪꜱ ᴍʏ ᴍᴜꜱɪᴄ ʜᴏꜱᴛᴇʀ ᴀᴘᴘʟɪᴄᴀᴛɪᴏɴ ᴡʜᴇʀᴇ ɪ ᴜꜱᴇᴅ ʀᴇᴀᴄᴛ ᴊꜱ ꜰᴏʀ ʙᴜɪʟᴛ ɪᴛꜱ ꜰʀᴏɴᴛᴇɴᴅ ?? ?? ??

Ashish Kumar 14 Jul 18, 2021
🍭 Marshmallow React components

?? Marshmallow React components

Marshmallow 13 Sep 16, 2021
JoL-player - Simple, beautiful and powerful react player

JoL-player Simple, beautiful and powerful react player English | 简体中文 ✨ Characteristics ?? High-quality React components out of the box. ?? Use TypeSc

null 68 Sep 24, 2021
A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

null 2.2k Sep 22, 2021
基于Electron、React开发的全网在线免费VIP视频解析播放器,美剧、韩剧、日剧全资源,全平台(Windows、Linux、MacOS)可用

TOMATOX A Online video player with TypeScript, React, and Electron. ?? 全网在线VIP视频解析 ?? 贯彻精致简洁的设计风格 ?? PC全平台支持(Windows, Linux, MacOS) ✨ 新功能陆续上线中... Abou

Freeless 28 Sep 1, 2021
A real-time transcription project using React and socketio

A real-time transcription project using React and a socketio python server. The goal of this project is to enable developers to create web demos and speech2text prototypes with just a few lines of code. Examples can be medical dictation apps, a note-taking CRM for entrepreneurs, etc.

Sahar 88 Sep 21, 2021
Lion Player - open-source React video player powered by VideoJS

Lion Player - open-source React video player powered by VideoJS

Prince Neil Cedrick Castro 18 Jul 14, 2021
📻 Create custom web audio players with React

react-soundplayer Create highly-customizable SoundCloud (or any audio) players with React.js. Documentation Install npm install react-soundplayer --sa

KOSMETISM 1.4k Sep 24, 2021
An iPod Classic that connects to Apple Music and Spotify. Built with React & Styled Components

An iPod Classic that connects to Apple Music and Spotify. Built with React & Styled Components

Tanner Villarete 1000 Sep 13, 2021
A React Hook for playing sound effects

A React Hook for playing sound effects

Joshua Comeau 1.5k Sep 24, 2021