How To Create Custom Screen Recorder Using WebRTC Javascript Html

Introduction:

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

Method

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

Options

  • 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

Code:

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;
    this.requestUpdate('buttons');

    if (this.recording) {
      window.URL.revokeObjectURL(this.recording);
    }

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

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

    this.mediaRecorder.stop();
    this.mediaRecorder = null;
    this.stream.getTracks().forEach(track => track.stop());
    this.stream = 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;
    downloadLink.download = 'screen-recording.webm';
    downloadLink.click();
  }

Add a Comment

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