JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<span>http://jsfiddle.net/vphyr/</span>
<video muted controls  id="videoPlayer" >
        <source id='currentVID' src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4" type="video/mp4">
            
    </video>
  </div>
   <div id="screen">
	<img id="tst"/>
   </div>
  <input id="newlocalFILE" name="localfile" size="50" maxlength="100000"
       accept="video/*" type="file" >

JavaScript

var VideoSnapper = {

     captureAsCanvas: function(video, options, handle) {

         // Create canvas and call handle function
         var callback = function() {
             // Create canvas
             var canvas = $('<canvas />').attr({
                 width: options.width,
                 height: options.height
             })[0];
             // Get context and draw screen on it
             canvas.getContext('2d').drawImage(video, 0, 0, options.width, options.height);
             // Seek video back if we have previous position 
             if (prevPos) {
                 // Unbind seeked event - against loop
                 $(video).unbind('seeked');
                 // Seek video to previous position
                 video.currentTime = prevPos;
             }
             // Call handle function (because of event)
             handle.call(this, canvas);
         }

         // If we have time in options 
         if (options.time && !isNaN(parseInt(options.time))) {
             // Save previous (current) video position
             var prevPos = video.currentTime;
             // Seek to any other time
             video.currentTime = options.time;
             // Wait for seeked event
             $(video).bind('seeked', callback);
             return;
         }

         // Otherwise callback with video context - just for compatibility with calling in the seeked event
         return callback.apply(video);
     }
 };


 $(document).ready(function() {
     $('#newlocalFILE').on('change', function() {
         var player = document.getElementById("videoPlayer");
         var currentVID = document.getElementById('currentVID');
         var selectedLocalVID = document.getElementById('newlocalFILE').files[0];


         currentVID.setAttribute('src', URL.createObjectURL(selectedLocalVID));
         player.load();
         player.play();

         var canvases = $('canvas');
        ...