I have a webpage where I've embedded a YouTube video in an iframe. I need to capture the screenshot of the YouTube video. Using libraries like html2canvas and dom2image didn't work because of cross-domain limitations.
So, I came up with the idea of capturing the screenshot of the full browser window using getDisplayMedia() and then cropping the relevant part using drawImage(). In my head, it seems to make complete sense, just identifying the location of the iframe and then using drawImage to crop it. However, it does not crop the relevant part in all screen sizes. When I change screen resolution or zoom in, it seems to break.
Another idea would be to write an AI algorithm to capture this. But I think that is an overkill. Any ideas on how to make it work for all screen sizes and resolutions?
<h1>Hello</h1>
<div style="margin: 10;">
<iframe
id="youtubeiframe"
width="640"
height="340"
src="https://www.youtube.com/embed/vDYP6AKw8bk?controls=0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div id="picture" style="margin-top:60; background-color:'gray'"></div>
<script>
navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true }).then(stream => {
captureStream = stream;
track = captureStream.getVideoTracks()[0];
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const offsets = document.getElementById("youtubeiframe")?.getBoundingClientRect();
const posX = offsets.left;
const posY = offsets.top;
const width = offsets.width;
const height = offsets.height;
canvas.width = width;
canvas.height = height;
let image = new ImageCapture(track);
const bitmap = image.grabFrame().then(bitmap => {
context?.drawImage(bitmap, posX, posY, width, height, 0, 0, width, height);
const pic = document.getElementById("picture");
if(pic.childElementCount > 0)
pic.replaceChild(canvas,pic.children[0]);
else
pic.appendChild(canvas);
});
});
</script>
I introduced an intermediate step where the image is scaled to the same size as the browser window and then the cropping works as expected. Here's the code for it -
const tempCanvas = document.createElement("canvas");
tempCanvas.width = window.innerWidth;
tempCanvas.height = window.innerHeight;
const tempContext = tempCanvas.getContext("2d");
tempContext?.drawImage(bitmap,0,0,tempCanvas.width,tempCanvas.height);
context?.drawImage(tempCanvas, posX, posY, width, height, 0, 0, width, height);
Here's the full code including the above fix -
<h1>Hello</h1>
<div style="margin: 10;">
<iframe
id="youtubeiframe"
width="640"
height="340"
src="https://www.youtube.com/embed/vDYP6AKw8bk?controls=0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div id="picture" style="margin-top:60; background-color:'gray'"></div>
<script>
navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true }).then(stream => {
captureStream = stream;
track = captureStream.getVideoTracks()[0];
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const offsets = document.getElementById("youtubeiframe")?.getBoundingClientRect();
const posX = offsets.left;
const posY = offsets.top;
const width = offsets.width;
const height = offsets.height;
canvas.width = width;
canvas.height = height;
let image = new ImageCapture(track);
const bitmap = image.grabFrame().then(bitmap => {
const tempCanvas = document.createElement("canvas");
tempCanvas.width = window.innerWidth;
tempCanvas.height = window.innerHeight;
const tempContext = tempCanvas.getContext("2d");
tempContext?.drawImage(bitmap,0,0,tempCanvas.width,tempCanvas.height);
context?.drawImage(tempCanvas, posX, posY, width, height, 0, 0, width, height);
const pic = document.getElementById("picture");
if(pic.childElementCount > 0)
pic.replaceChild(canvas,pic.children[0]);
else
pic.appendChild(canvas);
});
});
</script>