recording-html-element.html

<style>
    html, body {
        margin: 0!important;
        padding: 0!important;
    }

    video {
        width: auto;
        max-width: 100%;
    }
</style>

<title>HTML Element Recording | RecordRTC</title>
<h1>HTML Element Recording using RecordRTC</h1>

<br>

<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>

<hr>
<div style="display: none;">
    <video controls autoplay playsinline id="preview-video"></video>
</div>
<div id="element-to-record" style="border: 5px solid gray; border-radius: 5px; padding: 20px; margin: 20px;width: 480px; height: 360px;">
    <input value="type something" style="width: 80%;font-size: 16px;"><br><br>
    <span id="timer"></span><br><br>
    <span id="counter"></span><br><br>
</div>

<canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas>

<script src="/RecordRTC.js"></script>
<script src="https://www.webrtc-experiment.com/html2canvas.min.js"></script>

<script>
var elementToRecord = document.getElementById('element-to-record');
var canvas2d = document.getElementById('background-canvas');
var context = canvas2d.getContext('2d');

canvas2d.width = elementToRecord.clientWidth;
canvas2d.height = elementToRecord.clientHeight;

var isRecordingStarted = false;
var isStoppedRecording = false;

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

(function looper() {
    if(!isRecordingStarted) {
        return setTimeout(looper, 500);
    }

    html2canvas(elementToRecord).then(function(canvas) {
        context.clearRect(0, 0, canvas2d.width, canvas2d.height);
        context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);

        if(isStoppedRecording) {
            return;
        }

        requestAnimationFrame(looper);
    });
})();

var recorder = new RecordRTC(canvas2d, {
    type: 'canvas'
});

document.getElementById('btn-start-recording').onclick = function() {
    this.disabled = true;
    
    isStoppedRecording =false;
    isRecordingStarted = true;

    recorder.startRecording();
    document.getElementById('btn-stop-recording').disabled = false;
};

document.getElementById('btn-stop-recording').onclick = function() {
    this.disabled = true;
    
    recorder.stopRecording(function() {
        isRecordingStarted = false;
        isStoppedRecording = true;

        var blob = recorder.getBlob();
        // document.getElementById('preview-video').srcObject = null;
        document.getElementById('preview-video').src = URL.createObjectURL(blob);
        document.getElementById('preview-video').parentNode.style.display = 'block';
        elementToRecord.style.display = 'none';

        // window.open(URL.createObjectURL(blob));
    });
};

var timer = document.getElementById('timer');
var counter = document.getElementById('counter');
var interval = setInterval(function() {
    timer.innerHTML = new Date();
    counter.innerHTML = (Math.random() * 100).toString().replace('.', '');
}, 1000);
</script>

<footer style="margin-top: 120px;"><small id="send-message"></small></footer>
<script src="https://www.webrtc-experiment.com/common.js"></script>