Question: Google's "Report a Bug" or "Feedback Tool" lets you select an area of your browser window to create a screenshot that is submitted with your feedback about a bug.

![Google Feedback Tool Screenshot](https://i.stack.imgur.com/CDhEi.png)
*Screenshot by Jason Small, posted in a [duplicate question](https://stackoverflow.com/questions/6608327/google-style-send-feedback).* 

How are they doing this? Google's JavaScript feedback API is loaded from [here](https://ssl.gstatic.com/feedback/api.js) and [their overview of the feedback module](http://www.google.com/tools/feedback/intl/en/learnmore.html) will demonstrate the screenshot capability.

Answer: 
Heres an example using: [getDisplayMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia)

```
document.body.innerHTML = '<video style="width: 100%; height: 100%; border: 1px black solid;"/>';

navigator.mediaDevices.getDisplayMedia()
.then( mediaStream => {
  const video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = e => {
    video.play();
    video.pause();
  };
})
.catch( err => console.log(`${err.name}: ${err.message}`));

```

Also worth checking out is the [Screen Capture API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture) docs.
You can try my new JS library: [screenshot.js](https://github.com/amiad/screenshot.js).

It's enable to take real screenshot.

You load the script:

```html
<script src="https://raw.githubusercontent.com/amiad/screenshot.js/master/screenshot.js"></script>

```

and take screenshot:

```js
new Screenshot({success: img => {
        // callback function
        myimage = img;
    }});

```

You can read more options in project page.