How To Create Custom Screen Recorder Using WebRTC Javascript Html


WebRTC is a project that provides real-time communication via simple application programming interfaces with web browsers and mobile applications. It is a free and open-source.

In this article, we will how to use the Screen Capture API and their important method, Code


  • getDisplayMedia() method : used to capture part or all of a screen for streaming, recording, or sharing during a WebRTC conference session.
  • navigator.mediaDevices.getDisplayMedia(): Capturing screen contents as a live MediaStream.


  • cursor Indicates whether or not to capture the mouse cursor, The bellow is possible values are:
  • always:The mouse cursor always be captured in stream.
  • motion:while moving cursor is only be visible
  • never:The mouse cursor never be visible in stream.
  • logicalSurface:A Boolean value. if true it means that the capture include offscreen areas of screen, if there is any.

Bellow is the main code file for creating screen recorder


static _startScreenCapture() {
    if (navigator.getDisplayMedia) {
      return navigator.getDisplayMedia({video: true});
    } else if (navigator.mediaDevices.getDisplayMedia) {
      return navigator.mediaDevices.getDisplayMedia({video: true});
    } else {
      return navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}});

  async _startCapturing(e) {
    console.log('Start capturing.');
    this.status = 'Screen recording started.';
    this.enableStartCapture = false;
    this.enableStopCapture = true;
    this.enableDownloadRecording = false;

    if (this.recording) {

    this.chunks = [];
    this.recording = null; = await ScreenSharing._startScreenCapture();'inactive', e => {
      console.log('Capture stream inactive - stop recording!');
    this.mediaRecorder = new MediaRecorder(, {mimeType: 'video/webm'});
    this.mediaRecorder.addEventListener('dataavailable', event => {
      if ( && > 0) {

  _stopCapturing(e) {
    console.log('Stop capturing.');
    this.status = 'Screen recorded completed.';
    this.enableStartCapture = true;
    this.enableStopCapture = false;
    this.enableDownloadRecording = true;

    this.mediaRecorder = null; => track.stop()); = null;

    this.recording = window.URL.createObjectURL(new Blob(this.chunks, {type: 'video/webm'}));

  _downloadRecording(e) {
    console.log('Download recording.');
    this.enableStartCapture = true;
    this.enableStopCapture = false;
    this.enableDownloadRecording = false;

    const downloadLink = this.shadowRoot.querySelector('a#downloadLink');
    downloadLink.addEventListener('progress', e => console.log(e));
    downloadLink.href = this.recording; = 'screen-recording.webm';;

Add a Comment

Your email address will not be published. Required fields are marked *