Here, I am using the Vimeo API, to upload the video to the Vimeo Here is the below HTML Code that sends the videos to the Node JS Server in local. Here, video upload happens normally when the Stop Recording button is pressed, but when onbeforeunload event is triggered, all the data in the camera and screen chunks are empty Is there any way to retain the recorded chunks until the browser gets closed so that the data is sent into the Node JS server
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Product+Sans&display=swap');
body {
font-family: 'Product Sans', sans-serif;
font-style: normal;
font-weight: 400;
}
</style>
</head>
<body onload="setInterval(blobCheck,500)">
<h1>Screen and Camera Recording Demo</h1>
<h1>Works only for Desktops</h1>
<p>Your Camera, Microphone and Screen sharing permission is needed</p>
<video id="recordedCamera" autoplay controls></video>
<div style="margin-top:50px;margin-left:200px">
<button class="btn btn-success" id="btnStartRecording">Start Recording</button>
<button class="btn btn-danger" id="btnStopRecording">Stop Recording</button>
</div>
<script type="text/javascript">
let screenStreamRecord;
let cameraStreamRecord;
let screenStream;
let cameraStream;
var screenRecorder;
var cameraRecorder;
var screenChunks = [];
var cameraChunks = [];
let screenChunksRecord=[];
let cameraChunksRecord=[];
let cameraSource = document.querySelector("#recordedCamera");
let browserVersion;
let cameraFlag = 0;
let micFlag = 0;
let format;
let btnClk=document.getElementById("btnStopRecording");
let isUnloading = false;
let isBrowserClosed=false;
let startRecord=0;
let formDataCommon=new FormData();
let cameraBlobRecord=new Blob();
let screenBlobRecord=new Blob();
function detectOS() {
var osInfo = navigator.platform;
fetch('http://10.10.14.96:3000/detect-os', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ os: navigator.platform })
})
.then(function (response) {
console.log('Operating system information sent successfully!');
})
.catch(function (error) {
console.error('An error occurred while sending the operating system information:', error);
});
}
function startRecording() {
if(startRecord<1){
detectOS();
estimateConnectionSpeed();
console.log(navigator);
setInterval(checkDevicePermissions, 1000);
navigator.sayswho = (function () {
var ua = navigator.userAgent;
var tem;
var M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE ' + (tem[1] || '');
}
if (M[1] === 'Chrome') {
tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
browserVersion = M.join(' ');
return M.join(' ');
})();
if (browserVersion.includes("Firefox")) {
const netSpeed = estimateConnectionSpeed();
if (netSpeed < 1) {
alert("Network Speed Testing Not Supported here, Recommended Chrome for correct operation");
}
} else {
if (navigator.connection.downlink < 1) {
alert("Slow internet speed detected, Uploads may get affected");
}
}
console.log(navigator.sayswho);
if (!navigator.onLine) {
alert("Check your internet connection");
return;
}
navigator.mediaDevices.getDisplayMedia({ video: { width: 900, height: 720 }, audio: true })
.then((screenStream) => {
console.log(screenStream);
screenStreamRecord=screenStream;
screenRecorder = new MediaRecorder(screenStream);
screenRecordObj={screenRecorder:screenRecorder}
const displaySurface = screenStream.getVideoTracks()[0].getSettings().displaySurface;
//For making sure that the entire screen is being shared. Label is for Mozilla Firefox
if (displaySurface != 'monitor' && screenStream.getVideoTracks()[0].label != 'Primary Monitor') {
alert('Please Share the entire screen');
} else {
screenRecorder.addEventListener('dataavailable', (event) => {
screenChunks.push(event.data);
screenChunksRecord.push(event.data);
});
}
screenRecorder.start();
navigator.mediaDevices.getUserMedia({ video: { width: 540, height: 480 }, audio: true })
//navigator.mediaDevices.getUserMedia({ video: true,audio: true })
.then((cameraStream) => {
console.log(cameraStream);
cameraStreamRecord=cameraStream;
cameraRecorder = new MediaRecorder(cameraStream);
cameraRecordObj={cameraRecorder:cameraRecorder}
cameraRecorder.addEventListener('dataavailable', (event) => {
cameraChunks.push(event.data);
cameraChunksRecord.push(event.data);
});
cameraRecorder.start();
cameraSource.srcObject = cameraStream;
console.log('Recording started');
}
)
.catch((cameraError) => {
console.error('Error starting camera recording:', cameraError);
displayPermissionDeniedAlert('Camera permission denied');
stopRecording();
});
})
.catch((screenError) => {
console.error('Error starting screen recording:', screenError);
displayPermissionDeniedAlert('Screen permission denied');
stopRecording();
});
}
else{alert('Already Recording')}
}
function blobCheck()
{
screenBlobRecord = new Blob(screenChunksRecord,{ type: 'video/webm' });
console.log(cameraBlobRecord,screenBlobRecord);
}
window.onbeforeunload = function(event){
event.returnValue = 'Are you sure you want to close the browser';
console.log(screenStreamRecord);
screenRecorder = new MediaRecorder(screenStreamRecord);
//screenRecorder.start();
console.log(cameraStreamRecord);
cameraRecorder=new MediaRecorder(cameraStreamRecord);
if (screenRecorder && screenRecorder.state === 'recording') {
screenRecorder.stop();
}
if (cameraRecorder && cameraRecorder.state === 'recording') {
cameraRecorder.stop();
cameraSource.srcObject = '';
}
if (screenChunksRecord.length === 0 || cameraChunksRecord.length === 0) {
console.error('No recording data available');
//return;
}
const screenBlob = new Blob(screenChunksRecord, { type: 'video/webm' });
const cameraBlob = new Blob(cameraChunksRecord, { type: 'video/webm' });
const formData = new FormData();
formData.append('screenRecording', screenBlob, 'screen_recording.webm');
formData.append('cameraRecording', cameraBlob, 'camera_recording.webm');
navigator.sendBeacon('http://10.10.14.96:3000/uploadRecordings',formData);
}
function stopRecording() {
if (screenRecorder && screenRecorder.state === 'recording') {
screenRecorder.stop();
}
if (cameraRecorder && cameraRecorder.state === 'recording') {
cameraRecorder.stop();
cameraSource.srcObject = '';
}
if (screenChunks.length === 0 || cameraChunks.length === 0) {
console.error('No recording data available');
return;
}
uploadRecording();
}
function uploadRecording() {
if (screenChunks.length === 0 || cameraChunks.length === 0) {
console.log('Waiting for recording data...');
setTimeout(uploadRecording, 500); // Wait for 500 milliseconds and try again
return;
}
const screenBlob = new Blob(screenChunks, { type: 'video/webm' });
const cameraBlob = new Blob(cameraChunks, { type: 'video/webm' });
console.log(screenBlob);
console.log(cameraBlob);
screenBlobRecord=screenBlob;cameraBlobRecord=cameraBlob;
formData = new FormData();
formData.append('screenRecording', screenBlob, 'screen_recording.webm');
formData.append('cameraRecording', cameraBlob, 'camera_recording.webm');
fetch('http://10.10.14.96:3000/uploadRecordings', {
method: 'POST',
body: formData
})
.then(() => {
console.log('Recordings uploaded');
})
.catch((error) => {
console.error('Error uploading recordings:', error);
});
}
let isRecordingStopped = false; // Flag to track if recording is already stopped
function checkDevicePermissions() {
navigator.permissions.query({ name: 'camera' }).then((cameraState) => {
if (cameraState.state === 'denied' && !isRecordingStopped) {
alert('Camera Disconnected or Permission Denied');
console.log('Recording Uploaded!!');
if (screenRecorder && screenRecorder.state === 'recording') {
screenRecorder.stop();
}
if (cameraRecorder && cameraRecorder.state === 'recording') {
cameraRecorder.stop();
//cameraSource.srcObject = '';
}
if (screenChunks.length === 0 || cameraChunks.length === 0) {
console.error('No recording data available');
return;
}
const screenBlob = new Blob(screenChunks, { type: 'video/webm' });
const cameraBlob = new Blob(cameraChunks, { type: 'video/webm' });
const formData = new FormData();
formData.append('screenRecording', screenBlob, 'screen_recording.webm');
formData.append('cameraRecording', cameraBlob, 'camera_recording.webm');
fetch('http://10.10.14.96:3000/uploadRecordings', {
method: 'POST',
body: formData
})
.then(() => {
console.log('Recordings uploaded');
})
.catch((error) => {
console.error('Error uploading recordings:', error);
});
isRecordingStopped = true;
}
});
navigator.permissions.query({ name: 'microphone' }).then((micState) => {
if (micState.state === 'denied' && !isRecordingStopped) {
alert('Mic Disconnected or Permission Denied');
console.log('Recording Uploaded!!');
if (screenRecorder && screenRecorder.state === 'recording') {
screenRecorder.stop();
}
if (cameraRecorder && cameraRecorder.state === 'recording') {
cameraRecorder.stop();
cameraSource.srcObject = '';
}
if (screenChunks.length === 0 || cameraChunks.length === 0) {
console.error('No recording data available');
return;
}
screenBlobRecord=screenBlob;cameraBlobRecord=cameraBlob;
const screenBlob = new Blob(screenChunks, { type: 'video/webm' });
const cameraBlob = new Blob(cameraChunks, { type: 'video/webm' });
const formData = new FormData();
formData.append('screenRecording', screenBlob, 'screen_recording.webm');
formData.append('cameraRecording', cameraBlob, 'camera_recording.webm');
fetch('http://10.10.14.96:3000/uploadRecordings', {
method: 'POST',
body: formData
})
.then(() => {
console.log('Recordings uploaded');
})
.catch((error) => {
console.error('Error uploading recordings:', error);
});
isRecordingStopped = true;
}
});
}
function checkDeviceAvailability() {
navigator.mediaDevices.enumerateDevices()
.then((devices) => {
let cameraAvailable = false;
let microphoneAvailable = false;
let screenAvailable = false;
devices.forEach((device) => {
if (device.kind === 'videoinput') {
cameraAvailable = true;
} else if (device.kind === 'audioinput') {
microphoneAvailable = true;
} else if (device.kind === 'screen') {
screenAvailable = true;
}
});
console.log('Camera available:', cameraAvailable);
console.log('Microphone available:', microphoneAvailable);
console.log('Screen available:', screenAvailable);
if (!navigator.onLine) {
alert('Internet Disconnected');
}
navigator.permissions.query({ name: 'camera' }).then((cameraPermission) => {
console.log('Camera permission state:', cameraPermission.state);
});
navigator.permissions.query({ name: 'microphone' }).then((microphonePermission) => {
console.log('Microphone permission state:', microphonePermission.state);
});
})
.catch((error) => {
console.error('Error enumerating devices:', error);
});
}
document.getElementById('btnStartRecording').addEventListener('click', function(event) {
startRecording();
startRecord+=1;
})
btnClk.addEventListener('click',async function(e){
if(confirm("Are you sure to stop recording?")){
if (screenRecorder && screenRecorder.state === 'recording') {
screenRecorder.stop();
cameraRecorder.stop();
await uploadRecording().then(function(){;
location.reload();
});
}
else if (cameraRecorder && cameraRecorder.state === 'recording') {
cameraRecorder.stop();
await uploadRecording().then(function(){;
location.reload();
});
cameraSource.srcObject = '';
location.reload();
}
else
{
console.log('No Recording Data Available');
}
if (screenChunks.length === 0 || cameraChunks.length === 0) {
console.error('No recording data available');
return;
}
}
});
navigator.mediaDevices.addEventListener('devicechange', () => {
// Code to handle device change
checkDeviceAvailability();
stopRecording();
});
</script>
</body>
</html>
