blob: 105beec428cf192a8b910e2d8606ea0b73cdce52 [file] [log] [blame] [edit]
<!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>