CODEWITHSUNDEEP
javascriptgoogle-chromefirefoxbrowserhtml2canvas
sampathsrini
sampathsrini

Reputation: 13

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

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.

Upvotes: 0

Views: 1648

Answers (2)

zemiacsik
zemiacsik

Reputation: 71

Ok, since I do not have 50 reputation to comment the answer.. this is just an extension of @Kaiido's answer.

If you want to make the fiddle work in Chrome, just change getUserMedia() for getDisplayMedia() on the second line of code (it will still work on Firefox).

Personally, I think getDisplayMedia() is probably more appropriate to use in this case, getDisplayMedia vs getUserMedia.

Upvotes: 0

Kaiido
Kaiido

Reputation: 136986

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®.

Upvotes: 2

Related Questions