Изображения в видео конвертер не работает с сглазом

Question

У меня проблема с кодом.На самом деле я сталкиваюсь с тем, что изображение успешно загружено и скомпилировано, но при воспроизведении видео оно не воспроизводится.это видео конвертер.Я слежу за кодом SlidesTech, поэтому я застрял в этом.

это работает сервер Apache.и пытается конвертировать изображения в видео.

HTML PART:

<h1>Images to Video Converter</h1>


    <span id="status">Select some images.</span><br><br>


    <div id="drag">DROP!
        <button type="button" id="fbutton" class="btn btn-outline-secondary btn-lg">Select Image(s)</button> 


        <div id="small">
            <div><label>Width:</label><input id="width" type="number" step="1" value="500"></div>
            <div><label>Height:</label><input id="height" type="number" step="1" value="300"></div>
            <div><label>Video Frame Rate:</label><input id="framerate" type="number" step="1" value="15"></div>
        </div>
        <button type="button" id="createvideo" class="btn btn-info">Create Video</button>
    </div>
    <input type="file" id="filesinput" multiple>

    <br>
    <video id="awesome" controls autoplay loop></video>
    <br>

   <button type="button" style="display:none" class="btn btn-primary btn-lg" id="download" download="video.webm">Download Video!</button>
    <canvas id="canvas" style="display:none"></canvas>

SCRIPTING PART:

 var drag = document.getElementById("drag");
 var fbutton = document.getElementById("fbutton");
 var createvideo = document.getElementById("createvideo");
        var files = document.getElementById("filesinput");

        var ctx = 0;

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        //image to video via Whammy
        var video = new Whammy.Video(15);

        var filesarr = [];



        createvideo.addEventListener("click", function() {

            document.getElementById('status').innerHTML = "Working... Please Wait.";

            document.getElementById('awesome').src = "";
            ctx = 0;

            canvas.width = document.getElementById("width").value;
            canvas.height = document.getElementById("height").value;
            video = new Whammy.Video(document.getElementById("framerate").value);

            //if we have images loaded
            if(filesarr.length>0){

                //loop through them and process
                for(i=0; i<filesarr.length; i++) {
                    var file = filesarr[i];
                    if(file.type.match(/image.*/)){
                        process(file);
                    } else {
                        document.getElementById('status').innerHTML = "This file does not seem to be a image.";
                    }
                }

            } else {
                document.getElementById('status').innerHTML = "Please select some images.";
            }

        }, false);





        fbutton.addEventListener("click", function() {
            document.getElementById('filesinput').click();
        }, false);

        drag.ondragover = function(e) {e.preventDefault()}
        drag.ondrop = function(e) {
            e.preventDefault();
            filesarr = e.dataTransfer.items;
            document.getElementById('status').innerHTML = "Please select options and click on Create Video.";
        }

        //process files VIA INPUT
        files.addEventListener("change", function (e) {
            filesarr = e.target.files;
            document.getElementById('status').innerHTML = "Please select options and click on Create Video.";
        }, false);



        /* main process function */
        function process(file) {

            var reader = new FileReader();
            reader.onload = function(event) {
                var dataUri = event.target.result;
                var img = new Image();

                //load image and drop into canvas
                img.onload = function() {

                    //a custom fade in and out slideshow
                    context.globalAlpha = 0.2;
                    context.drawImage(img, 0, 0, canvas.width, canvas.height);
                    video.add(context);
                    context.clearRect(0,0,context.canvas.width,context.canvas.height);
                    context.globalAlpha = 0.4;
                    context.drawImage(img, 0, 0, canvas.width, canvas.height);
                    video.add(context);
                    context.clearRect(0,0,context.canvas.width,context.canvas.height);
                    context.globalAlpha = 0.6;
                    context.drawImage(img, 0, 0, canvas.width, canvas.height);
                    video.add(context);
                    context.clearRect(0,0,context.canvas.width,context.canvas.height);
                    context.globalAlpha = 0.8;
                    context.drawImage(img, 0, 0, canvas.width, canvas.height);
                    video.add(context);                       
                    context.clearRect(0,0,context.canvas.width,context.canvas.height);
                    context.globalAlpha = 1;
                    context.drawImage(img, 0, 0, canvas.width, canvas.height);

                    //this should be a loop based on some user input
                    video.add(context);
                    video.add(context);
                    video.add(context);
                    video.add(context);
                    video.add(context);
                    video.add(context);
                    video.add(context);

                    context.clearRect(0,0,context.canvas.width,context.canvas.height);
                    context.globalAlpha = 0.8;
                    context.drawImage(img, 0, 0, canvas.width, canvas.height);
                    video.add(context);
                    context.clearRect(0,0,context.canvas.width,context.canvas.height);
                    context.globalAlpha = 0.6;
                    context.drawImage(img, 0, 0, canvas.width, canvas.height);
                    video.add(context);
                    context.clearRect(0,0,context.canvas.width,context.canvas.height);
                    context.globalAlpha = 0.4;
                    context.drawImage(img, 0, 0, canvas.width, canvas.height);
                    video.add(context);

                    ctx++;
                    finalizeVideo();

                };
                img.src = dataUri;
            };

            reader.onerror = function(event) {
                console.error("File could not be read! Code " + event.target.error.code);
            };

            reader.readAsDataURL(file);

        }      

 function finalizeVideo(){
  if(ctx==filesarr.length){

  var start_time = +new Date;
  var output = video.compile();
  var end_time = +new Date;
  var url = URL.createObjectURL(output);

  document.getElementById('awesome').src = url; //toString converts it to a 
URL via Object URLs, falling back to DataURL
  document.getElementById('download').style.display = '';
  document.getElementById('download').href = url;
  document.getElementById('status').innerHTML = "Compiled Video in " + (end_time - start_time) + "ms, file size: " + Math.ceil(output.size / 1024) + "KB";
 }
 }

вот весь код.Я сталкиваюсь с проблемой: видео не воспроизводится, даже если все успешно скомпилировано, что я делаю не так?неужели перестает оказывать поддержку показ видео?