RecordRTC.js Example to Build a WebRTC Video Recorder From Webcam and Play, Download Recorded Video as MP4 File in Browser Using Javascript Full Project For Beginners

 

 

index.html

 

 

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

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

<br>

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

<hr>
<video controls autoplay playsinline></video>

<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.js"></script>
<script>
var video = document.querySelector('video');

function captureCamera(callback) {
  navigator.mediaDevices.getUserMedia({ audio: true, 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() {
  video.src = video.srcObject = null;
  video.muted = false;
  video.volume = 1;
  video.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) {
      video.muted = true;
      video.volume = 0;
      video.srcObject = camera;

      recorder = RecordRTC(camera, {
          type: 'video'
      });

      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