InvalidStateError in IE while creating canvas

Question

I am trying to create thumbnail image from uploaded video by user. It is working file in chrome and firefox, But when I execute same code in IE , it throw me exception InvalidStateError.

I found same issue has been asked here, but all were using pre loaded video. but in my case I have to upload video using file input.

This my JS code

 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');
         VideoSnapper.captureAsCanvas(document.getElementById("videoPlayer"), {
             width: 160,
             height: 68,
             time: 40
         }, function(canvas) {
             var dataUrl = canvas.toDataURL();
             $('#tst').attr("src", dataUrl);
             //$('#screen').append(canvas);   

         });
     });
 })

JSFiddle

score 0 · Accepted Answer · answered Jul 31 '17 at 11:26

For IE you need to add the "loadedmetadata" event listener to make sure that the video metadata is loaded, so you can access the currentTime property.

From this answer: Start HTML5 video at a particular position when loading? I tried marking as a duplicate, but it didn't let me.

I think this can help you make the functionality work as expected: https://jsfiddle.net/q9sLwr73/5/

var VideoSnapper = {
    captureAsCanvas: function(video, options, handle) {
        var waitForMetadata = function() {
            video.currentTime = options.time;
        };

        // 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');
                video.removeEventListener('loadedmetadata', waitForMetadata, false);
                // 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.addEventListener('loadedmetadata', waitForMetadata, false);
            //OLD CODE: 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);
    }
};

InvalidStateError in IE while creating canvas

1 Answers1