Merge pull request #145 from mean-weasel/fix/screen-capture-api-108

Add native viewport capture for complex pages

Author: neonwatty

e2e/widget.spec.ts

@@ -2202,6 +2202,17 @@ test.describe('Screenshot Crash Prevention (#67)', () => {
     }`;
   }
 
+  function mockGetDisplayMedia(page: Page, body: string) {
+    return page.addInitScript(`
+      Object.defineProperty(navigator, 'mediaDevices', {
+        value: {
+          getDisplayMedia: ${body}
+        },
+        configurable: true
+      });
+    `);
+  }
+
   function reporterLikePng(
     variant: 'preview-size' | 'small-wide-area' | 'annotation-style' | 'undo'
   ) {
@@ -2703,10 +2714,16 @@ test.describe('Screenshot Crash Prevention (#67)', () => {
 
   // --- Full-page disable threshold (10k+ nodes) ---
 
-  test('hides Full Page and Select Area buttons on very complex pages (>10k nodes)', async ({
+  test('hides Full Page and Select Area buttons on very complex pages without native viewport capture', async ({
     page,
   }) => {
     await mockHtmlToImage(page, spyToPng());
+    await page.addInitScript(() => {
+      Object.defineProperty(navigator, 'mediaDevices', {
+        value: {},
+        configurable: true,
+      });
+    });
     await page.goto('/test/complex-dom.html?nodes=12000');
 
     const nodeCount = await page.evaluate(() => document.body.querySelectorAll('*').length);
@@ -2726,6 +2743,177 @@ test.describe('Screenshot Crash Prevention (#67)', () => {
     await expect(notice).toBeVisible();
   });
 
+  test('offers native viewport capture on very complex secure-context pages', async ({ page }) => {
+    const payloads = await trackFeedbackPayloads(page);
+    await mockHtmlToImage(
+      page,
+      "function() { throw new Error('html-to-image should not run for viewport capture'); }"
+    );
+    await mockGetDisplayMedia(
+      page,
+      `function(opts) {
+        window.__viewportCaptureCalls = (window.__viewportCaptureCalls || 0) + 1;
+        window.__viewportCaptureUserActivation = navigator.userActivation.isActive;
+        window.__viewportCaptureOpts = opts;
+        var canvas = document.createElement('canvas');
+        canvas.width = 960;
+        canvas.height = 540;
+        var ctx = canvas.getContext('2d');
+        ctx.fillStyle = '#101827';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = '#22d3ee';
+        ctx.fillRect(40, 40, 880, 120);
+        ctx.fillStyle = '#ffffff';
+        ctx.font = 'bold 42px sans-serif';
+        ctx.fillText('Native viewport capture', 80, 115);
+        var stream = canvas.captureStream();
+        var track = stream.getVideoTracks()[0];
+        var originalStop = track.stop.bind(track);
+        track.getSettings = function() { return { displaySurface: 'browser' }; };
+        track.stop = function() {
+          window.__viewportTrackStops = (window.__viewportTrackStops || 0) + 1;
+          originalStop();
+        };
+        return Promise.resolve(stream);
+      }`
+    );
+    await page.goto('/test/complex-dom.html?nodes=12000');
+
+    const nodeCount = await page.evaluate(() => document.body.querySelectorAll('*').length);
+    expect(nodeCount).toBeGreaterThanOrEqual(10000);
+
+    const host = await navigateToScreenshotOptions(page);
+
+    const viewportBtn = host.locator('css=[data-action="viewport"]');
+    await expect(viewportBtn).toBeVisible();
+    await expect(viewportBtn).toHaveText('Capture Viewport');
+    await expect(host.locator('css=[data-action="capture"]')).not.toBeAttached();
+    await expect(host.locator('css=[data-action="area"]')).not.toBeAttached();
+    await expect(host.locator('css=p >> text=visible viewport')).toBeVisible();
+
+    await viewportBtn.click();
+
+    await expect(host.locator('css=.bd-modal--annotator')).toBeVisible({ timeout: 10000 });
+    await expect(host.locator('css=#annotation-canvas canvas')).toBeVisible();
+    await expect
+      .poll(() =>
+        page.evaluate(
+          () => (window as Window & { __viewportCaptureCalls?: number }).__viewportCaptureCalls || 0
+        )
+      )
+      .toBe(1);
+    await expect
+      .poll(() =>
+        page.evaluate(
+          () => (window as Window & { __viewportTrackStops?: number }).__viewportTrackStops || 0
+        )
+      )
+      .toBe(1);
+    const viewportCapture = await page.evaluate(() => {
+      const win = window as Window & {
+        __viewportCaptureOpts?: DisplayMediaStreamOptions & { preferCurrentTab?: boolean };
+        __viewportCaptureUserActivation?: boolean;
+      };
+      return {
+        opts: win.__viewportCaptureOpts,
+        userActivation: win.__viewportCaptureUserActivation,
+      };
+    });
+    expect(viewportCapture.userActivation).toBe(true);
+    expect(viewportCapture.opts).toEqual({
+      video: { displaySurface: 'browser' },
+      audio: false,
+      preferCurrentTab: true,
+    });
+    const captureOpts = await page.evaluate(
+      () => (window as Window & { __captureOpts?: unknown }).__captureOpts
+    );
+    expect(captureOpts).toBeUndefined();
+
+    await host.locator('css=[data-action="done"]').click();
+    await expect(host.locator('css=.bd-success-icon')).toBeVisible({ timeout: 10000 });
+    expect(payloads).toHaveLength(1);
+    expect(payloads[0].screenshot).toEqual(expect.stringMatching(/^data:image\/png;base64,/));
+  });
+
+  test('retries native viewport capture from the capture error modal', async ({ page }) => {
+    await mockGetDisplayMedia(
+      page,
+      `function() {
+        window.__viewportCaptureCalls = (window.__viewportCaptureCalls || 0) + 1;
+        if (window.__viewportCaptureCalls === 1) {
+          return Promise.reject(new Error('Permission denied'));
+        }
+        var canvas = document.createElement('canvas');
+        canvas.width = 2;
+        canvas.height = 2;
+        canvas.getContext('2d').fillRect(0, 0, 2, 2);
+        var stream = canvas.captureStream();
+        stream.getVideoTracks()[0].getSettings = function() { return { displaySurface: 'browser' }; };
+        return Promise.resolve(stream);
+      }`
+    );
+    await page.goto('/test/complex-dom.html?nodes=12000');
+
+    const host = await navigateToScreenshotOptions(page);
+    await host.locator('css=[data-action="viewport"]').click();
+
+    const errorText = host.locator('css=.bd-error-message__text');
+    await expect(errorText).toBeVisible({ timeout: 5000 });
+    await expect
+      .poll(() =>
+        page.evaluate(
+          () => (window as Window & { __viewportCaptureCalls?: number }).__viewportCaptureCalls || 0
+        )
+      )
+      .toBe(1);
+
+    await host.locator('css=[data-action="retry"]').click();
+
+    await expect(host.locator('css=.bd-modal--annotator')).toBeVisible({ timeout: 10000 });
+    await expect
+      .poll(() =>
+        page.evaluate(
+          () => (window as Window & { __viewportCaptureCalls?: number }).__viewportCaptureCalls || 0
+        )
+      )
+      .toBe(2);
+  });
+
+  test('rejects non-browser native capture surfaces before annotation', async ({ page }) => {
+    await mockGetDisplayMedia(
+      page,
+      `function() {
+        var canvas = document.createElement('canvas');
+        canvas.width = 2;
+        canvas.height = 2;
+        var stream = canvas.captureStream();
+        var track = stream.getVideoTracks()[0];
+        var originalStop = track.stop.bind(track);
+        track.getSettings = function() { return { displaySurface: 'monitor' }; };
+        track.stop = function() {
+          window.__viewportTrackStops = (window.__viewportTrackStops || 0) + 1;
+          originalStop();
+        };
+        return Promise.resolve(stream);
+      }`
+    );
+    await page.goto('/test/complex-dom.html?nodes=12000');
+
+    const host = await navigateToScreenshotOptions(page);
+    await host.locator('css=[data-action="viewport"]').click();
+
+    await expect(host.locator('css=.bd-error-message__text')).toBeVisible({ timeout: 5000 });
+    await expect(host.locator('css=.bd-modal--annotator')).not.toBeAttached();
+    await expect
+      .poll(() =>
+        page.evaluate(
+          () => (window as Window & { __viewportTrackStops?: number }).__viewportTrackStops || 0
+        )
+      )
+      .toBe(1);
+  });
+
   test('remembers complex-page screenshot skip for issue #116 repeated reports', async ({
     page,
   }) => {

src/widget/index.ts

@@ -1,4 +1,6 @@
 import {
+  beginViewportCapture,
+  canCaptureViewportNatively,
   captureScreenshot,
   cropScreenshot,
   FULL_PAGE_DISABLE_THRESHOLD,
@@ -85,6 +87,14 @@ interface FeedbackData {
   email?: string;
 }
 
+type ScreenshotChoice =
+  | 'skip'
+  | 'capture'
+  | 'element'
+  | 'area'
+  | 'cancel'
+  | { type: 'viewport'; capture: Promise<string> };
+
 // localStorage key for dismissed state
 const BUGDROP_DISMISSED_KEY = 'bugdrop_dismissed';
 const BUGDROP_WELCOMED_PREFIX = 'bugdrop_welcomed_';
@@ -741,7 +751,23 @@ async function openFeedbackFlow(
           theme: config.theme,
         };
 
-        if (screenshotChoice === 'capture') {
+        if (typeof screenshotChoice === 'object' && screenshotChoice.type === 'viewport') {
+          const result = await capturePromiseWithLoading(
+            root,
+            screenshotChoice.capture,
+            () => beginViewportCapture(),
+            {
+              allowSkip: !screenshotRequired,
+              showLoading: false,
+            }
+          );
+          if (result === 'cancel') {
+            returnToForm = true;
+            break;
+          }
+          if (!result && !screenshotRequired) rememberComplexScreenshotSkip(config, formResult);
+          screenshot = result;
+        } else if (screenshotChoice === 'capture') {
           const result = await captureWithLoading(root, undefined, config.screenshotScale, {
             allowSkip: !screenshotRequired,
           });
@@ -822,24 +848,41 @@ async function captureWithLoading(
   screenshotScale?: number,
   opts?: { allowSkip?: boolean }
 ): Promise<string | null | 'cancel'> {
-  // Show a temporary loading indicator
-  const loadingModal = createModal(
+  return capturePromiseWithLoading(
     root,
-    'Capturing...',
-    `
-      <div style="display: flex; flex-direction: column; align-items: center; padding: 20px;">
-        <div class="bd-spinner bd-spinner--lg"></div>
-        <p class="bd-loading-text" style="margin-top: 12px;">Capturing screenshot...</p>
-      </div>
-    `
+    captureScreenshot(element, screenshotScale),
+    () => captureScreenshot(element, screenshotScale),
+    opts
   );
+}
+
+async function capturePromiseWithLoading(
+  root: HTMLElement,
+  capturePromise: Promise<string>,
+  retryCapture: () => Promise<string>,
+  opts?: { allowSkip?: boolean; showLoading?: boolean }
+): Promise<string | null | 'cancel'> {
+  // Show a temporary loading indicator
+  const loadingModal =
+    opts?.showLoading === false
+      ? null
+      : createModal(
+          root,
+          'Capturing...',
+          `
+            <div style="display: flex; flex-direction: column; align-items: center; padding: 20px;">
+              <div class="bd-spinner bd-spinner--lg"></div>
+              <p class="bd-loading-text" style="margin-top: 12px;">Capturing screenshot...</p>
+            </div>
+          `
+        );
 
   try {
-    const screenshot = await captureScreenshot(element, screenshotScale);
-    loadingModal.remove();
+    const screenshot = await capturePromise;
+    loadingModal?.remove();
     return screenshot;
   } catch (_error) {
-    loadingModal.remove();
+    loadingModal?.remove();
     const allowSkip = opts?.allowSkip !== false;
 
     // Show error with retry option
@@ -878,7 +921,7 @@ async function captureWithLoading(
 
       retryBtn?.addEventListener('click', async () => {
         errorModal.remove();
-        const result = await captureWithLoading(root, element, screenshotScale, opts);
+        const result = await capturePromiseWithLoading(root, retryCapture(), retryCapture, opts);
         resolve(result);
       });
     });
@@ -1182,14 +1225,20 @@ function escapeHtml(value: string): string {
 function showScreenshotOptions(
   root: HTMLElement,
   opts?: { allowSkip?: boolean }
-): Promise<'skip' | 'capture' | 'element' | 'area' | 'cancel'> {
+): Promise<ScreenshotChoice> {
   const fullPageDisabled = isFullPageDisabled();
+  const nativeViewportAvailable = fullPageDisabled && canCaptureViewportNatively();
   const allowSkip = opts?.allowSkip !== false;
 
   return new Promise(resolve => {
     const complexNote = fullPageDisabled
-      ? `<p style="margin: 0 0 12px; padding: 8px 12px; background: var(--bd-bg-secondary, #f5f5f5); border-radius: 6px; font-size: 13px; color: var(--bd-text-secondary);">This page is too complex for full-page or area capture. Select a specific element instead.</p>`
+      ? `<p style="margin: 0 0 12px; padding: 8px 12px; background: var(--bd-bg-secondary, #f5f5f5); border-radius: 6px; font-size: 13px; color: var(--bd-text-secondary);">${nativeViewportAvailable ? 'This page is too complex for full-page or area capture. Capture the visible viewport or select a specific element instead.' : 'This page is too complex for full-page or area capture. Select a specific element instead.'}</p>`
       : '';
+    const primaryCaptureButton = fullPageDisabled
+      ? nativeViewportAvailable
+        ? '<button class="bd-btn bd-btn-primary" data-action="viewport">Capture Viewport</button>'
+        : ''
+      : '<button class="bd-btn bd-btn-primary" data-action="capture">Full Page</button>';
 
     const modal = createModal(
       root,
@@ -1198,7 +1247,7 @@ function showScreenshotOptions(
         <p style="margin: 0 0 16px; color: var(--bd-text-secondary);">Choose what to capture:</p>
         ${complexNote}
         <div class="bd-actions bd-screenshot-actions">
-          ${fullPageDisabled ? '' : '<button class="bd-btn bd-btn-primary" data-action="capture">Full Page</button>'}
+          ${primaryCaptureButton}
           ${fullPageDisabled ? '' : '<button class="bd-btn bd-btn-secondary" data-action="area">Select Area</button>'}
           <button class="bd-btn bd-btn-secondary" data-action="element">Select Element</button>
           ${allowSkip ? '<button class="bd-btn bd-btn-quiet" data-action="skip">Skip Screenshot</button>' : ''}
@@ -1211,6 +1260,7 @@ function showScreenshotOptions(
     const elementBtn = modal.querySelector('[data-action="element"]') as HTMLElement;
     const areaBtn = modal.querySelector('[data-action="area"]') as HTMLElement;
     const captureBtn = modal.querySelector('[data-action="capture"]') as HTMLElement;
+    const viewportBtn = modal.querySelector('[data-action="viewport"]') as HTMLElement;
 
     closeBtn?.addEventListener('click', () => {
       modal.remove();
@@ -1236,6 +1286,12 @@ function showScreenshotOptions(
       modal.remove();
       resolve('capture');
     });
+
+    viewportBtn?.addEventListener('click', () => {
+      modal.remove();
+      const capture = beginViewportCapture();
+      resolve({ type: 'viewport', capture });
+    });
   });
 }