I am facing an issue with getUserMedia where I am unable to upload the video after recording. When I click the "Stop And Upload" button, I receive a null response. Can anyone provide assistance in resolving this? Thank you.
Upon clicking the "Stop And Upload" button, I encounter a null response and need the file to be directly uploaded to the webserver.
<div class="content">
<video playsinline poster="./poster.png" onclick="this.play();"></video>
<button id="btn-stop-recording" type="button" disabled>Stop And Upload</button>
<script src="./RecordRTC.js"></script>
//library URL (https://): webrtc-experiment.com/RecordRTC.js
<script>
var video = document.querySelector('video');
function captureCamera(callback) {
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) {
callback(camera);
}).catch(function(error) {
alert('Unable to capture your camera. Please check console logs.');
console.error(error);
});
}
function stopRecordingCallback() {
video.src = video.srcObject = null;
video.muted = false;
video.volume = 1;
//video.src = URL.createObjectURL(recorder.getBlob());
video.src = window.URL.createObjectURL(recorder.getBlob());
document.write(video.src);
var fd = new FormData();
fd.append('fname', 'test.webm');
fd.append('data', video.srcObject);
$.ajax({
type: 'POST',
url: './true.php',
data: fd,
processData: false,
contentType: false
}).done(function(data) {
console.log(data);
});
}
var recorder; // globally accessible
document.getElementById('btn-start-recording').onclick = function() {
this.disabled = true;
captureCamera(function(camera) {
video.muted = true;
video.volume = 0;
video.srcObject = camera;
recorder = RecordRTC(camera, {
type: 'video',
mimeType: 'video/webm'
});
recorder.startRecording();
// release camera on stopRecording
recorder.camera = camera;
document.getElementById('btn-stop-recording').disabled = false;
});
};
document.getElementById('btn-stop-recording').onclick = function() {
this.disabled = true;
recorder.stopRecording(stopRecordingCallback);
};
</script>
<div>
File true.php >>>>
<?php
foreach(array('video') as $type) {
if (isset($_FILES["${type}-blob"])) {
echo 'uploads/';
$fileName = $_POST["${type}-filename"];
$uploadDirectory = 'uploads/'.$fileName;
if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) {
echo(" problem moving uploaded file");
}
echo($fileName);
}
}
?>
After checking the console log, it appears that the file is being sent to the server. However, upon receiving the file in the PHP script, it fails to upload to the server.
POST DATA FROM AJAX CALL:
POST /true.php HTTP/1.1
Host: localhost:9090
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0
Accept: */*
Accept-Language: es-ES,es;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
X-Requested-With: XMLHttpRequest
Content-Type: multipart/form-data; boundary=---------------------------39520532461108107029652486848
Content-Length: 644254
Origin: http://localhost:9090
Connection: close
Referer: http://localhost:9090/
-----------------------------39520532461108107029652486848
Content-Disposition: form-data; name="fname"
test.webm
-----------------------------39520532461108107029652486848
Content-Disposition: form-data; name="data"; filename="blob"
Content-Type: video/webm