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

Everyone has every option I have RecordRTC.js Example to Build a WebRTC Video Recorder From Webcam and Play, Download Recorded Video as MP4 File in Browser Using Javascript I have the option to write this article. I am writing this article to resolve your doubts. We ask that you understand this article well.

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

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

Read Also: RecordRTC.js Example to Record or Capture Screen and Download it as MP4 Video File in Browser Using Javascript

Final Words

We hope the RecordRTC.js Example to Build a WebRTC Video Recorder From Webcam and Play, Download Recorded Video as MP4 File in Browser Using Javascript article fills your doubts. And let us know if you have any doubts. We resolve your doubts Thank you.