Support for custom Puppeteer / Apple M1 support

[Iamshankhadeep]

fixes #39
Fixes #109
Fixes #131

To do

• test on windows (Just tested on windows on both bash and cmd.exe, seems to be working)
• test on mac (intel) and mac (M1)
• to write custom logic to locate chrome or chromium executable

[Iamshankhadeep]

Currently it works on the default chromium revision 848005.

[JonnyBurger]

Pretty impressive!

So this will only work if someone has exactly Chrome 84.8005 installed though? 🤔 Might be a bit too strict, maybe better to check for path (e.g. /Applications/Google Chrome.app)

[Iamshankhadeep]

actually 848005 corresponds to Chromium 90.0.4403.0.

To check for executable path for chrome or chromium for each os is a bit complicated than it seems. Figuring out how to write the script for chrome or chromium executable for each os.

Currently how it works (in linux) is that if you don't have the chormium executable in puppeteer-core it downloads the default Chromium 90.0.4403.0 in node-modules/puppeteer-core/.local-chromium and from the next time it automatically detects the executable path in .local-chromium and use that chromium executable.

[JonnyBurger]

Let's also have a setting in config file Config.Rendering.setChromiumExecutable() to let people define it!

[Iamshankhadeep]

Let's also have a setting in config file Config.Rendering.setChromiumExecutable() to let people define it!

will work on it.

[monophthongal]

Would this also make it possible to use H.264/MP4 videos with the <Video> component?

[Iamshankhadeep]

Would this also make it possible to use H.264/MP4 videos with the <Video> component?

No it won't. It will make yarn create video smaller in size and when you try to render the video it will download latest chromium and use it for rendering.

if you go to <Video/> api doc you can see this.

Please note that while H.264 video (the codec of MP4 videos) will show up during Preview, it will not work during render. This is because Puppeteer with Chromium is used during rendering, which does not ship with H.264 codecs. Convert your videos to a Chromium compatible format such as WebM instead.

I hope it helps. @monophthongal

[joshlit]

Would this also make it possible to use H.264/MP4 videos with the <Video> component?

No it won't. It will make yarn create video smaller in size and when you try to render the video it will download latest chromium and use it for rendering.

if you go to <Video/> api doc you can see this.

Please note that while H.264 video (the codec of MP4 videos) will show up during Preview, it will not work during render. This is because Puppeteer with Chromium is used during rendering, which does not ship with H.264 codecs. Convert your videos to a Chromium compatible format such as WebM instead.

I hope it helps. @monophthongal

According to https://stackoverflow.com/questions/47976790/play-mp4-in-chromium-with-puppeteer-windows it might, have you tested this? would be amazing as I don't really want to convert every mp4 to a webm since that's super slow

[Iamshankhadeep]

Would this also make it possible to use H.264/MP4 videos with the <Video> component?

No it won't. It will make yarn create video smaller in size and when you try to render the video it will download latest chromium and use it for rendering.
if you go to <Video/> api doc you can see this.
Please note that while H.264 video (the codec of MP4 videos) will show up during Preview, it will not work during render. This is because Puppeteer with Chromium is used during rendering, which does not ship with H.264 codecs. Convert your videos to a Chromium compatible format such as WebM instead.
I hope it helps. @monophthongal

According to https://stackoverflow.com/questions/47976790/play-mp4-in-chromium-with-puppeteer-windows it might, have you tested this? would be amazing as I don't really want to convert every mp4 to a webm since that's super slow

Thanks for the pointer. Now I think it will be possible @monophthongal will try to solve it asap. thank you @joshlatimer.

[JonnyBurger]

Looking and working well!

I did some things as well:

• Upgraded Puppeteer to 8.0.0
• Added some macOS paths to search for Chrome
• Ensure browser is there as the first thing when you render
• Made it generic and add support for Firefox but it does not yet work! FF has some bugs. So I put it behind a feature flag but I think we don't yet have to throw away the flag.
• disable no-mp4-import ESLint rule
• Config.Renderring.setChromiumExecutable() -> Config.Puppeteer.setBrowserExecutable() - more future proof in case we support Firefox and or support more puppeteer customization options

There are a few things still left to do:

• Add Windows and Ubuntu Chromium paths to search for (I will do this)
• Document setBrowserExecutable config
• Allow to configure via CLI: --browser-executable and document it
• Update docs and rewrite the MP4 import warning and explain it: It only happens when you have no Chrome installed. Also mention that the ESLint rule can be enabled

@Iamshankhadeep do you want to finish the PR off?

Thanks for this great PR! Works even better than I expected it could 😊 🙌

[Iamshankhadeep]

@Iamshankhadeep do you want to finish the PR off?

Yeah I will finish this PR and you can tweak later if needed. @JonnyBurger