Attempts to Get Pixel Data from Display Media ? Somethings Wrong

PixelDataFromDisplayMedia.js

( async ()=> {
	let stream = await navigator.mediaDevices.getDisplayMedia( { video: true } );
	console.log( stream );
	let video = document.createElement('video');
	video.srcObject = stream;
	video.play();

	let canvas = document.createElement('canvas');
	let ctx = canvas.getContext('2d');

	video.onloadedmetadata = function() {
		canvas.width = video.videoWidth;
		canvas.height = video.videoHeight;
		drawFrame();
	};

	function drawFrame() {
		ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

		// Get raw pixel values
		let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
		let pixelValues = imageData.data;

		let midpoint = Math.floor(pixelValues.length / 2);
		let middlePixels = Array.from(pixelValues.slice( ( midpoint - 20 ) ,  ( midpoint + 20 ) ));

		console.log( middlePixels )

		// Request the next frame
		requestAnimationFrame(drawFrame);
	}

})();