AJAX upload file with progres + FFMPEG progress - php

Question

The task is to implement the following:
1. On the page there is a form for downloading a file, the file should be loaded asynchronously, without rebooting with the help of AJAX and displaying the upload progress
2. If the file is successfully downloaded, send a command to the server, which should check the queue, and if the queue is empty, inform the client that the processing of the file has begun, then start the processing itself
3. If processing has begun, then show the progress of this processing
What did you manage to implement
File upload was successfully implemented, after a successful upload, the server issues a line with the status successfully, and the full path of the downloaded file
Upload JS snippet
$.ajax({
url: 'api/upload/load',
type: 'post',
data: fd,
contentType: false,
processData: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percent = Math.ceil((evt.loaded / evt.total) * 100);
console.log(percent) // Upload progress
}
}, false);
return xhr;
},
success: function(data){
var response = JSON.parse(data);
if(response.status == 'success'){
//if upload success, run command
startConversion(response.path)
}
}
});
Reponse from api/upload/load
{"status":"success","path":"<path>"}
In the AJAX script, I do a check: if the response.status == 'success', then we call the startConversion function, which takes the full path of the newly loaded file as an argument. This function sends another AJAX request to the server, where the queue check is in progress.
startConversion JS Snippet
function startConversion(path){
$.ajax({
url: '/api/upload/conversion',
type: 'POST',
data: { path: path },
success: function(data){
var response = JSON.parse(data);
// if response.status == 'start', run checkConversion function
}
})
Code /api/upload/conversion
$queue = $this->model->getQueue();
if($queue < 5){
// If queue is empty, notify browser
$output = array('progress' => 'start');
echo json_encode($output);
// Then start shell_ecxec
$cmd = 'some_command';
shell_exec('ffmpeg.exe -i ' . $path . ' ' . $cmd . ' 1>log.txt 2>&1 ');
} else {
$output = array('progress' => 'waiting');
echo json_encode($output);
}
Here, for some reason, a message is already not being displayed stating that processing has begun (echo before $cmd)
Full link
And here the most interesting begins. It would seem that it would be possible in the method to success call the check on the status of the processing (start, queue or an error) and if the processing began to call the third function, which, again AJAX, polls the server returns the progress of the processing
But in reality, the following happens: as soon as the second function sends the request, nothing is returned in response, but processing is in progress, and in the console it shows the status of the request - PENDING. As soon as the server completes processing, a response is issued from the server that the queue is empty and you can start processing the progress, although the processing has already been completed
There are suggestions that further execution of the script is blocked by the command shell_exec() until the end of her work
Also, it is not clear to me why the response from the server is not issued when the echo is clearly registered in it, and why the browser is waiting for the complete completion of the work shel_exec() because after it, the code does not have one. What should be done, that is, as if according to the logic of things and by the code, the server should give an answer in the form of a JSON string, the browser should show that the request has completed with the status of 200, and the server, in the meantime, should start the conversion, but for some reason this does not happen...