muaz-khan / RecordRTC

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.
https://www.webrtc-experiment.com/RecordRTC/
MIT License
6.49k stars 1.75k forks source link

Why??? RecordRTC not record the web screen when not perform any action on Website. Like. Mouse events #762

Open inetankit1 opened 3 years ago

inetankit1 commented 3 years ago

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); }

html2canvas(document.body, {
    type: 'view',
    grabMouse: true,
    onrendered: function(canvas) {
        context.clearRect(0, 0, canvas2d.width, canvas2d.height);
        context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);

        if(isStoppedRecording) {
            return;
        }

        setTimeout(looper, 1);
    }
});

})();

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);

});

}

stopRecord = function() { isStoppedRecording = true;

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, ''); } }