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

Re: [mediacapture-screen-share] Provide a means to select only part of a screen to capture (#105)

From: guest271314 via GitHub <sysbot+gh@w3.org>
Date: Sun, 02 Jun 2019 04:41:07 +0000
To: public-webrtc-logs@w3.org
Message-ID: <issue_comment.created-497998729-1559450465-sysbot+gh@w3.org>
A rudimentary POC https://plnkr.co/edit/UmrSwN?p=preview to select only part of a screen for a screen shot (the movement and resizing of the selection element can be fine-tuned to have similar functionality as, for example, https://codepen.io/zz85/pen/gbOoVP)

<!DOCTYPE html>
    (async() => {
      function screenShotSelection() {
        const div = document.createElement("div");
        const styles = {
          background: "transparent",
          display: "block",
          position: "absolute",
          outline: "thin solid gold",
          width: "100px",
          height: "100px",
          left: "calc(50vw)",
          top: "calc(50vh)",
          overflow: "auto",
          resize: "both",
          cursor: "move",
          zIndex: 100
        div.id = "screenShotSelector";
        div.ondragstart = e => {
        div.ondragend = e => {
          const {
            clientX, clientY
          } = e;
          e.target.style.left = clientX + "px";
          e.target.style.top = clientY + "px";
        Object.assign(div.style, styles);
        div.draggable = true;
      const video = document.createElement("video");
      video.controls = true;
      video.style.objectFit = "cover";
      video.style.lineHeight = 0;
      video.style.fontSize = 0;
      video.style.margin = 0;
      video.style.border = 0;
      video.style.padding = 0;
      video.loop = true;

      video.src = "https://upload.wikimedia.org/wikipedia/commons/d/d9/120-cell.ogv";

      document.body.insertAdjacentElement("afterbegin", video);

      video.addEventListener("play", async e => {
        const bounding = document.getElementById("screenShotSelector").getBoundingClientRect();
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: {cursor:"never"} // has no effect at Chromium

        const [videoTrack] = stream.getVideoTracks();
        const imageCapture = new ImageCapture(videoTrack);
        const osc = new OffscreenCanvas(100, 100); // dynamic
        const osctx = osc.getContext("2d");
        screenShotSelector.addEventListener("dblclick", async e => {
          console.log(window.getComputedStyle(e.target).left, window.getComputedStyle(e.target).top);
          osctx.drawImage(await imageCapture.grabFrame(), parseInt(window.getComputedStyle(e.target).left), parseInt(window.getComputedStyle(e.target).top), 100, 100, 0, 0, 100, 100); // dynamic
          console.log(bounding, URL.createObjectURL(await osc.convertToBlob()));
        }, {
          once: true
      }, {
        once: true




Ideally, specific for a screen shot (i.e., https://github.com/w3c/mediacapture-screen-share/issues/107)

1) once permission is granted to capture a screen, application of tab a draggable and resizable element having transparent background is appended to a fullscreen selection UI;
2) once a region has been selected for example using `dblclick` event on the draggable and resizable element a `MediaStreamTrack` is created and exists for the time to capture a single image is having the dimensions of the selection element, without the entire screen being captured then drawn again to resize to the element dimensions; the `MediaStreamTrack` is immediately stopped and ended once the single image is captured

where the permission is not for a screen shot, but for a continuous media stream to be captured

1) only the selected region is captured (for example, the bounding client rectangle of the `<video>` element at the example code) not the entire screen;
2) all other `MediaStream` and `MediaStreamTrack` functionality remains the same

GitHub Notification of comment by guest271314
Please view or discuss this issue at https://github.com/w3c/mediacapture-screen-share/issues/105#issuecomment-497998729 using your GitHub account
Received on Sunday, 2 June 2019 04:41:38 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 4 June 2019 15:32:57 UTC