RecordRTC.js Example to Build Gif Recorder With Size From Webcam in Browser Using Javascript Full Project For Beginners

 

 

index.html

 

 

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

<title>Gif Recording | RecordRTC</title>
<h1>Simple Gif Recording using RecordRTC</h1>

<br>

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

<hr>
<img>

<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.min.js"></script>
<script src="https://www.webrtc-experiment.com/gif-recorder.js"></script>
<script>
var image = document.querySelector('img');

function captureCamera(callback) {
  navigator.mediaDevices.getUserMedia({ video: true }).then(function(camera) {
      callback(camera);
  }).catch(function(error) {
      alert('Unable to capture your camera. Please check console logs.');
      console.error(error);
  });
}

function stopRecordingCallback() {
  document.querySelector('h1').innerHTML = 'Gif recording stopped: ' + bytesToSize(recorder.getBlob().size);
  image.src = URL.createObjectURL(recorder.getBlob());
  recorder.camera.stop();
  recorder.destroy();
  recorder = null;
}

var recorder; // globally accessible

document.getElementById('btn-start-recording').onclick = function() {
  this.disabled = true;
  captureCamera(function(camera) {
      document.querySelector('h1').innerHTML = 'Waiting for Gif Recorder to start...';
      recorder = RecordRTC(camera, {
          type: 'gif',
          frameRate: 1,
          quality: 10,
          width: 360,
          hidden: 240,
          onGifRecordingStarted: function() {
              document.querySelector('h1').innerHTML = 'Gif recording started.';
          },
          onGifPreview: function(gifURL) {
              image.src = gifURL;
          }
      });

      recorder.startRecording();

      // release camera on stopRecording
      recorder.camera = camera;

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

document.getElementById('btn-stop-recording').onclick = function() {
  this.disabled = true;
  recorder.stopRecording(stopRecordingCallback);
};
</script>

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

Leave a Reply