diff --git a/packages/dockerfiles/.gitignore b/packages/dockerfiles/.gitignore new file mode 100644 index 00000000000..8c022c039c9 --- /dev/null +++ b/packages/dockerfiles/.gitignore @@ -0,0 +1 @@ +ensure-browser.mjs diff --git a/packages/dockerfiles/Dockerfile.al2023 b/packages/dockerfiles/Dockerfile.al2023 new file mode 100644 index 00000000000..c0647a0bab5 --- /dev/null +++ b/packages/dockerfiles/Dockerfile.al2023 @@ -0,0 +1,27 @@ +FROM amazonlinux:2023 + +WORKDIR /usr/app +RUN yum install git -y +RUN git clone https://github.com/remotion-dev/template-helloworld /usr/app +RUN cd /usr/app +RUN yum install nodejs -y +RUN npm i +RUN yum install -y \ + mesa-libgbm \ + libX11 \ + libXrandr \ + libdrm \ + libXdamage \ + libXfixes \ + dbus-libs \ + libXcomposite \ + alsa-lib \ + nss \ + dbus \ + at-spi2-core \ + atk \ + at-spi2-atk +COPY ensure-browser.mjs . +COPY ensure.mjs . +RUN node ensure.mjs +RUN npx remotion compositions diff --git a/packages/dockerfiles/Dockerfile.debian b/packages/dockerfiles/Dockerfile.debian new file mode 100644 index 00000000000..a77be2c1f82 --- /dev/null +++ b/packages/dockerfiles/Dockerfile.debian @@ -0,0 +1,20 @@ +FROM node:20-bookworm + +RUN apt-get update +WORKDIR /usr/app +RUN git clone https://github.com/remotion-dev/template-helloworld /usr/app +RUN cd /usr/app +RUN npm i +RUN apt install -y \ + libnss3 \ + libdbus-1-3 \ + libatk1.0-0 \ + libgbm-dev \ + libasound2 \ + libxrandr2 \ + libxkbcommon-dev \ + libxfixes3 \ + libxcomposite1 \ + libxdamage1 \ + libatk-bridge2.0-0 +RUN npx remotion compositions diff --git a/packages/dockerfiles/Dockerfile.ubuntu b/packages/dockerfiles/Dockerfile.ubuntu new file mode 100644 index 00000000000..b1a9cd7ad90 --- /dev/null +++ b/packages/dockerfiles/Dockerfile.ubuntu @@ -0,0 +1,23 @@ +FROM ubuntu:22.04 + +RUN apt-get update +RUN apt-get install git curl make -y +RUN curl -fsSL https://raw.githubusercontent.com/tj/n/master/bin/n | bash -s 20 +WORKDIR /usr/app +RUN git clone https://github.com/remotion-dev/template-helloworld /usr/app +RUN cd /usr/app +RUN npm i +RUN apt install -y \ + libnss3 \ + libdbus-1-3 \ + libatk1.0-0 \ + libasound2 \ + libxrandr2 \ + libxkbcommon-dev \ + libxfixes3 \ + libxcomposite1 \ + libxdamage1 \ + libgbm-dev \ + libatk-bridge2.0-0 + +RUN npx remotion compositions diff --git a/packages/dockerfiles/README.md b/packages/dockerfiles/README.md new file mode 100644 index 00000000000..120b50a4890 --- /dev/null +++ b/packages/dockerfiles/README.md @@ -0,0 +1,3 @@ +Sample Dockerfiles for different operating systems that show how to install Remotion including the browser. + +Uses `npx remotion browser ensure` to install the browser, which requires some shared libraries. diff --git a/packages/dockerfiles/ensure.mjs b/packages/dockerfiles/ensure.mjs new file mode 100644 index 00000000000..b5d510a516c --- /dev/null +++ b/packages/dockerfiles/ensure.mjs @@ -0,0 +1,3 @@ +import { ensureBrowser } from "./ensure-browser.mjs"; + +await ensureBrowser(); diff --git a/packages/dockerfiles/run.sh b/packages/dockerfiles/run.sh new file mode 100644 index 00000000000..2011d8ad006 --- /dev/null +++ b/packages/dockerfiles/run.sh @@ -0,0 +1,8 @@ +set -e +cd ../renderer +bun build-browser-downloader.ts +cp ensure-browser.mjs ../dockerfiles/ensure-browser.mjs +cd ../dockerfiles +docker build --file Dockerfile.al2023 . --output type=tar,dest=/dev/null --progress=plain +docker build --file Dockerfile.ubuntu . --output type=tar,dest=/dev/null --progress=plain +docker build --file Dockerfile.debian . --output type=tar,dest=/dev/null --progress=plain diff --git a/packages/docs/docs/cli/browser/ensure.mdx b/packages/docs/docs/cli/browser/ensure.mdx index 87cf0eb81d3..fe4c5b4ef6c 100644 --- a/packages/docs/docs/cli/browser/ensure.mdx +++ b/packages/docs/docs/cli/browser/ensure.mdx @@ -5,6 +5,8 @@ crumb: "@remotion/cli" sidebar_label: "ensure" --- +# npx remotion browser ensure + Ensures that Remotion has a browser it can use for rendering. ``` @@ -17,11 +19,12 @@ npx remotion browser ensure [Path to a custom Chrome executable](/docs/config#setbrowserexecutable). If not specified and Remotion cannot find one, one will be downloaded by this command. -### `--log` +### `--log` ## See also +- [Source code for this command](https://github.com/remotion-dev/remotion/blob/main/packages/cli/src/browser/ensure.ts) - [Chrome Headless Shell](/docs/miscellaneous/chrome-headless-shell) - [`ensureBrowser()`](/docs/renderer/ensure-browser) diff --git a/packages/docs/docs/getting-started.mdx b/packages/docs/docs/getting-started.mdx index eb40e2fd5a5..256923d7d96 100644 --- a/packages/docs/docs/getting-started.mdx +++ b/packages/docs/docs/getting-started.mdx @@ -16,7 +16,10 @@ To use Remotion, you need at least [Node](https://nodejs.org/en/download/) -```bash +```bash title="Use npm as the package manager" npx create-video@latest ``` -```bash +```bash title="Use pnpm as the package manager" pnpm create video ``` @@ -44,7 +47,7 @@ pnpm create video -```bash +```bash title="Use Yarn as the package manager" yarn create video ``` @@ -52,7 +55,7 @@ yarn create video -```bash +```bash title="Use Bun as the package manager and runtime" bun create video ``` @@ -63,7 +66,8 @@ Bun as a runtime is mostly supported. [Read more here](/docs/bun). -Choose the template that is most suitable for you. For your first project, we recommend the [Hello World](/templates/hello-world) template. +Choose the template that is most suitable for you. +For your first project, we recommend the [Hello World](/templates/hello-world) template. After the project has been scaffolded, we recommend to open the project in your text editor and starting the [Remotion Studio](/docs/studio): @@ -71,48 +75,8 @@ After the project has been scaffolded, we recommend to open the project in your npm start ``` -
- - -Additional information for Linux users - - -Linux users need to install some additional packages to get Chrome/Puppeteer working correctly. - - - - -```bash -pacman -S dconf alsa-lib atk glibc cairo libcups dbus expat fontconfig gcc gdk-pixbuf2 glib2 gtk3 nspr pango gcc-libs libx11 libxcomposite libxcursor libxdamage libxext libxfixes libxi libxrandr libxrender libxss libxtst ca-certificates ttf-liberation libappindicator-gtk3 nss lsb-release xdg-utils wget mesa -``` - - - - -```bash -apt install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libnss3 lsb-release xdg-utils wget libgbm-dev -``` - -:::note -Watch out for `apt` wanting to uninstall critical packages (e.g the Desktop) in order to install the Remotion dependencies. Abort the installation and seek help [in our Discord](https://remotion.dev/discord) if that happens! -::: - - - - - -Linux distros that use libc need at least version 2.31 of it. [Check here](https://github.com/remotion-dev/remotion/issues/2439) if your distro has it. - Got instructions for more Linux distributions? [Add them to this page](https://github.com/remotion-dev/remotion/edit/main/packages/docs/docs/getting-started.md)! -
- ## Installation in existing projects Want to install Remotion in an existing project? Go here instead: [Installation in existing projects](/docs/brownfield) diff --git a/packages/docs/docs/miscellaneous/linux-dependencies.mdx b/packages/docs/docs/miscellaneous/linux-dependencies.mdx new file mode 100644 index 00000000000..16721224e49 --- /dev/null +++ b/packages/docs/docs/miscellaneous/linux-dependencies.mdx @@ -0,0 +1,65 @@ +--- +sidebar_label: Linux Dependencies +title: Linux Dependencies +crumb: "FAQ" +--- + +If you are on Linux, Chrome Headless Shell requires some shared libraries to be installed. + +## Ubuntu + +```bash +RUN apt install -y \ + libnss3 \ + libdbus-1-3 \ + libatk1.0-0 \ + libasound2 \ + libxrandr2 \ + libxkbcommon-dev \ + libxfixes3 \ + libxcomposite1 \ + libxdamage1 \ + libgbm-dev \ + libatk-bridge2.0-0 +``` + +## Debian + +```bash +RUN apt install -y \ + libnss3 \ + libdbus-1-3 \ + libatk1.0-0 \ + libgbm-dev \ + libasound2 \ + libxrandr2 \ + libxkbcommon-dev \ + libxfixes3 \ + libxcomposite1 \ + libxdamage1 \ + libatk-bridge2.0-0 +``` + +## Amazon Linux 2023 + +```bash +RUN yum install -y \ + mesa-libgbm \ + libX11 \ + libXrandr\ + libdrm \ + libXdamage \ + libXfixes \ + dbus -libs\ + libXcomposite \ + alsa -lib \ + nss \ + dbus \ + at-spi2-core \ + atk \ + at-spi2-atk +``` + +## Alpine Linux + +Not supported due to to unsupported Libc symbols. diff --git a/packages/docs/docs/ssr-node.mdx b/packages/docs/docs/ssr-node.mdx index 4521fbfcd62..6b107a143bf 100644 --- a/packages/docs/docs/ssr-node.mdx +++ b/packages/docs/docs/ssr-node.mdx @@ -6,7 +6,7 @@ crumb: "Server-side rendering" sidebar_label: Example --- -The NPM package [`@remotion/renderer`](/docs/renderer) provides you with an API for rendering media programmatically. +The NPM package [`@remotion/renderer`](/docs/renderer) provides you with "**S**erver-**S**ide **R**endering" APIs for rendering media programmatically. These functions can be used in Node.js and Bun. Rendering a video takes three steps: @@ -16,8 +16,8 @@ Rendering a video takes three steps: 2 Select the composition to render and calculate its metadata
3 Render the video, audio, still or image sequence. -
-
+ +## Example script Follow this commented example to see how to render a video: @@ -75,6 +75,10 @@ This flow is customizable. Click on one of the SSR APIs to read about its option - [`stitchFramesToVideo()`](/docs/renderer/stitch-frames-to-video) - Encode a video based on an image sequence - [`openBrowser()`](/docs/renderer/open-browser) - Share a browser instance across function calls for improved performance. +## Linux Dependencies + +If you are on Linux, Chrome Headless Shell requires some shared libraries to be installed. See [Linux Dependencies](/docs/miscellaneous/linux-dependencies). + ## SSR APIs in Next.js If you are using Next.js, you will not be able to use `@remotion/bundler` because of the limitations explained in [Can I render videos in Next.js?](https://www.remotion.dev/docs/miscellaneous/vercel-functions#can-i-render-videos-in-nextjs) Refer to the page for possible alternatives. diff --git a/packages/docs/docs/troubleshooting/browser-launch.mdx b/packages/docs/docs/troubleshooting/browser-launch.mdx index 16a01f3e0ed..5148b7cca38 100644 --- a/packages/docs/docs/troubleshooting/browser-launch.mdx +++ b/packages/docs/docs/troubleshooting/browser-launch.mdx @@ -16,7 +16,7 @@ it means the browser was not able to start. The most common reasons are ## Missing shared libraries -Visit the [installation docs](/docs/) and make sure you installed the libraries outlined in "Additional information for Linux users". +Install the [missing shared libraries for your OS](/docs/miscellaneous/linux-dependencies). ## Wrong OS or architecture diff --git a/packages/docs/sidebars.js b/packages/docs/sidebars.js index 731220629e5..bd1c4e1aca2 100644 --- a/packages/docs/sidebars.js +++ b/packages/docs/sidebars.js @@ -913,6 +913,7 @@ module.exports = { "chromium-flags", "miscellaneous/changing-temp-dir", "miscellaneous/chrome-headless-shell", + "miscellaneous/linux-dependencies", "gl-options", "bun", "standalone", diff --git a/packages/renderer/.gitignore b/packages/renderer/.gitignore index 0347abdc2a4..1d7f0a7033d 100644 --- a/packages/renderer/.gitignore +++ b/packages/renderer/.gitignore @@ -1,2 +1,3 @@ target toolchains +ensure-browser.mjs diff --git a/packages/renderer/build-browser-downloader.ts b/packages/renderer/build-browser-downloader.ts new file mode 100644 index 00000000000..a6ee634c1ad --- /dev/null +++ b/packages/renderer/build-browser-downloader.ts @@ -0,0 +1,8 @@ +const out = await Bun.build({ + entrypoints: ['src/ensure-browser.ts'], + target: 'node', +}); + +Bun.write('ensure-browser.mjs', await out.outputs[0].arrayBuffer()); + +export {}; diff --git a/packages/renderer/src/browser/BrowserFetcher.ts b/packages/renderer/src/browser/BrowserFetcher.ts index 00d380cff00..a44459bd21d 100644 --- a/packages/renderer/src/browser/BrowserFetcher.ts +++ b/packages/renderer/src/browser/BrowserFetcher.ts @@ -30,8 +30,10 @@ import type {DownloadBrowserProgressFn} from '../options/on-browser-download'; import {getDownloadsCacheDir} from './get-download-destination'; const TESTED_VERSION = '123.0.6312.86'; +// https://github.com/microsoft/playwright/tree/v1.42.0 +const PLAYWRIGHT_VERSION = '1105'; // 123.0.6312.4 -type Platform = 'linux64' | 'mac-x64' | 'mac-arm64' | 'win64'; +type Platform = 'linux64' | 'linux-arm64' | 'mac-x64' | 'mac-arm64' | 'win64'; function getChromeDownloadUrl({ platform, @@ -40,6 +42,10 @@ function getChromeDownloadUrl({ platform: Platform; version: string | null; }): string { + if (platform === 'linux-arm64') { + return `https://playwright.azureedge.net/builds/chromium/${version ?? PLAYWRIGHT_VERSION}/chromium-linux-arm64.zip`; + } + return `https://storage.googleapis.com/chrome-for-testing-public/${ version ?? TESTED_VERSION }/${platform}/chrome-headless-shell-${platform}.zip`; @@ -69,7 +75,7 @@ const getPlatform = (): Platform => { case 'darwin': return os.arch() === 'arm64' ? 'mac-arm64' : 'mac-x64'; case 'linux': - return 'linux64'; + return os.arch() === 'arm64' ? 'linux-arm64' : 'linux64'; case 'win32': return 'win64'; default: @@ -115,14 +121,14 @@ export const downloadBrowser = async ({ }); } - // Use system Chromium builds on Linux ARM devices - if (os.platform() !== 'darwin' && os.arch() === 'arm64') { + if ( + os.platform() !== 'darwin' && + os.platform() !== 'linux' && + os.arch() === 'arm64' + ) { throw new Error( [ - 'Chrome Headless Shell is not available for Linux for arm64 architecture.', - 'If you are on Ubuntu, you can install with:', - 'sudo apt install chromium', - 'sudo apt install chromium-browser', + 'Chrome Headless Shell is not available for Windows for arm64 architecture.', ].join('\n'), ); } @@ -147,6 +153,23 @@ export const downloadBrowser = async ({ }); Log.info({indent, logLevel}); await extractZip(archivePath, {dir: outputPath}); + const chromePath = path.join(outputPath, 'chrome-linux', 'chrome'); + const chromeHeadlessShellPath = path.join( + outputPath, + 'chrome-linux', + 'chrome-headless-shell', + ); + if (fs.existsSync(chromePath)) { + fs.renameSync(chromePath, chromeHeadlessShellPath); + } + + const chromeLinuxFolder = path.join(outputPath, 'chrome-linux'); + if (fs.existsSync(chromeLinuxFolder)) { + fs.renameSync( + chromeLinuxFolder, + path.join(outputPath, 'chrome-headless-shell-linux-arm64'), + ); + } } finally { if (await existsAsync(archivePath)) { await unlinkAsync(archivePath); diff --git a/packages/renderer/src/browser/BrowserRunner.ts b/packages/renderer/src/browser/BrowserRunner.ts index 76acde61bc8..1160a8ae93d 100644 --- a/packages/renderer/src/browser/BrowserRunner.ts +++ b/packages/renderer/src/browser/BrowserRunner.ts @@ -258,7 +258,7 @@ function waitForWSEndpoint( return new Promise((resolve, reject) => { browserStderr.addListener('data', onData); - browserProcess.addListener('close', onClose); + browserStderr.addListener('close', onClose); const listeners = [ () => browserStderr.removeListener('data', onData), () => browserStderr.removeListener('close', onClose),