RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
var recorder = new RecordRTC(canvas2d, {
type: 'canvas',
ignoreMutedMedia: false
});
function querySelectorAll(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector));
}
// generating a random file name
var fileName = getFileName('webm');
getRecordingFile = function() {
recorder.stopRecording(function() {
var blob = recorder.getBlob();
// we need to upload "File" --- not "Blob"
var fileObject = new File([blob], fileName, {
type: 'video/webm'
});
var formData = new FormData();
formData.append('file', fileObject);
formData.append('file_name', fileObject.name);
});
recorder.stopRecording(function() {
var blob = recorder.getBlob();
// we need to upload "File" --- not "Blob"
var fileObject = new File([blob], fileName, {
type: 'video/webm'
});
return fileObject;
// window.open(URL.createObjectURL(blob));
});
}
function getFileName(fileExtension) {
var d = new Date();
var year = d.getUTCFullYear();
var month = d.getUTCMonth();
var date = d.getUTCDate();
return 'RecordRTC-' + 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, '');
}
}
I am using below demo URL; https://github.com/muaz-khan/RecordRTC/blob/master/Canvas-Recording/webpage-recording.html
If visitor visit on site then I want to record web page
CODE: var canvas2d = document.createElement('canvas'); var context = canvas2d.getContext('2d');
canvas2d.width = $(window).width(); canvas2d.height = $(window).height(); canvas2d.style.display = "none";
(document.body || document.documentElement).appendChild(canvas2d);
var isRecordingStarted = false; var isStoppedRecording = false;
(function looper() { if(!isRecordingStarted) { return setTimeout(looper, 500); }
})();
var recorder = new RecordRTC(canvas2d, { type: 'canvas', ignoreMutedMedia: false });
function querySelectorAll(selector) { return Array.prototype.slice.call(document.querySelectorAll(selector)); }
// generating a random file name var fileName = getFileName('webm');
getRecordingFile = function() { recorder.stopRecording(function() { var blob = recorder.getBlob();
}
stopRecord = function() { isStoppedRecording = true;
}
function getFileName(fileExtension) { var d = new Date(); var year = d.getUTCFullYear(); var month = d.getUTCMonth(); var date = d.getUTCDate(); return 'RecordRTC-' + 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, ''); } }