@remotion/renderer: Correct flags for GPU rendering, update docs

.prettierrc.js

@@ -13,6 +13,7 @@ module.exports = {
 			files: ['*.md', '*.mdx'],
 			options: {
 				useTabs: false,
+				printWidth: 300,
 			},
 		},
 	],

packages/cli/src/browser-download-bar.ts

@@ -38,13 +38,20 @@ export const defaultBrowserDownloadProgress = ({
 	logLevel: LogLevel;
 	quiet: boolean;
 }): OnBrowserDownload => {
-	return () => {
-		Log.info(
-			{indent, logLevel},
-			chalk.gray(
-				'Downloading Chrome Headless Shell https://www.remotion.dev/chrome-headless-shell',
-			),
-		);
+	return ({chromeMode}) => {
+		if (chromeMode === 'chrome-for-testing') {
+			Log.info(
+				{indent, logLevel},
+				'Downloading Chrome for Testing https://www.remotion.dev/chrome-for-testing',
+			);
+		} else {
+			Log.info(
+				{indent, logLevel},
+				chalk.gray(
+					'Downloading Chrome Headless Shell https://www.remotion.dev/chrome-headless-shell',
+				),
+			);
+		}
 
 		const updatesDontOverwrite = shouldUseNonOverlayingLogger({logLevel});
 

packages/docs/docs/cli/benchmark.mdx

@@ -125,6 +125,10 @@ _optional_
 
 Inherited from [`npx remotion render`](/docs/cli/render#--gl)
 
+### `--chrome-mode`<AvailableFrom v="4.0.248" />
+
+<Options id="chrome-mode" />
+
 ### `--timeout`
 
 _optional_

packages/docs/docs/cli/browser/ensure.mdx

@@ -1,8 +1,8 @@
 ---
 image: /generated/articles-docs-cli-browser-ensure.png
 title: npx remotion browser ensure
-crumb: "@remotion/cli"
-sidebar_label: "ensure"
+crumb: '@remotion/cli'
+sidebar_label: 'ensure'
 ---
 
 # npx remotion browser ensure<AvailableFrom v="4.0.137" />
@@ -23,6 +23,10 @@ npx remotion browser ensure
 
 <Options id="log" cli />
 
+### `--chrome-mode`<AvailableFrom v="4.0.248" />
+
+<Options id="chrome-mode" />
+
 ## See also
 
 - [Source code for this command](https://github.com/remotion-dev/remotion/blob/main/packages/cli/src/browser/ensure.ts)

packages/docs/docs/cli/compositions.mdx

@@ -76,7 +76,7 @@ This will most notably disable CORS in Chrome among other security features.
 
 ### ~`--disable-headless?`~
 
-<Options id="disable-headless"  />
+<Options id="disable-headless" />
 
 ### `--enable-multiprocess-on-linux`<AvailableFrom v="4.0.42"/>
 
@@ -94,6 +94,10 @@ Lets you set a custom user agent that the headless Chrome browser assumes.
 
 <Options cli id="binaries-directory" />
 
+### `--chrome-mode`<AvailableFrom v="4.0.248" />
+
+<Options id="chrome-mode" />
+
 ### `--quiet`, `--q`
 
 Only prints the composition IDs, separated by a space.

packages/docs/docs/cli/gpu.mdx

@@ -35,6 +35,20 @@ WebGPU: Hardware accelerated
 
 The output should not be used for automated parsing, as it may change inbetween any Remotion and Chrome versions.
 
+## API
+
+### `--log`
+
+<Options id="log" />
+
+### `--gl`
+
+<Options id="gl" />
+
+### `--chrome-mode`<AvailableFrom v="4.0.248" />
+
+<Options id="chrome-mode" />
+
 ## See also
 
 - [Source code for this function](https://github.com/remotion-dev/remotion/blob/main/packages/cli/src/gpu.ts)

packages/docs/docs/cli/render.mdx

@@ -119,6 +119,10 @@ Sets the output file path, as an alternative to the `output-location` positional
 
 [Path to a Chrome executable](/docs/config#setbrowserexecutable). If not specified and Remotion cannot find one, it will download one during rendering.
 
+### `--chrome-mode`<AvailableFrom v="4.0.248" />
+
+<Options id="chrome-mode" />
+
 ### `--scale`
 
 [Scales the output frames by the factor you pass in.](/docs/scaling) For example, a 1280x720px frame will become a 1920x1080px frame with a scale factor of `1.5`. Vector elements like fonts and HTML markups will be rendered with extra details. `scale` must be greater than 0 and less than equal to 16. Default: `1`.

packages/docs/docs/cli/still.mdx

@@ -106,7 +106,11 @@ This will most notably disable CORS in Chrome among other security features.
 
 ### ~`--disable-headless`~<AvailableFrom v="2.6.5" />
 
-<Options id="disable-headless"  />
+<Options id="disable-headless" />
+
+### `--chrome-mode`<AvailableFrom v="4.0.248" />
+
+<Options id="chrome-mode" />
 
 ### `--gl`
 

packages/docs/docs/config.mdx

@@ -252,7 +252,19 @@ import {Config} from '@remotion/cli/config';
 Config.setChromiumMultiProcessOnLinux(true);
 ```
 
-The [command line flag](/docs/cli/render#--enable-multiprocess-on-linux) `--enable-multiprocess-on-linux` will take precedence over this option.
+## `setChromeMode()`<AvailableFrom v="4.0.248" />
+
+<Options id="chrome-mode" cli />
+
+```tsx twoslash title="remotion.config.ts"
+import {Config} from '@remotion/cli/config';
+
+// ---cut---
+
+Config.setChromeMode('chrome-for-testing');
+```
+
+The [command line flag](/docs/cli/render#--chrome-mode) `--chrome-mode` will take precedence over this option.
 
 ## `setChromiumOpenGlRenderer()`
 
@@ -767,18 +779,7 @@ import {Config} from '@remotion/cli/config';
 // ---cut---
 Config.overrideFfmpegCommand(({args}) => {
   // Define the custom FFmpeg options as an array of strings
-  const customFfmpegOptions = [
-    '-profile:v',
-    'main',
-    '-video_track_timescale',
-    '90000',
-    '-color_primaries',
-    'bt709',
-    '-color_trc',
-    'bt709',
-    '-strict',
-    'experimental',
-  ];
+  const customFfmpegOptions = ['-profile:v', 'main', '-video_track_timescale', '90000', '-color_primaries', 'bt709', '-color_trc', 'bt709', '-strict', 'experimental'];
   // The customFfmpegOptions are inserted before the last element to ensure
   // they appear before the ffmpeg's output path
   args.splice(args.length - 1, 0, ...customFfmpegOptions);

packages/docs/docs/miscellaneous/chrome-headless-shell.mdx

@@ -5,64 +5,91 @@ title: Chrome Headless Shell
 crumb: 'FAQ'
 ---
 
-# Chrome Headless Shell and Chrome for Testing<AvailableFrom v="4.0.247"/>
+# Installing Chrome <AvailableFrom v="4.0.247"/>
 
-There are two modes that Remotion can use to render videos:
-
-- **Chrome Headless Shell**: Is faster for CPU-bound video rendering, and requires less dependencies and setup.
-- **Chrome for Testing**: Is faster for GPU-bound video rendering. Emulates a display surface and therefore requires more dependencies and
-
-From v4.0.208, Remotion will download [Chrome Headless Shell](https://developer.chrome.com/blog/chrome-headless-shell) before the first render.  
-This will future-proof your Remotion project, because headless mode will be removed in a future version of Chrome.
+Remotion is automatically installing "Chrome Headless Shell" into your `node_modules` in order to render videos.
 
 ## Supported platforms
 
 The following platforms are supported:
 
 - macOS (x64 and arm64)
 - Windows (x64)
-- Linux (x64 and arm64) - [install the Linux dependencies](/docs/miscellaneous/linux-dependencies)
+- Linux x64 - [install the Linux dependencies](/docs/miscellaneous/linux-dependencies)
+- Linux arm64 - only for "Chrome Headless Shell"
 
-## Ensure Headless Shell is available
+## Ensure Chrome is installed
 
-There are two ways to ensure Chrome Headless Shell is available:
+There are two ways to ensure Chrome Headless Shell is installed:
 
 - [`npx remotion browser ensure`](/docs/cli/browser/ensure) on the command line
 - [`ensureBrowser()`](/docs/renderer/ensure-browser) as a Node.js / Bun API
 
 It is recommended use call these functions if you do server-side rendering.  
 That way, if a request comes in wanting to render a video, the browser is already downloaded and ready to go.
 
-## Bring your own binary
+## Using Chrome for Testing instead
 
-If you don't want Chrome Headless Shell to get installed or your platform is not supported, you need to specify your own Chromium-based browser:
+There are two flavors ("modes") that Remotion can use to render videos:
 
-- Using the [`setBrowserExecutable()`](/docs/config#setbrowserexecutable) option in the config file (for the CLI)
-- Using the [`browserExecutable`](/docs/renderer/render-media) option in [`renderMedia()`](/docs/renderer/render-media) and other SSR APIs
+- **Chrome Headless Shell**: Is faster for CPU-bound video rendering, and requires less dependencies and setup.
+- **Chrome for Testing**: Is faster for GPU-bound video rendering. Emulates a display surface and therefore requires more dependencies and resources.
 
-In [Lambda](/docs/lambda) and [Cloud Run](/docs/cloudrun), a version of Chrome is already installed, so you don't need to do anything.
+You should use Chrome for Testing **only** if you want to set up a [GPU-accelerated rendering environment on Linux](/docs/miscellaneous/cloud-gpu).
 
-:::note
-In a future version of Chrome, headless mode in the desktop browser will stop being supported and you will need to use the Chrome Headless Shell.
-:::
+In order to use Chrome for testing instead:
+
+**In the CLI**: Pass `--chrome-mode="chrome-for-testing"` to `npx remotion render`, `npx remotion benchmark`, `npx remotion compositions`, `npx remotion still`, `npx remotion gpu` and `npx remotion browser ensure`.
+
+**With the API**: Pass `chromeMode: 'chrome-for-testing'` to your `renderFrames()`, `renderMedia()`, `renderStill()`, `selectComposition()`, `getComposition()` and `ensureBrowser()` calls.
+
+**In the Studio**: Select "Chrome for Testing" in the "Chrome Mode" dropdown in the "Advanced" tab.
+
+**In the config file (only applies to the CLI and Studio)**: Set `Config.setChromeMode('chrome-for-testing')` in your `remotion.config.ts` file.
+
+**In Lambda and Cloud Run**: Not applicable, as Chrome for Testing is not supported.
 
 ## Download location
 
-Chrome Headless Shell will download to
+Chrome Headless Shell will download to this folder:
 
 ```
 node_modules/.remotion/chrome-headless-shell/[platform]/chrome-headless-shell-[platform]
 ```
 
+An executable `./chrome-headless-shell` (`.\chrome-headless-shell.exe` on Windows) will be created.
+
+<hr />
+
+Chrome for Testing will download to this folder:
+
+```
+node_modules/.remotion/chrome-for-testing/[platform]
+```
+
+The file structure inside this folder is varies by OS.
+
+<hr />
+
 `platform` can be one of `mac-arm64`, `mac-x64`, `linux64`, `linux-arm64` or `win64`.
 
-At this path, a folder with the necessary files will be created.  
-An executable `./chrome-headless-shell` (`.\chrome-headless-shell.exe` on Windows) will be created.
+## Bring your own binary
+
+If you don't want Chrome Headless Shell or Chrome for Testing to get installed or your platform is not supported, you need to specify your own Chromium-based browser:
+
+- Using the [`setBrowserExecutable()`](/docs/config#setbrowserexecutable) option in the config file (for the CLI)
+- Using the [`browserExecutable`](/docs/renderer/render-media) option in [`renderMedia()`](/docs/renderer/render-media) and other SSR APIs
 
-## Why this change?
+In [Lambda](/docs/lambda) and [Cloud Run](/docs/cloudrun), a version of Chrome is already installed, so you don't need to do anything.
+
+:::note
+In a future version of Chrome, headless mode in the desktop browser will stop being supported and you will need to use the Chrome Headless Shell.
+:::
+
+## Why does Remotion manage Chrome?
 
 Remotion previously used the desktop version of Chrome that many users had already installed.  
-This workflow is bound to break at some point, which is why Remotion is not picking up the desktop version of Chrome anymore.
+This workflow broke at some point, because Chrome removed the headless mode and extracted it to "Chrome Headless Shell".
 
 ## Best practices
 
@@ -103,6 +130,14 @@ If you are using [Remotion Lambda](/docs/lambda) or [Cloud Run](/docs/cloudrun),
 
 ## Previous changes
 
+### Added option to install Chrome Headless Shell (v4.0.247)
+
+In order to enable GPU-accelerated workloads on Linux, Remotion now allows you to install Chrome for Testing.
+
+### Migrated to Chrome Headless Shell
+
+Because Chrome removed the headless mode from the desktop browser, Remotion now uses Chrome Headless Shell.
+
 ### Thorium (v4.0.18 - v4.0.135)
 
 In these versions, if no local browser can be found, an instance of [Thorium](https://thorium.rocks/) is downloaded.

packages/docs/docs/miscellaneous/cloud-gpu-docker.mdx

@@ -2,9 +2,14 @@
 image: /generated/articles-docs-miscellaneous-cloud-gpu-docker.png
 title: Setup EC2 for Docker with GPU
 sidebar_label: GPU in the cloud (Docker)
-crumb: "FAQ"
+crumb: 'FAQ'
 ---
 
+:::note
+The guide is outdated and will not work anymore.  
+As of now, the [bare GPU guide](/docs/miscellaneous/cloud-gpu) is up to date.
+:::
+
 Follow these steps closely to render videos on EC2 in a Docker container.  
 These steps are opinionated, but specify a reference that works.
 
@@ -20,8 +25,7 @@ We recommend to first follow these instructions and make changes once you have a
 
 ## Setup EC2 for Docker with GPU
 
-<Step>1</Step> Follow the instructions for <a href="/docs/miscellaneous/cloud-gpu">GPUs on EC2</a>
-. You can skip installing Chrome, Node.js and cloning the repo to render a video.
+<Step>1</Step> Follow the instructions for <a href="/docs/miscellaneous/cloud-gpu">GPUs on EC2</a>. You can skip installing Chrome, Node.js and cloning the repo to render a video.
 
 <Step>2</Step> Install NVIDIA Container toolkit:
 
@@ -61,9 +65,7 @@ sudo nvidia-ctk runtime configure --runtime=docker
 sudo systemctl restart docker
 ```
 
-<Step>5</Step> Create two files, <code>Dockerfile</code> and <code>entrypoint.sh</code>
-. You can for example create them using the <code>nano ./file-to-create</code> command.
-Use <kbd>Ctrl</kbd>
+<Step>5</Step> Create two files, <code>Dockerfile</code> and <code>entrypoint.sh</code>. You can for example create them using the <code>nano ./file-to-create</code> command. Use <kbd>Ctrl</kbd>
 <kbd>X</kbd> to save and quit. <br />
 
 ```bash title="Dockerfile"
@@ -108,12 +110,12 @@ Use the [`npx remotion gpu`](/docs/cli/gpu) command to get the output of `chrome
 <Credits
   contributors={[
     {
-      username: "UmungoBungo",
-      contribution: "Workflow author",
+      username: 'UmungoBungo',
+      contribution: 'Workflow author',
     },
     {
-      username: "kaf-lamed-beyt",
-      contribution: "Writeup",
+      username: 'kaf-lamed-beyt',
+      contribution: 'Writeup',
     },
   ]}
 />