Support for generating screenshots and (experimental) PDF per page (#297)

options to enable archiving screenshots + PDF:
- add screenshot and PDF archiving checkboxes to settings
- if enabled, save 'urn:view' and 'urn:thumbnail', scaled via
offscreencanvas with same dimensions as Browsertrix (enabled by default)
- if enabled, save PDF with background using screen media mode
(experimental), saved with 'urn:pdf' prefix

Author: ikreymer

src/recorder.ts

@@ -58,6 +58,8 @@ class Recorder {
   archiveStorage = false;
   archiveCookies = false;
   archiveFlash = false;
+  archiveScreenshots = false;
+  archivePDF = false;
 
   _fetchQueue: FetchEntry[] = [];
 
@@ -158,6 +160,8 @@ class Recorder {
     this.archiveCookies = (await getLocalOption("archiveCookies")) === "1";
     this.archiveStorage = (await getLocalOption("archiveStorage")) === "1";
     this.archiveFlash = (await getLocalOption("archiveFlash")) === "1";
+    this.archiveScreenshots = (await getLocalOption("archiveScreenshots")) === "1";
+    this.archivePDF = (await getLocalOption("archivePDF")) === "1";
   }
 
   // @ts-expect-error - TS7006 - Parameter 'autorun' implicitly has an 'any' type.
@@ -930,6 +934,98 @@ class Recorder {
     return success;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async savePDF(pageInfo: any) {
+    // @ts-expect-error: ignore param
+    await this.send("Emulation.setEmulatedMedia", {type: "screen"});
+
+    // @ts-expect-error: ignore param
+    const resp = await this.send("Page.printToPDF", {printBackground: true});
+
+    // @ts-expect-error: ignore param
+    await this.send("Emulation.setEmulatedMedia", {type: ""});
+
+    const payload = Buffer.from(resp.data, "base64");
+    const mime = "application/pdf";
+
+    const fullData = {
+      url: "urn:pdf:" + pageInfo.url,
+      ts: new Date().getTime(),
+      status: 200,
+      statusText: "OK",
+      pageId: pageInfo.id,
+      mime,
+      respHeaders: {"Content-Type": mime, "Content-Length": payload.length + ""},
+      reqHeaders: {},
+      payload,
+      extraOpts: {resource: true},
+    };
+
+    console.log("pdf", payload.length);
+
+    // @ts-expect-error - TS2339 - Property '_doAddResource' does not exist on type 'Recorder'.
+    await this._doAddResource(fullData);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async saveScreenshot(pageInfo: any) {
+
+    // View Screenshot
+    const width = 1920;
+    const height = 1080;
+
+    // @ts-expect-error: ignore param
+    await this.send("Emulation.setDeviceMetricsOverride", {width, height, deviceScaleFactor: 0, mobile: false});
+    // @ts-expect-error: ignore param
+    const resp = await this.send("Page.captureScreenshot", {format: "png"});
+
+    const payload = Buffer.from(resp.data, "base64");
+    const blob = new Blob([payload], {type: "image/png"});
+
+    await this.send("Emulation.clearDeviceMetricsOverride");
+    
+    const mime = "image/png";
+
+    const fullData = {
+      url: "urn:view:" + pageInfo.url,
+      ts: new Date().getTime(),
+      status: 200,
+      statusText: "OK",
+      pageId: pageInfo.id,
+      mime,
+      respHeaders: {"Content-Type": mime, "Content-Length": payload.length + ""},
+      reqHeaders: {},
+      payload,
+      extraOpts: {resource: true},
+    };
+
+    const thumbWidth = 640;
+    const thumbHeight = 360;
+
+    const bitmap = await self.createImageBitmap(blob, {resizeWidth: thumbWidth, resizeHeight: thumbHeight});
+    
+    const canvas = new OffscreenCanvas(thumbWidth, thumbWidth);
+    const context = canvas.getContext("bitmaprenderer")!;
+    context.transferFromImageBitmap(bitmap);
+
+    const resizedBlob = await canvas.convertToBlob({type: "image/png"});
+
+    const thumbPayload = new Uint8Array(await resizedBlob.arrayBuffer());
+
+    const thumbData = {...fullData,
+      url: "urn:thumbnail:" + pageInfo.url,
+      respHeaders: {"Content-Type": mime, "Content-Length": thumbPayload.length + ""},
+      payload: thumbPayload
+    };
+    
+    // @ts-expect-error - TS2339 - Property '_doAddResource' does not exist on type 'Recorder'.
+    await this._doAddResource(fullData);
+
+
+    // @ts-expect-error - TS2339 - Property '_doAddResource' does not exist on type 'Recorder'.
+    await this._doAddResource(thumbData);
+  }
+
   async getFullText(finishing = false) {
     // @ts-expect-error - TS2339 - Property 'pageInfo' does not exist on type 'Recorder'. | TS2339 - Property 'pageInfo' does not exist on type 'Recorder'.
     if (!this.pageInfo?.url) {
@@ -1189,6 +1285,14 @@ class Recorder {
     // @ts-expect-error - TS2339 - Property 'pageInfo' does not exist on type 'Recorder'.
     const pageInfo = this.pageInfo;
 
+    if (this.archiveScreenshots) {
+      await this.saveScreenshot(pageInfo);
+    }
+
+    if (this.archivePDF) {
+      await this.savePDF(pageInfo);
+    }
+
     const [domSnapshot, favIcon] = await Promise.all([
       this.getFullText(),
       // @ts-expect-error - TS2339 - Property 'getFavIcon' does not exist on type 'Recorder'.

src/ui/app.ts

@@ -59,6 +59,8 @@ class ArchiveWebApp extends ReplayWebApp {
   archiveCookies: boolean | null = null;
   archiveStorage: boolean | null = null;
   archiveFlash: boolean | null = null;
+  archiveScreenshots: boolean | null = null;
+  archivePDF: boolean | null = null;
 
   showIpfsShareFailed = false;
 
@@ -124,6 +126,18 @@ class ArchiveWebApp extends ReplayWebApp {
     this.archiveStorage = (await getLocalOption("archiveStorage")) === "1";
 
     this.archiveFlash = (await getLocalOption("archiveFlash")) === "1";
+
+    const archiveScreenshots = await getLocalOption("archiveScreenshots");
+
+    // default to true if unset to enable screenshots!
+    if (archiveScreenshots === null || archiveScreenshots === undefined) {
+      await setLocalOption("archiveScreenshots", "1");
+      this.archiveScreenshots = true;
+    } else {
+      this.archiveScreenshots = archiveScreenshots === "1";
+    }
+
+    this.archivePDF = (await getLocalOption("archivePDF")) === "1";
   }
 
   async doBtrixLogin() {
@@ -1029,9 +1043,32 @@ class ArchiveWebApp extends ReplayWebApp {
         >
           ${this.settingsTab === "prefs"
             ? html`<fieldset>
-                <div class="is-size-6">
-                  Control archiving of optional extensions and sensitive browser
-                  data.
+                <div class="is-size-6 mt-4">
+                  Optional archiving features:
+                </div>
+                <div class="field is-size-6 mt-4">
+                  <input
+                    name="prefArchiveScreenshots"
+                    id="archiveScreenshots"
+                    class="checkbox"
+                    type="checkbox"
+                    ?checked="${this.archiveScreenshots}"
+                  /><span class="ml-1">Save Screenshots</span>
+                  <p class="is-size-7 mt-1">
+                    Save screenshot + thumbnail of every page on load. Screenshot will be saved as soon as page is done loading.
+                  </p>
+                </div>
+                <div class="field is-size-6 mt-4">
+                  <input
+                    name="prefArchivePDF"
+                    id="archivePDF"
+                    class="checkbox"
+                    type="checkbox"
+                    ?checked="${this.archivePDF}"
+                  /><span class="ml-1">Save PDFs</span>
+                  <p class="is-size-7 mt-1">
+                    Save PDF of each page after page loads (experimental).
+                  </p>
                 </div>
                 <div class="field is-size-6 mt-4">
                   <input
@@ -1047,6 +1084,10 @@ class ArchiveWebApp extends ReplayWebApp {
                     enable only when archiving websites that contain Flash.
                   </p>
                 </div>
+                <hr/>
+                <div class="is-size-6">
+                  Privacy related settings:
+                </div>
                 <div class="field is-size-6 mt-4">
                   <input
                     name="prefArchiveCookies"
@@ -1441,23 +1482,18 @@ class ArchiveWebApp extends ReplayWebApp {
       }
     }
 
-    const archiveCookies = this.renderRoot.querySelector("#archiveCookies");
-    const archiveStorage = this.renderRoot.querySelector("#archiveStorage");
-    const archiveFlash = this.renderRoot.querySelector("#archiveFlash");
-
-    if (archiveCookies) {
-      this.archiveCookies = (archiveCookies as HTMLInputElement).checked;
-      await setLocalOption("archiveCookies", this.archiveCookies ? "1" : "0");
-    }
+    const options = ["Cookies", "Storage", "Flash", "Screenshots", "PDF"];
 
-    if (archiveStorage) {
-      this.archiveStorage = (archiveStorage as HTMLInputElement).checked;
-      await setLocalOption("archiveStorage", this.archiveStorage ? "1" : "0");
-    }
+    for (const option of options) {
+      const name = "archive" + option;
+      const elem = this.renderRoot.querySelector("#" + name);
 
-    if (archiveFlash) {
-      this.archiveFlash = (archiveFlash as HTMLInputElement).checked;
-      await setLocalOption("archiveFlash", this.archiveFlash ? "1" : "0");
+      if (elem) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this as any)[name] = (elem as HTMLInputElement).checked;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        await setLocalOption(name, (this as any)[name] ? "1" : "0");
+      }
     }
 
     localStorage.setItem("settingsTab", this.settingsTab);