Re: [mediacapture-screen-share] Screenshot (still image) capability (#107)

An attempt to meet the requirement 

`const blob = await screenShot(document.body, { type: 'png'  })`

described at the linked Chrome issue using existing browser API; i.e., capturing only a specific element [("#Specifications") at MDN `Image​Capture​.take​Photo()` documentation ("display")](https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture/takePhoto#Specifications) from a document at the same domain [MDN Web Docs ("controller")](https://developer.mozilla.org/en-US/) using existing browser functionality. 

At media capture "display" document; e.g., 
```
// signaling; e.g., window.postMessage(); MessageChannel; SharedWorker
const bc = new BroadcastChannel("getDisplayMediaImageCapture");
bc.addEventListener("message", e=>{
    const element = document.getElementById(e.data.id);
    const {left, top: _top, width, height} = element.getBoundingClientRect();
    const handleMediaCaptureScrollIntoView = e => {
      if (element.getBoundingClientRect().top < 1) {
        bc.postMessage({
          width,
          height
        });
        window.removeEventListener("scroll", handleMediaCaptureScrollIntoView);
      }
      console.log(e);
    }

    window.addEventListener("scroll", handleMediaCaptureScrollIntoView);
    window.scrollTo({
        left,
        top: _top,
        behavior: "smooth"
    });
});
```

At media capture "controller" document

```
(async()=>{
    const mediaStream = await navigator.mediaDevices.getDisplayMedia({video:true});
    const [videoTrack] = mediaStream.getVideoTracks();
    const img = new Image;
    document.body.appendChild(img);
    const bc = new BroadcastChannel("getDisplayMediaImageCapture");
    bc.addEventListener("message", async e => {
      const {width, height} = e.data;
      console.log(width, height);
      const imageCapture = new ImageCapture(videoTrack);
      const osc = new OffscreenCanvas(width, height);
      const osctx = osc.getContext("2d");
      const imageBitmap = await imageCapture.grabFrame();
      osctx.drawImage(imageBitmap, 0, 0);
      img.src = URL.createObjectURL(await osc.convertToBlob({type:"image/png"}));
      videoTrack.enabled = false;
      videoTrack.stop();
      imageBitmap.close();         
    }, {once: true});
    bc.postMessage({"id":"Specifications"});    
}
)();

```

Resulting image

![getDisplayMediaAttemptToCaptureSpecificElementAsScreenShot](https://user-images.githubusercontent.com/4174848/57844048-d0acfc00-77be-11e9-98fe-72021d9d99b6.png)

This feature request,  and further, the ability to set an HTML element to be captured as a _device_ or _window_ or _application_, both as a still image and as a live stream (e.g., `<video>` irrespective of changes to `src` element) has several use cases and spans several domains; including, but not limited to, education; software and hardware testing; general media creation and post-production.



-- 
GitHub Notification of comment by guest271314
Please view or discuss this issue at https://github.com/w3c/mediacapture-screen-share/issues/107#issuecomment-492999790 using your GitHub account

Received on Thursday, 16 May 2019 09:49:59 UTC