PHP Ajax XMLHttpRequest popen实时进度

Question

I'm trying to output live : the ffmpeg progress

It works great when I execute the php file alone : many lines with text appearing one after an other...

••• But when it's a XMLHttpRequest context, the output is 1 line empty

PHP working when not in AJAX situation :

ini_set("output_buffering", "0");
ob_implicit_flush(true);
$call_mp4 = ' __FFMPEG Command HERE__ ';
$proc = popen($call_mp4, 'r');
while (!feof($proc)) {
    echo '['.date("i:s")."] ".fread($proc, 4096).'<br>';ob_flush();flush();
}

Does someone know why in AJAX it's blank and only 1 line ? how can this be fixed ?

Regards

Answer 1

I have a "work around" temporary solution...

//JS FILE
var formData = new FormData();
var fileSizeForAllUpload = 0;

var allAllowedExt_arr = __EXTENSIONS ALLOWED HERE__;

// Retrieve the FileList object from the referenced element ID (for multiple uploading files)
var ins = document.getElementById( jXHRinputID ).files.length;
for (var x = 0; x < ins; x++) {

    fileName = ''; fileExtension = '';
    fileName = document.getElementById( jXHRinputID ).files[x].name ;
    fileSize = document.getElementById( jXHRinputID ).files[x].size ; jLog('• fileName -> ' + fileName + ' : fileSize -> ' + fileSize);
    fileExtension = fileName.substr((fileName.lastIndexOf('.') + 1));
    if ( !in_array( fileExtension , allAllowedExt_arr ) ){ fileExtension = 'notAllowed'; }

    // if file too large...
    if ( fileSize < 400000000 ) {
        formData.append( jXHRinputID+"[]", document.getElementById( jXHRinputID ).files[x]);
        fileSizeForAllUpload = fileSizeForAllUpload + fileSize;
    }

    if ( fileSize >= 400000000 ) { fileName = fileName + ' ' + _file_size_too_large ; }

    $('#uploadingFilesNames_'+jXHRinputID).append( '• <img src="'+subdomain_icons+'/files/'+ fileExtension +'.png" width="42px" />' + fileName + '<br>' );

}

if ( fileSizeForAllUpload > 0 ) {
    xhr = new XMLHttpRequest();
    xhr.open('POST', '___WEB PATH OF THE PHP FILE___'+"?"+params, true);

    xhr.upload.addEventListener("loadstart", function(e){
            console.log('loadstart');
    }, false);

    // upload progress
    xhr.upload.addEventListener("progress", function(e){
        if(e.lengthComputable){
            var percentage = Math.round((e.loaded * 100) / e.total);
            $("#percentageCalc_"+jXHRinputID).html(percentage + '%');
            $("#progressBar_"+jXHRinputID).val(percentage);
        }

    }, false);

    xhr.upload.addEventListener("load", function(e){
            console.log('transferCompleteFunction'); 
    }, false);

    xhr.onprogress = function(e) {
        console.log('onprogress'); 
        // ******** HERE : it's the actual line that output live from the echo stuff;ob_flush();flush();
        $('#liveXHRoutput_'+jXHRinputID).html(e.currentTarget.responseText);
    }

    xhr.onreadystatechange = function() { 
        if (xhr.readyState == 4) { 
            console.log('Complete'); 
        } 
    }
    xhr.send(formData);
}

PHP FILE

ini_set("output_buffering", "0");
ob_implicit_flush(true);

// ******* later in PHP file after move_uploaded_file

$newFile_log = "___path for the log file___";
$call_mp4 = " __FFMPEG Command HERE__ 1> $newFile_log  2>&1 ";
// start the ffmpeg convertion
$proc_mp4 = popen($call_mp4, 'r');

//wait for the log file to be created
while (!file_exists($newFile_log)) { sleep(1); }

while (file_exists($newFile_log)) {
    echo '•';ob_flush();flush();sleep(1);
    // Check for the word head in the log file 
    // in ffmpeg I found that the line containing the word global headers: is the end of convertion
    if( shell_exec('grep -c "head" '.$newFile_log .' 2>&1') > 0 ) { break; }        
}

//In FFMPEG the 1> $newFile_log is to create a loge file
//and the 2>&1 is needed to have the ouput inside the variable

?>

It's working very well except for long videos...

Is someone that (knows FFMEG well) know a better way to chec