Only in Firefox, when I play a video, from the web recorder script - html5 player, I see Infinity:NaN:NaN once the video is played. It replaces the played time on the controls, for example it replaces 00:15, once the video has played. Upon researching/googling I see NaN means ‘not a number’, but I couldn’t find anything on removing that or keeping it from displaying. Any ideas/suggestions will be appreciated. Here’s the webcam script:
<script>
const video = document.querySelector('video')
const startvideo = document.querySelector('.start')
const stopvideo = document.querySelector('.stop')
const upload = document.querySelector('.upload')
const initRecorder = stream => {
const recorder = new MediaRecorder(stream)
let blob
video.srcObject = stream
startvideo.removeAttribute('disabled')
video.addEventListener('loadedmetadata', () => {
video.play()
})
recorder.addEventListener('dataavailable', ({ data }) => {
video.srcObject = null
video.src = URL.createObjectURL(data)
// Create a blob from the data for upload
blob = new Blob([data], { type: 'video/webm' })
})
startvideo.addEventListener('click', () => {
stopvideo.removeAttribute('disabled')
show()
reset()
start()
recorder.start()
// Get the video element with id="myVideo"
document.getElementsByTagName("span")[0].removeAttribute("class")
document.getElementsByTagName("span")[0].setAttribute("class", "colorred")
//document.getElementById("demo").innerHTML ="Recording...."
})
stopvideo.addEventListener('click', () => {
upload.removeAttribute('disabled')
recorder.stop()
stop()
document.getElementsByTagName("span")[0].removeAttribute("class")
document.getElementsByTagName("span")[0].setAttribute("class", "colorgreen")
//document.getElementById("demo").innerHTML ="recorded Successfully ..."
video.setAttribute("controls","controls")
})
// Upload the video blob as form data ............................
upload.addEventListener('click', () => {
uploadBlob(blob)
})
}
// uploading functionality
var blob, fileName, fileObject;
function uploadBlob(blob) {
prepareBlob(blob);
InitUploading();
}
//////////////////////////////////preparing blob metadat////////////////////
function prepareBlob(blob){
// generating a random file name
fileName = getFileName('webm');
// we need to upload "File" --- not "Blob"
fileObject = new File([blob], fileName, {
type: 'video/webm'
});
}
function InitUploading()
{
uploadToPHPServer(fileObject, function (response, fileDownloadURL) {
if (response !== 'ended') {
document.getElementById('header').innerHTML = response; // upload progress
return;
}
document.getElementById('header').innerHTML = '<a href="' + fileDownloadURL +
'" target="_blank">' +
fileDownloadURL + '</a>';
//alert('Successfully uploaded recorded blob.');
// preview uploaded file
video.src = fileDownloadURL;
// open uploaded file in a new tab
window.open(fileDownloadURL);
});
}
function uploadToPHPServer(blob, callback) {
// create FormData
var formData = new FormData();
formData.append('video-filename', blob.name);
formData.append('video-blob', blob);
callback('Uploading recorded-file to server.');
makeXMLHttpRequest('saveWC.php', formData, function (progress) {
if (progress !== 'Upload Complete') {
callback(progress);
return;
}
// var initialURL = 'uploads/' + blob.name;
callback('ended', initialURL);
});
}
///////////////////////////////////////////////////////////////////////////////////
function makeXMLHttpRequest(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
if (request.responseText === 'success') {
callback('Upload Complete');
return;
}
//alert(request.responseText);
window.location.href = '../upload.html';
return;
}
};
request.upload.onloadstart = function () {
callback('Upload Begins...');
};
request.upload.onprogress = function (event) {
callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
};
request.upload.onload = function () {
callback('Progress Ending');
};
request.upload.onload = function () {
callback('Upload Complete');
};
request.upload.onerror = function (error) {
callback('Upload Failed.');
};
request.upload.onabort = function (error) {
callback('Upload Aborted.');
};
request.open('POST', url);
request.send(data);
}
navigator
.mediaDevices
.getUserMedia({audio: true, video: true })
.then(initRecorder)
.catch(console.error)
</script>
See attached image: