This script (code below) successfully records a webcam.
After recording, when 'upload" is selected:
- the recorded file is directed (by a php file) to upload to a /Folder destination.
- and the the User is directed to a Form page (to complete - requiring the Users’ email address).
When the User completes the Form, and selects “send”, I receive the Form contents (via email).
How can I receive a copy of the recorded file, with the Form contents, via email?
How can the User receive a copy of the recorded file, to the email address he entered into the Form?
Any ideas/suggestions will be appreciated.
<script>
const video = document.querySelector('video')
const startvideo = document.querySelector('.start')
const upload = document.querySelector('.upload')
const initRecorder = 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)
})
}
///////////////////////////////////////////////////
//Reset the Camera
function resetCamera(){
location.reload();
}
/////////////////////////////////////////////////////////
// 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 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 = '../uploadWC.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);
}
// this function is used to generate random file name
function getFileName(fileExtension) {
var d = new Date();
var year = d.getUTCFullYear();
var month = d.getUTCMonth() +1;
var date = d.getUTCDate();
return 'VTH-' + year + month + date + '-' + getRandomString() + '.' + fileExtension;
}
function getRandomString() {
if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
var a = window.crypto.getRandomValues(new Uint32Array(3)),
token = '';
for (var i = 0, l = a.length; i < l; i++) {
token += a[i].toString(36);
}
return token;
} else {
return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
}
}
}
}
navigator
.mediaDevices
.getUserMedia({audio: true, video: true })
.then(initRecorder)
.catch(console.error)
</script>