0

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.

sampathsrini
  • 13
  • 6
  • try this https://gist.github.com/malyw/b4e8284e42fdaeceab9a67a9b0263743 – Gufran Hasan Apr 02 '18 at 05:27
  • @GufranHasan can this be used with any browser? My requirement is to take a screenshot of the page opened when a user navigates to a page. I would not have control over the browser or the amount of time user going to stay on the page. Also, it is not a browser side framework, right? I am just using kendo, jquery and jquery-ui in my application. – sampathsrini Apr 02 '18 at 05:54

2 Answers2

2

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

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Thanks. But fiddle does not work in chrome. I need to implement this for chrome, safari, firefox, and IE. I have seen [browser.tabs.captureVisibleView()](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/captureVisibleTab), but it does not work. – sampathsrini Apr 02 '18 at 07:27
  • @sampathsrini did you read the answer? It is stated that it currently is availbale **only in Firefox**. The link you provided is one of a `chrome://` API (extensions), and can't be used in unprivileged (web) scope. So as the answer also says, the only way is to parse the DOM and redraw it (like html2canvas and other libs do). – Kaiido Apr 02 '18 at 07:38
  • Understood. But my requirement is to use in different browsers. And if I use the parse and redraw frameworks, it makes my app slow. So I want to check if we can use the browser provided APIs. Since Chrome and Mozilla show the thumbnails of recently visited views. If I can leverage these APIs then the operations will be taken care by the browser and there won't be any much impact on the execution of the javascript thread, right? – sampathsrini Apr 02 '18 at 09:26
  • @sampathsrini But we (from web) don't have access to these APIs. – Kaiido Apr 02 '18 at 09:28
0

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.

foxtrotuniform6969
  • 3,527
  • 7
  • 28
  • 54
zemiacsik
  • 41
  • 1
  • 6