taking screenshots from video element (even flash fallback)

by vijayweb

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<div class="player">
    <button class="load-swf" disabled="">test flash fallback</button>
    <hr />
    <div class="screenshot-wrapper">
        <div class="mediaplayer">
            <video poster="https://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls preload="none">
            <source src="https://redirector.googlevideo.com/videoplayback?expire=1641428394&ei=SuHVYar8MLaE6dsPztq96A8&ip=196.242.141.225&id=o-AKCsLp5mVW7kCQWHN0RSSHlnAsviARyvIJgRFpt07iJh&itag=22&source=youtube&requiressl=yes&mh=iM&mm=31%2C26&mn=sn-4g5edn6r%2Csn-5hnedn7z&ms=au%2Conr&mv=u&mvi=4&pl=24&vprv=1&mime=video%2Fmp4&ns=xb8NU2NZOek6hFXk1aoSC9QG&cnr=14&ratebypass=yes&dur=820.546&lmt=1635341585393455&mt=1641405628&fvip=4&fexp=24001373%2C24007246&c=WEB&txp=5311224&n=O_NjoW5KSmPMzQ&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cns%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRQIgXzwJThtb-yaNOmNNzcupgNvz4MUYXyw8Cxe7YnZtJ3kCIQDSmZ64Z3-iGGov8lbetEwZ1w2LODaYAdANi5fL9MibIw%3D%3D&lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpl&lsig=AG3C_xAwRAIgCWbTfsqZelndy4nqDCrbQwdXQ193jVZ6oon_n8I78HkCIEKdWgZKXJUNTkEXa8mw_qxQIY5WgF6N9c4A14SdGJnZ&title=%E0%B0%9C%E0%B1%81%E0%B0%9F%E0%B1%8D%E0%B0%9F%E0%B1%81%E0%B0%95%E0%B0%BF+%E0%B0%AA%E0%B1%86%E0%B0%9F%E0%B1%8D%E0%B0%9F%E0%B1%87+%E0%B0%86%E0%B0%B9%E0%B0%BE%E0%B0%B0%E0%B0%82%E0%B0%B2%E0%B1%8B+%E0%B0%AE%E0%B0%BE%E0%B0%B0%E0%B1%8D%E0%B0%AA%E0%B1%81%E0%B0%B2%E0%B1%81+%E0%B0%9A%E0%B1%87%E0%B0%B8%E0%B1%8D%E0%B0%A4%E0%B1%82+%E0%B0%89%E0%B0%82%E0%B0%A1%E0%B0%BE%E0%B0%B2%E0%B0%BF+%7C%7C+hair+oil+Recipe+%231+%7C%7C+telugu+Vlogs+from+Egypt" type="video/mp4">
            <source src="../media/elephants-dream-medium.webm" type="video/webm">

            </video>
        </div>
        <button type="button" disabled="" class="screenshot-btn">take a photo</button>
        <div class="canvas-holder">
            <canvas></canvas>
        </div>
   ...

CSS

.player {
    margin: auto;
    padding: 10px;
    width: 90%;
    max-width: 900px;
    min-width: 320px;
}
.mediaplayer, .canvas-holder {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16/9 */
}
.mediaplayer video, .mediaplayer .polyfill-video, .canvas-holder canvas {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

JavaScript

webshim.setOptions('mediaelement', {
    replaceUI: 'auto'
});
webshim.setOptions({
    canvas: {
        type: 'flashpro'
    },
    mediaelement: {
        replaceUI: 'auto'
    }
});
webshim.polyfill('mediaelement canvas');

$(function () {
    $('.screenshot-wrapper').each(function () {
        var $module = $(this);
        var context = $('canvas', $module).getContext('2d');
        var $video = $('video', $module);

        function takeScreenshot() {
            context.drawImage($video[0], 0, 0);
        }

        $('.screenshot-btn', $module).on('click', takeScreenshot);
        $video.on('loadedmetadata', function () {
            $('canvas', $module).attr({
                width: $.prop(this, 'videoWidth'),
                height: $.prop(this, 'videoHeight')
            });
            $('.screenshot-btn', $module).prop('disabled', false);
        });
    });
});

//add remove/flashbutton
$(function () {
    if (webshim.support.mediaelement && swfmini.hasFlashPlayerVersion('10.3')) {
        $('button.load-swf')
            .prop('disabled', false)
            .one('click', function () {
            webshim.setOptions('mediaelement', {
                preferFlash: true
            });
            $('video').mediaLoad();
            $(this).prop('disabled', true);
        });
    } else {
        $('button.load-swf').remove();
    }
});