Issue 118551: Screenshot API

http://www.w3.org/wiki/HTML/next#Fullscreen_and_Screenshots

This issue has been available for more than 365 days, and should be re-evaluated. Hotlist-Recharge-Cold label is added for tracking. Please re-triage this issue.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Is this still being proposed?

Let's close this for now and re-open when there's appetite.

Assigned to yours truly.

This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

With the navigator.getDisplayMedia() [1] API landing in 72, 
screenshot functionality can be polyfilled with something like:

navigator.mediaDevices.getDisplayMedia(constraints)
      .then(handleSuccess)
      .catch(handleError);

function handleSuccess(mediaStream) {
  let videoTrack = mediastream.getVideoTracks()[0];

  let imageCapturer = new ImageCapture(videoTrack);

  imageCapturer.takePhoto()
    .then((blob) => {
      console.log("Screenshot taken: " + blob.type + ", " + blob.size + "B")
      imageTag.src = URL.createObjectURL(blob);
    })
    .catch((err) => { 
      console.error("takePhoto() failed: ", e);
    });
}

(where |imageTag| is just an <img> element, see the demo where
this comes from in [2]).

[1] https://cdn.rawgit.com/uysalere/js-demos/master/gdm2.html
[2] https://codepen.io/miguelao/pen/BLPzKx?editors=1010#0

(getDisplayMedia is tracked in  Issue 326740 )

Cool.  I had a few questions that weren't answered by the code snippet above or a quick look at the ImageCapturer spec.

- How can the caller request a frame grab with he same dimensions as the source (whether desktop or tab viewport)?

- What image format is returned in the blob?

- How would the page be able to crop out a specific element's bounding box?  Presumably by cropping the takePhoto() result in <canvas>?

- Will Chrome's permissions prompt make sense if the user is clicking on a link that says "Take Screenshot"?

Thanks!

> - How can the caller request a frame grab with he same dimensions as the source (whether desktop or tab viewport)?

By default the MediaStream(Video)Track generated by 
navigator.mediaDevices.getDisplayMedia() has the same dimensions as the
captured content (be that screen, app window or tab); +emircan@ to keep
me real here.

> - What image format is returned in the blob?

|blob.type| will be the encoded image format, in general image/png
(if we do it in software) or image/jpeg (if it's hardware provided)
(see e.g. the console for the demo https://codepen.io/miguelao/full/BLPzKx)

> - How would the page be able to crop out a specific element's bounding box?  Presumably by cropping the takePhoto() result in <canvas>?

That, or: setting new constraints on the MediaStream(Video)Track 
to make that adapt the resolution. This might be in-flight, so
+guidou@ to provide more info if relevant

- Will Chrome's permissions prompt make sense if the user is clicking on a link that says "Take Screenshot"?

..ish? The current window speaks about "share your screen" :-/
Not perfect, I wonder if there could be a way to pre-seed the text
of the selection window and/or limit the available choices (e.g. 
to the current App or its Tabs, but not the whole screen?) +emircan@
again.

Deleted: Screenshot from 2019-01-10 17-03-37.png 166 KB

	Screenshot from 2019-01-10 17-03-37.png 166 KB View Download

applyConstraints() could be used on the track to adjust resolution.