I am currently having an issue with the following code. I keep getting back an empty array from upload.php even though I send the FormData with the .mp4 blob/file created and attached to said FormData. It's just not clear as to why it's empty as I can even console.log the FormData object I created and clearly see that the blob/file object was added. So really not sure why the server is not getting it. I've looked far and wide to find a solution but to no avail.
Any assistance given will be greatly appreciated guys. Thanks in advance
<!--INDEX.HTML-->
<!DOCTYPE html>
<html>
<head>
<title>Media Recorder in Javascript</title>
<link rel="stylesheet" href="./main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
</head>
<body>
<div id="container">
<video id="gum" playsinline autoplay muted></video>
<video id="recorded" playsinline loop></video>
<div>
<button id="start">Start camera</button>
<button id="record" disabled>Record</button>
<button id="play" disabled>Play</button>
<button id="download" disabled>Download</button>
</div>
<div>
<h4>Media Stream Constraints options</h4>
<p>
Echo cancellation: <input type="checkbox" id="echoCancellation" />
</p>
</div>
<div>
<span id="errorMsg"></span>
</div>
</div>
</body>
<script src="./script.js"></script>
</html>
//SCRIPT.JS
'use strict';
/* globals MediaRecorder */
let mediaRecorder;
let recordedBlobs;
const errorMsgElement = document.querySelector('span#errorMsg');
const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
const playButton = document.querySelector('button#play');
const downloadButton = document.querySelector('button#download');
recordButton.addEventListener('click', () => {
if (recordButton.textContent === 'Record') {
startRecording();
} else {
stopRecording();
recordButton.textContent = 'Record';
playButton.disabled = false;
downloadButton.disabled = false;
}
});
playButton.addEventListener('click', () => {
const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
recordedVideo.src = null;
recordedVideo.srcObject = null;
recordedVideo.src = window.URL.createObjectURL(superBuffer);
recordedVideo.controls = true;
recordedVideo.play();
});
downloadButton.addEventListener('click', () => {
const blob = new Blob(recordedBlobs, {type: 'video/mp4'});
const fdata = new FormData()
var fileOfBlob = new File([blob], 'aFileName.mp4');
fdata.append("upload", fileOfBlob);
for (var key of fdata.entries()) {
console.log(key[0] + ', ' + key[1]);
}
$.ajax({
url: "upload.php",
enctype: 'multipart/form-data',
type: 'POST',
blob: fdata,
contentType: false,
processData: false,
success: function(data) {
// Sent to Server
console.log(`${data}`)
}
});
});
function handleDataAvailable(event) {
console.log('handleDataAvailable', event);
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
function startRecording() {
recordedBlobs = [];
let options = {mimeType: 'video/webm;codecs=vp9,opus'};
try {
mediaRecorder = new MediaRecorder(window.stream, options);
} catch (e) {
console.error('Exception while creating MediaRecorder:', e);
errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
return;
}
console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
recordButton.textContent = 'Stop Recording';
playButton.disabled = true;
downloadButton.disabled = true;
mediaRecorder.onstop = (event) => {
console.log('Recorder stopped: ', event);
console.log('Recorded Blobs: ', recordedBlobs);
};
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
console.log('MediaRecorder started', mediaRecorder);
}
function stopRecording() {
mediaRecorder.stop();
}
function handleSuccess(stream) {
recordButton.disabled = false;
console.log('getUserMedia() got stream:', stream);
window.stream = stream;
const gumVideo = document.querySelector('video#gum');
gumVideo.srcObject = stream;
}
async function init(constraints) {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
} catch (e) {
console.error('navigator.getUserMedia error:', e);
errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
}
}
document.querySelector('button#start').addEventListener('click', async () => {
const hasEchoCancellation = document.querySelector('#echoCancellation').checked;
const constraints = {
audio: {
echoCancellation: {exact: hasEchoCancellation}
},
//video: false
video : {width: 1280, height: 720}
};
console.log('Using media constraints:', constraints);
await init(constraints);
});
//UPLOAD.PHP
<?php
var_dump($_POST);
?>
Could you please try with the ajax response type:
And change the
blobkey tonamekey. For Example: