Support for custom Puppeteer / Apple M1 support

packages/renderer/package.json

@@ -22,7 +22,7 @@
 		"@types/babel__template": "^7.4.0",
 		"execa": "^4.0.2",
 		"prettier": "^2.0.5",
-		"puppeteer": "^7.1.0",
+		"puppeteer-core": "^7.1.0",
 		"remotion": "^1.3.0",
 		"typescript": "^4.1.2",
 		"webpack": "5.20.1",

packages/renderer/src/get-compositions.ts

@@ -1,10 +1,16 @@
-import puppeteer from 'puppeteer';
+import puppeteer from 'puppeteer-core';
 import {TCompMetadata} from 'remotion';
+import {getLocalChromiumExecutable} from './get-local-chromium-executable';
 
 export const getCompositions = async (
 	webpackBundle: string
 ): Promise<TCompMetadata[]> => {
-	const browser = await puppeteer.launch();
+	const executablePath = await getLocalChromiumExecutable();
+	console.log(executablePath);
+	const browser = await puppeteer.launch({
+		executablePath,
+		args: ['--no-sandbox', '--disable-setuid-sandbox'],
+	});
 	const page = await browser.newPage();
 
 	await page.goto(`file://${webpackBundle}/index.html?evaluation=true`);

packages/renderer/src/get-local-chromium-executable.ts

@@ -0,0 +1,25 @@
+import puppeteer from 'puppeteer-core';
+import puppeteer_node from 'puppeteer-core/lib/cjs/puppeteer/node';
+import {downloadBrowser} from 'puppeteer-core/lib/cjs/puppeteer/node/install';
+
+const getLocalRevision = (): puppeteer.BrowserFetcherRevisionInfo => {
+	const productName = 'chrome';
+	const browserFetcher = puppeteer_node.createBrowserFetcher({
+		product: productName,
+		host: 'https://storage.googleapis.com',
+	});
+	const revisionInfo = browserFetcher.revisionInfo('848005');
+
+	return revisionInfo;
+};
+
+export const getLocalChromiumExecutable = async (): Promise<string> => {
+	const localRevision = getLocalRevision();
+	if (localRevision.local) {
+		return localRevision.executablePath;
+	} else {
+		await downloadBrowser();
+		const downloadedLocalRevision = getLocalRevision();
+		return downloadedLocalRevision.executablePath;
+	}
+};

packages/renderer/src/index.ts

@@ -1,4 +1,5 @@
-import puppeteer from 'puppeteer';
+import puppeteer from 'puppeteer-core';
+import {getLocalChromiumExecutable} from './get-local-chromium-executable';
 import {ImageFormat} from './image-format';
 import {screenshot} from './puppeteer-screenshot';
 
@@ -34,7 +35,9 @@ async function screenshotDOMElement({
 }
 
 export const openBrowser = async (): Promise<puppeteer.Browser> => {
+	const executablePath = await getLocalChromiumExecutable();
 	const browser = await puppeteer.launch({
+		executablePath,
 		args: [
 			'--no-sandbox',
 			'--disable-setuid-sandbox',

packages/renderer/src/puppeteer-screenshot.ts

@@ -1,5 +1,5 @@
 import * as assert from 'assert';
-import {Page, ScreenshotOptions} from 'puppeteer';
+import {Page, ScreenshotOptions} from 'puppeteer-core';
 import {_screenshotTask} from './screenshot-task';
 
 export const screenshot = async (

packages/renderer/src/screenshot-task.ts

@@ -1,5 +1,5 @@
 import fs from 'fs';
-import {Page, ScreenshotOptions} from 'puppeteer';
+import {Page, ScreenshotOptions} from 'puppeteer-core';
 import {Internals} from 'remotion';
 
 export const _screenshotTask = async (