Puppeteer Screenshot

src/hooks/use-collect.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-import { collectImageStats, addSite, getCache } from '@/lib/sites';
+import { collectImageStats, addSite, getCache, getSiteScreenshot } from '@/lib/sites';
 import { scrapeImagesFromWebsite } from '@/lib/scraping';
 import { log } from '@/lib/log';
 
@@ -70,10 +70,21 @@ export default function useCollect({ siteUrl }) {
 
         setSiteImages(images);
 
-        const { images: imagesResults, screenshot } = await collectImageStats({
-          images: images.map(({ original }) => original),
-          siteUrl
-        });
+        const [{ images: imagesResults }, { data }] = await Promise.all([
+          collectImageStats({
+            images: images.map(({ original }) => original),
+            siteUrl
+          }),
+          getSiteScreenshot({
+            siteUrl
+          })
+        ])
+
+        const screenshot = {
+          url: data.secure_url,
+          width: data.width,
+          height: data.height
+        };
 
         log(`[Collect] Collected image data and emissions results.`)
 

src/lib/sites.js

@@ -17,6 +17,24 @@ export async function collectImageStats({ images, siteUrl }) {
   }
 }
 
+/**
+ * getSiteScreenshot
+ */
+
+export async function getSiteScreenshot({ siteUrl }) {
+  try {
+    const results = await fetch('/api/screenshot', {
+      method: 'POST',
+      body: JSON.stringify({
+        siteUrl
+      })
+    }).then(r => r.json());
+    return results;
+  } catch(e) {
+    throw new Error(`Failed to get screenshot: ${e.message}`);
+  }
+}
+
 /**
  * addSite
  */

src/pages/api/collect.js

@@ -61,9 +61,9 @@ export default async function handler(req, res) {
 
 
     let uploads = await Promise.all(imagesQueue);
-    
+
     console.log(`[Collect] Uploads complete.`);
-    
+
     // Filter out failed image upload requests
 
     uploads = uploads.filter(upload => !!upload?.upload);
@@ -113,34 +113,10 @@ export default async function handler(req, res) {
       }
     }));
 
-    // Collect the screenshot, download, and upload it to make available to the client
-
-    const screenshotUrl = getCldImageUrl({
-      src: siteUrl,
-      deliveryType: 'url2png',
-      width: 800,
-      height: 600,
-      crop: 'fill',
-      gravity: 'north'
-    });
-
-    const screenshot = await cloudinary.uploader.upload(screenshotUrl, {
-      folder: 'imagecarbon',
-      tags: ['imagecarbon', `imagecarbon:site:${cleanSiteUrl}`, 'imagecarbon:screenshot'],
-      context: {
-        siteUrl
-      }
-    });
-
     res.status(200).json({
       siteUrl,
       date: new Date(Date.now()).toISOString(),
       images: results,
-      screenshot: {
-        url: screenshot.secure_url,
-        width: screenshot.width,
-        height: screenshot.height,
-      }
     });
   } catch(e) {
     console.log(`[${cleanSiteUrl}] Failed to collect image assets: ${e.message}`);

src/pages/api/screenshot.js

@@ -1,11 +1,17 @@
-const chromium = require('@sparticuz/chromium-min');
-const puppeteer = require('puppeteer-core');
+import chromium from '@sparticuz/chromium-min';
+import puppeteer from 'puppeteer-core';
+
+import { restoreUrl } from '@/lib/util';
+import { getCloudinary } from '@/lib/cloudinary-server';
+
+const cloudinary = getCloudinary();
 
 export default async function handler(req, res) {
+  const body = JSON.parse(req.body);
+  const siteUrl = restoreUrl(body.siteUrl);
+
   try {
-    await chromium.font(
-      "https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf"
-    );
+    await chromium.font('https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf');
 
     const isLocal = !!process.env.CHROME_EXECUTABLE_PATH;
 
@@ -18,17 +24,33 @@ export default async function handler(req, res) {
     });
 
     const page = await browser.newPage();
-console.log('new page')
-    await page.goto('https://spacejelly.dev/');
-console.log('asdf')
-    const title = await page.title();
 
-    console.log('title', title)
-
+    await page.goto(siteUrl);
+
+    const screenshot = await page.screenshot();
+
+    const resource = await new Promise((resolve, reject) => {
+      cloudinary.uploader.upload_stream({
+        folder: 'imagecarbon',
+        tags: ['imagecarbon', `imagecarbon:site:${siteUrl}`, 'imagecarbon:screenshot'],
+        context: {
+          siteUrl
+        }
+      }, function (error, result) {
+        if (error) {
+          reject(error);
+          return;
+        }
+        resolve(result);
+      })
+      .end(screenshot);
+    });
+
     await browser.close();
 
     res.status(200).json({
-      title
+      siteUrl,
+      data: resource
     });
   } catch(e) {
     console.log(`Failed to get screenshot: ${e.message}`);