Сначала загрузите видео и отобразите прогресс загрузки, а затем конвертируйте видео с помощью ffmpeg и отобразите прогресс

Question

Я работаю на платформе обмена видео. Что я хочу сделать, так это то, что когда пользователь загружает видео, сначала отображается индикатор выполнения загрузки, а после завершения загрузки отображается еще один индикатор выполнения для оставшегося времени выполнения ffmpeg.

Я использую этот код jQuery для отображение индикатора выполнения загрузки.

$("body").on("submit", "form[name='upload']", function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
        cache: false,
        contentType: false,
        data: formData,
        dataType: "json",
        method: "POST",
        processData: false,
        url: "upload.php",
        error: function() {
            alert("Sorry, something went wrong!");
        },
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    $(".upload .progress-bar").css({
                        "width": percentComplete + "%"
                    });
                }
            }, false);

            return xhr;
        }
    });
});

И я использую этот код php для выполнения видео в ffmpeg.

shell_exec('ffmpeg -i uploads/video.mp4 -c:a copy -s 256x144 uploads/video_144p.mp4 > uploads/output.log 2>&1');

Он генерирует файл «output.log». Теперь в jQuery я могу получить содержимое этого файла журнала и отобразить прогресс после небольших вычислений. Это jQuery код

$.ajax({
    type: "GET",
    cache: false,
    url: "uploads/output.log",
    success: function(response) {
        var duration = 0;
        var time = 0;
        var progress = 0;

        var matches = (response) ? response.match(/Duration: (.*?), start:/) : [];
        if (matches.length > 0) {
            var rawDuration = matches[1];

            var arrayReverse = rawDuration.split(":").reverse();
            duration = parseFloat(arrayReverse[0]);
            if (arrayReverse[1]) duration += parseInt(arrayReverse[1]) * 60;
            if (arrayReverse[2]) duration += parseInt(arrayReverse[2]) * 60 * 60;

            matches = response.match(/time=(.*?) bitrate/g);
            console.log(matches);

            if (matches.length > 0) {
                var rawTime = matches.pop();

                if (Array.isArray(rawTime)) {
                    rawTime = rawTime.pop().replace("time=", "").replace(" bitrate", "");
                } else {
                    rawTime = rawTime.replace("time=", "").replace(" bitrate", "");
                }

                arrayReverse = rawTime.split(":").reverse();
                time = parseFloat(arrayReverse[0]);
                if (arrayReverse[1]) time += parseInt(arrayReverse[1]) * 60;
                if (arrayReverse[2]) time += parseInt(arrayReverse[2]) * 60 * 60;

                progress = Math.round((time / duration) * 100);
            }
        }
        $(".execution .progress-bar").css({
            "width": progress + "%"
        });
    }
});

Теперь я хочу один AJAX код, который сначала загрузит мой файл и отобразит «Ход загрузки», а после этого он запустит мое видео в php FFMPEG и отобразить «Ход выполнения»