Create a screenshot of a video using devtools

capureVideoScreenshot chrome bookmark

javascript: function captureVideoScreenshot() {    const video = document.querySelector('video');    if (!video) {        console.error('No video element found.');        return;    }        const canvas = document.createElement('canvas');    canvas.width = video.videoWidth;    canvas.height = video.videoHeight;        const ctx = canvas.getContext('2d');    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);        const link = document.createElement('a');    link.href = canvas.toDataURL('image/png');    link.download = 'screenshot.png';    link.click();}captureVideoScreenshot();

capureVideoScreenshot.js

// this assumes there's only one video on the page
function captureVideoScreenshot() {
    const video = document.querySelector('video');
    if (!video) {
        console.error('No video element found.');
        return;
    }
    
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = 'screenshot.png';
    link.click();
}

// Call the function to capture the screenshot
captureVideoScreenshot();