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

@MonsieurWave 

For example, this code scales the entire screen to the dimensions passed as constraints, neither `resizeMode` nor `applyConstraints()` have any effect on the surface captured

```
var recorder, track;
navigator.mediaDevices.getDisplayMedia({video: {width: 320, height: 240, displaySurface: 'window',resizeMode:'none'}})
.then(async stream => {
  const [track] = stream.getVideoTracks();
  const {width, height} = track.getSettings();
  try {
    await track.applyConstraints({width: 320, height: 240});
    console.log('constraints:', width, height, await track.getConstraints());
  } catch(e) {
    console.warn(e.message);
  }
  recorder = new MediaRecorder(stream);
  recorder.ondataavailable = e => {
    console.log(e.data);
    if (recorder.state === 'recording') {
    track.stop();
    recorder.stop();
    const video = document.createElement('video');
    document.body.appendChild(video);
    video.onloadedmetadata = e => console.log(video.videoWidth, video.videoHeight);
    video.src = URL.createObjectURL(e.data);
    }
  }
  recorder.start(1000);
});

```
[8b295485-3452-4d90-a3a3-ef38e8e5b0a3.webm.zip](https://github.com/w3c/mediacapture-screen-share/files/5178647/8b295485-3452-4d90-a3a3-ef38e8e5b0a3.webm.zip)

One approach to capture only the previews of capture shown in prompt which that was intended to be fixed in the specification by https://github.com/w3c/mediacapture-screen-share/pull/114 

```
var recorder, track;
navigator.mediaDevices.getDisplayMedia({video: true})
.then(async stream => {
  const [track] = stream.getVideoTracks();
  const canvas = document.createElement('canvas');
  canvas.width = 640;
  canvas.height = 480;
  const ctx = canvas.getContext('bitmaprenderer');
  const canvasStream = canvas.captureStream();
  const [canvasTrack] = canvasStream.getVideoTracks();
  track.onmute = track.onended = e => console.log(e);
  canvasTrack.onmute = canvasTrack.onended = e => console.log(e);
  const imageCapture = new ImageCapture(track);
  requestAnimationFrame(async function paint() {
    try {
      if (track.enabled) {
        const bitmap = await imageCapture.grabFrame();
        const frame = await createImageBitmap(bitmap, 200, 0, 640, 480);
        ctx.transferFromImageBitmap(frame);
        canvasTrack.requestFrame();
        requestAnimationFrame(paint);
      } else {     
        return;
      }
    } catch(e) {
      console.warn(e);
    }
  });
  try {
    console.log('constraints:', track.getSettings(), canvasTrack.getSettings());
  } catch(e) {
    console.warn(e.message);
  }
  recorder = new MediaRecorder(canvasStream);
  recorder.ondataavailable = e => {
    console.log(e.data);
      track.enabled = false;
      track.stop();
      const video = document.createElement('video');
      document.body.appendChild(video);
      video.onloadedmetadata = e => console.log(video.videoWidth, video.videoHeight);
      video.src = URL.createObjectURL(e.data);
  }
  recorder.start();
  setTimeout(_ => recorder.stop(), 1000);
});
```

[7163b1ca-cb3d-42d8-8312-4c4e212afb90.webm.zip](https://github.com/w3c/mediacapture-screen-share/files/5178656/7163b1ca-cb3d-42d8-8312-4c4e212afb90.webm.zip)


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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 5 September 2020 21:16:34 UTC