RecordRTC.js Example to Record or Capture HTML Element Canvas Animation and Downloads it as MP4 Video in Browser Using Javascript Full Project For Beginners

 

 

index.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="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/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>

Leave a Reply