0
I am developing a tool that creates a custom video with the specifications that the user decided in previous steps.
The client mounts what he wants inside a canvas, I remove the stream with the Media Record API, after having the video blob, I send PHP by ajax, using Formdata. When arriving in PHP, the file is with a format that I do not see with good eyes (video/x-Matroska), given that it does not work in some players of extreme importance, such as Whatsapp and Instagram. The format I would like to get was 'video/Quicktime'.
I’ve looked for the solution, but so far only heard of FFMPEG, which becomes useless from the moment my hosting service does not support it.
I would like to at least understand why it is so difficult to change information like this, given that we can always have problems uploading a blob that may or may not have the format we expected.
OBS: the Type mime set in Mediarecorder 'video/webm' with output to type blob 'video/mp4'
function startRecording() {
    const chunks = [];
    const stream = canvas.captureStream();
    const rec = new MediaRecorder(stream, {mimeType: 'video/webm; codecs=h264'});
    rec.ondataavailable = e => chunks.push(e.data);
    rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/mp4'}));
    rec.start();
    setTimeout(()=>rec.stop(), durationEnd); // stop recording in 3s
}
var file;
function exportVid(blob) {
     var formData = new FormData();
     file  = new File([blob],'video.mp4',{type: 'video/mp4'});
     formData.append('video',file);
     var request = new XMLHttpRequest();
     request.open("POST", "php/uploadVideoTemp.php");
     request.send(formData);
     request.onload = function() {
         if (request.status == 200) {
              console.log('response= ',request.responseText);
              const vid = document.createElement('video');
              vid.src = request.responseText
              vid.controls = true;
              vid.style.width = '100%'
              vid.style.maxWidth = '375px'
              $('#imgPreview').before(vid);
              $('#imgPreview').remove()
        }
    }
}
No upload I’m getting this way:
<?php
    if (!isset($_SESSION)) session_start();
    $dir = "../Temp/".$_SESSION['userId']."/";
    $RandomStr = Rand (100000000000000,999999999999999);
    $name = $RandomStr;
    $fileName = $_FILES["video"]["name"];
    $fileTmpLoc = $_FILES["video"]["tmp_name"];
    $fileType = $_FILES["video"]["type"];
    $fileSize = $_FILES["video"]["size"]; 
    $fileErrorMsg = $_FILES["video"]["error"]; 
    header('Content-Type: video/mp4');
    if(move_uploaded_file($fileTmpLoc, "../Temp/".$_SESSION['userId']."/$name.mp4")){
        echo "Temp/".$_SESSION['userId']."/$name.mp4";
    } 
?>