Skip to content

Instantly share code, notes, and snippets.

@erikhazzard
Created April 28, 2021 00:22
Show Gist options
  • Save erikhazzard/374f2b7fe004213594d6917e0e8d4fa5 to your computer and use it in GitHub Desktop.
Save erikhazzard/374f2b7fe004213594d6917e0e8d4fa5 to your computer and use it in GitHub Desktop.
module.exports.routeGetScreenshot = async function routeGetScreenshot (req, res) {
/**
* [GET] [/util/og/:roomId] This will return an image of a screen of
* the /util/og/:roomId endpoint
*/
// set the cache header to a more generous time, since this is used for share links and
// we don't want to be calling this 100k's time in a short period. Whatever this value is
// set to, it will returned a cached screenshot for that time period (in seconds). The trade
// off here is screenshot freshness with scale. NOTE: Most services cache OG images on their
// side, we can't rely on people always seeing the latest version regardless of how long
// we're caching for
helpers.setCacheHeaders(res, 60 * 8);
let roomId = ('' + req.param('roomId'));
// enable .png / .jpg to be passed in, just ignore it if it is
roomId = roomId.replace('.png', '').replace('.jpg', '');
const browser = await puppeteer.launch({
// NOTE: This must be true for localhost since it's a self signed cert.
// In other environments, it doesn't matter since we're just rendering the
// OG image from our own server
ignoreHTTPSErrors: true,
});
const page = await browser.newPage();
await page.setViewport({
// match width / height to OG image template
width: 1600,
height: 914,
deviceScaleFactor: 2, // higher values generate higher quality screenshots
});
// hit the og-card endpoint
// NOTE: change url based on your envs
let url = `https://hotline.co/util/og-card/${roomId}`;
if (NODE_ENV === 'local') {
url = `http://localhost:7000/util/og-card/${roomId}`;
}
// load the url
await page.goto(url);
// screenshot the page
const screenshot = await page.screenshot({
type: 'png',
encoding: 'binary'
});
await browser.close(); // make sure you close it!
// set headers so clients know it's an image
res.set('Content-Type', 'image/png');
res.set('Content-Length', screenshot.length);
// SEND IT
return res.send(screenshot);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment