Are there any browser provided APIs to capture a screenshot of the dom of a page directly?

Question

I do not find any APIs to directly support the dom capture. But the html2canvas and kendo.drawing.drawDom libraries take a lot of resources which potentially impacts the performance of my application.

I am not able to run these in the Worker since the dom is needed for these libraries to work but Worker does not share the dom.

Since most browsers show the thumbnails view for recently visited pages(Firefox has the screenshot utility too) can we use this support?

My requirement is to capture the dom of a page opened ( in the background , otherwise it will impact app performane) when a user navigates to a page. I would not have control over the browser(it can be any browser) or the amount of time user going to stay on the page (the page may be hidden state [display: none or visibility: hidden]). I am using Jquery-3.1.1 and Kendo.Ui.

Answer 1

There is (to my knowledge) no official API to use the browsers' ScreenShot features.

Libraries that do parse and redraw the whole DOM are still the only cross-browser way to do it.

The nearest API is the being defined MediaCapture one.

Currently, only Firefox gives us access to something similar, through the MediaDevices.getUserMedia API, and chrome allows privileged code (extensions) to use an other implementation.

So for Firefox, you can already do something like

async function takeScreenshot() {
  const stream = await navigator.mediaDevices.getUserMedia(
    {
      video: {
        mediaSource: 'window'
      }
    }
  );
  const vid = document.createElement('video');
  vid.srcObject = stream;
  await vid.play();
  const canvas = document.createElement('canvas');
  canvas.width = vid.videoWidth;
  canvas.height = vid.videoHeight;
  canvas.getContext('2d').drawImage(vid, 0,0);
  stream.getTracks().forEach(t=>t.stop());
    return new Promise((res, rej) => {
    canvas.toBlob(res);
  });
}

Fiddle since I guess it won't work in over-protected StackSnippet®.