| <!DOCTYPE html> |
| <html> |
| <body> |
| <video id="video" controls autoplay muted></video> |
| <script src="third_party/blackframe.js"></script> |
| <script> |
| |
| function start(surface) { |
| return new Promise((resolve, reject) => { |
| const video = document.querySelector('video'); |
| |
| const displayMediaOptions = { |
| video: { |
| displaySurface: surface |
| }, |
| audio: false |
| }; |
| |
| navigator.mediaDevices.getDisplayMedia(displayMediaOptions) |
| .then(mediaStream => { |
| if (mediaStream.getVideoTracks().length !== 1) { |
| throw new DOMException('Wrong getVideoTracks() length', |
| 'InvalidStateError'); |
| } |
| |
| video.srcObject = mediaStream; |
| const mediaStreamSettings = mediaStream.getVideoTracks()[0] |
| .getSettings(); |
| const actualSurfaceType = |
| mediaStream.getVideoTracks()[0].getSettings().displaySurface; |
| if (actualSurfaceType !== surface) { |
| throw new DOMException(`Wrong capture type, got: ` + |
| `${actualSurfaceType}, expected: ${surface}`, |
| 'TypeError'); |
| } |
| |
| video.onplay = () => { |
| video.width = mediaStreamSettings.width; |
| video.height = mediaStreamSettings.height; |
| |
| if (isNaN(video.width) || isNaN(video.height) || video.width === 0 || |
| video.height === 0) { |
| reject(new DOMException(`Bad stream dimensions ` + |
| `${video.width}x${video.height}`)); |
| } |
| // We know the expected dimensions only in the full screen capture case. |
| if (surface === 'monitor' && |
| (video.width !== screen.width || video.height !== screen.height)) { |
| reject(new DOMException(`Unexpected capture resolution, got: `+ |
| `${video.width}x${video.height}, expected ` + |
| `${screen.width}x${screen.height}`)); |
| } |
| |
| // getDisplayMedia() can produce very large dimensions, reduce for speed. |
| const width = Math.max(video.width / 8, 128); |
| const height = Math.max(video.height / 8, 128); |
| |
| const context = new OffscreenCanvas(width, height).getContext('2d'); |
| context.drawImage(video, 0, 0, width, height); |
| const imageData = context.getImageData(0, 0, width, height); |
| if (isBlackFrame(imageData.data, imageData.data.length)) { |
| reject(new DOMException('Captured data is considered all black')); |
| } |
| |
| resolve(); |
| } |
| }) |
| .catch(reject); |
| }); |
| } |
| </script> |
| </body> |
| </html> |