The webRTC webcam video recorder script, for a web page, that I’m working with, creates a webm video file format.
When the video is played the filename is displayed with the playing video. What can be done so the file name doesn’t appear when any video is played? Any help is welcomed. Here’s the code:
<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>