W3C home > Mailing lists > Public > public-webrtc-logs@w3.org > May 2019

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

From: guest271314 via GitHub <sysbot+gh@w3.org>
Date: Thu, 16 May 2019 09:49:54 +0000
To: public-webrtc-logs@w3.org
Message-ID: <issue_comment.created-492999790-1558000192-sysbot+gh@w3.org>
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) {
        window.removeEventListener("scroll", handleMediaCaptureScrollIntoView);

    window.addEventListener("scroll", handleMediaCaptureScrollIntoView);
        top: _top,
        behavior: "smooth"

At media capture "controller" document

    const mediaStream = await navigator.mediaDevices.getDisplayMedia({video:true});
    const [videoTrack] = mediaStream.getVideoTracks();
    const img = new Image;
    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;
    }, {once: true});


Resulting image


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

This archive was generated by hypermail 2.4.0 : Saturday, 6 May 2023 21:19:47 UTC