JSFiddle - React, Tailwind, and code Playground

by Mariagrazia_Lunghi

HTML

<video controls width="300" crossorigin="Anonymous" muted>
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/mixer/movies/src/ballo_green_screen.mp4" type='video/mp4'>
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/mixer/movies/src/ballo_green_screen.webm" type='video/webm'>
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/mixer/movies/src/ballo_green_screen.ogv" type='video/ogg'>
</video>
              
<canvas></canvas>
<button id="screenshot">prendi lo screenshot</button>
              
<div id="gallery">
    
</div>

CSS

canvas{
    display: none;
}

JavaScript

var video = document.querySelector('video'),
    canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    button = document.querySelector('#screenshot'),
    gallery = document.querySelector("#gallery");

reloadGallery();

video.addEventListener('play', function(){
    canvas.width = video.clientWidth;
    canvas.height = video.clientHeight;        
    button.addEventListener('click', function(){ 
        ctx.drawImage(video, 0,0);
        var pic = canvas.toDataURL(),
            i = localStorage.length;
        
        localStorage.setItem('s'+i,pic);
        reloadGallery();
    }, false);
}, false);

function reloadGallery(){
    gallery.innerHTML = "";
    for(var x=0; x < localStorage.length; x++){
        var key = localStorage.key(x),
            value = localStorage.getItem(key);
        gallery.insertAdjacentHTML('beforeend',"<img src='" + value + "' width='100px'>");
    }
}