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";
}
?>