Download a screenshot of an HTML5 video

gistfile1.txt

var screenshotVideo = (src, time) => { 

  // Create a video element with source and seek to time
  var video = document.createElement('video');
  video.src = src;
  video.crossOrigin = "Anonymous";
  video.currentTime = time;
  video.play().then(() => {

    // Pause the video at time
    video.pause();

    // Create canvas and draw current frame to it
    var canvas = document.createElement('canvas');
    canvas.width = 840;
    canvas.height = 360;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // Ascii to binary conversion of canvas image
    var image = canvas.toDataURL('image/jpeg');
    var data = atob(image.substring("data:image/jpeg;base64,".length));
    var asArray = new Uint8Array(data.length);
    for (var i = 0, len = data.length; i < len; ++i) {
        asArray[i] = data.charCodeAt(i);
    }

    // Create a blob from binary array
    var f = new Blob([asArray.buffer], {type:'application/octet-stream'});
    var a = document.createElement('a');
    window.URL = window.URL || window.webkitURL;
    a.href = window.URL.createObjectURL(f);
    a.download = 'screenshot.png';
    document.body.appendChild(a);
    a.click();

    // Remove the temporary link
    document.body.removeChild(document.body.lastElementChild);
    
  });

}

screenshotVideo('https://cdn.cs50.net/2016/fall/lectures/0/week0-b-360p.mp4', 2000);

Can be ran in the developer console.. video source is required to be on the same domain as the script is ran