puppeteer: Can't take screenshot with emoji on Firebase Cloud Functions

Steps to reproduce

Tell us about your environment:

Puppeteer version: 1.12.2
Platform / OS version: Firebase
URLs (if applicable):
Node.js version: 8

What steps will reproduce the problem? ` import * as functions from ‘firebase-functions’; import * as admin from ‘firebase-admin’; admin.initializeApp(); const storage = admin.storage(); const puppeteer = require(‘puppeteer’);

function screenshot() {
    (async () => {
      const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
      const page = await browser.newPage();
      await page.goto("https://getemoji.com/"); //go to emoji page
      await page.screenshot({
        path: '/tmp/screenshot.png',
        omitBackground: true,
      })
      .then(() => {
        // upload screenshot to firebase storage
        storage.bucket('bucketName').upload('/tmp/screenshot.png')
        .then(() => {
          console.log("success");
        })
        .catch(error => {
          console.log(error);
        });
      })
      .catch(e => {
        console.log(e);
      });
    })();
}

create HTTP Cloud Function
call the screenshot function inside of the HTTP function

What is the expected result? screenshot.png is uploaded to storage, and can see emoji clearly in the image

What happens instead? screenshot.png is uploaded to storage, but can’t see emoji in the image.

here is the result screenshot of “https://getemoji.com/”:

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 10
Comments: 16 (3 by maintainers)

Most upvoted comments

I had the same issue Puppeteer/headless Chrome rendering emojis as □□□□

For those that are looking for a workaround, here is what worked for me, copy the font file in the local fonts folder:

sudo su

#check if font is installed
fc-match "Noto Color Emoji"

#if not installed install with following line
apt-get install fonts-noto-color-emoji -y

#font will be in shared folder but puppeteer looks into local folder so copy the font there

#create folder and copy file
mkdir -p /usr/local/share/fonts
cp /usr/share/fonts/truetype/noto/NotoColorEmoji.ttf /usr/local/share/fonts/
chmod 644 /usr/local/share/fonts/NotoColorEmoji.ttf

#clear font cache
fc-cache -fv

Hope this helps if anybody has the same issue

C0retek on Apr 13, 2020

You can use puppeteer like this :

import * as functions from 'firebase-functions';
import * as puppeteerCore from 'puppeteer-core';
import * as puppeteer from 'puppeteer';
import * as chromium from 'chrome-aws-lambda';
const cors = require('cors')({ origin: true });

async function getBrowser() {
    try {
        console.log('Starting puppeteer on GCP chromium');

        return await puppeteerCore.launch({
            args: [...chromium.args, '--disable-web-security'],
            defaultViewport: chromium.defaultViewport,
            executablePath: await chromium.executablePath
        });
    } catch (e) {
        console.log('Failed to start gcp pupeteer , starting regular pupeteer');
        return puppeteer.launch({ args: ['--no-sandbox'] });
    }
}

export const yourFunction = functions
    .runWith({
        memory: '2GB',
        timeoutSeconds: 300
    })
    .https.onRequest((req, res) => {
        return cors(req, res, async () => {
                const browser = await getBrowser();
                await chromium.font('https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf');
                // do what you want here to get your pdf
})

The bad side to this is that the PDF will be much heavier (I guess that it is because of the size of the font).

Edit: I use this to get PDF but I guess that it will also work for screenshots

How would you avoid using the chromium import from aws-lambda in case of google cloud functions?

vojkny on Mar 10, 2022

@VincentCtr sounds interesting 👍

what’s chromium? an import? a local variable?

peterpeterparker on Aug 10, 2020

Hi Guys,

Fixed it using this small line of code. Hope it will help.

await chromium.font('https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf');

VincentCtr on Aug 10, 2020

@steren surprisingly, I don’t have permissions to create new issue.

But the font identifies itself as “Noto Emoji” for me on Linux. I’d guess installing both https://github.com/googlei18n/noto-emoji and https://github.com/googlei18n/noto-fonts should cover all the needs.

aslushnikov on Mar 1, 2019