how to get image from a random point of an uploaded video to feed AutoML model?

Question

I want to be able to run a tensorflow.js model based on image classification but with video. I want to be able to grab multiple snapshots of the video and pass those to the image classification model. How do I grab multiple snapshots of the video that I can later pass into the model?

I tried:

    onFileChange(e) {

        const file = e.target.files[0];
        this.url = URL.createObjectURL(file);
        this.video = document.getElementById('video');

        this.video.src = this.url; 

        var canvas = document.getElementById('canvas');
        //var context = canvas.getContext('2d');
        canvas.width = this.videoWidth;
        canvas.height = this.videoHeight;

        this.video.addEventListener('loadeddata', function() {
            var $this = this; //cache

            const image = document.getElementById('img');

            $this.currentTime = Math.floor((Math.random() * $this.duration) + 1);
            $this.width = $this.videoWidth;
            $this.height = $this.videoHeight;

            canvas.getContext('2d').drawImage($this, 0, 0, canvas.width, canvas.height);

            image.src = canvas.toDataURL();

            const predictions =     this.model.classify(image);
            console.log(predictions);

        }, false);

        
        

        
    },
    

but this seems to be not updating the canvas and I simply dont know why.