Screen recorder

index.html

<div class="layout">
  <div class="layout__video">
    <video class="video__player video__player--recorder" id="js-video-recorder" autoplay muted></video>
    <div class="video__buttons">
      <button class="video__buttons video__buttons--record" id="js-button-record" disabled>Start Recording</button>
      <button class="video__buttons video__buttons--play" id="js-button-play" disabled>Play</button>
      <button class="video__buttons video__buttons--download" id="js-button-download" disabled>Download</button>
    </div>
  </div>
  <div class="layout__video">
    <video class="video__player video__player--player" id="js-video-player" loop controls></video>
  </div>
</div>

screen-recorder.markdown

Screen recorder

A Pen by Nirmalya Ghosh on CodePen.

License.

script.js

/*
*  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
*
*  Use of this source code is governed by a BSD-style license
*  that can be found in the LICENSE file in the root of the source
*  tree.
*/

// This code is adapted from
// https://rawgit.com/Miguelao/demos/master/mediarecorder.html

'use strict';

/* globals MediaRecorder */

var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
var mediaRecorder;
var recordedBlobs;
var sourceBuffer;

var gumVideo = document.querySelector('video#js-video-recorder');
var recordedVideo = document.querySelector('video#js-video-player');

var recordButton = document.querySelector('button#js-button-record');
var playButton = document.querySelector('button#js-button-play');
var downloadButton = document.querySelector('button#js-button-download');
recordButton.onclick = toggleRecording;
playButton.onclick = play;
downloadButton.onclick = download;

// window.isSecureContext could be used for Chrome
var isSecureOrigin = location.protocol === 'https:' ||
location.hostname === 'localhost';
if (!isSecureOrigin) {
  alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' +
    '\n\nChanging protocol to HTTPS');
  location.protocol = 'HTTPS';
}

var constraints = {
  audio: true,
  video: true
};

function handleSuccess(stream) {
  recordButton.disabled = false;
  console.log('getUserMedia() got stream: ', stream);
  window.stream = stream;
  gumVideo.srcObject = stream;
}

function handleError(error) {
  console.log('navigator.getUserMedia error: ', error);
  if (error.name === "NotAllowedError") {
    alert(`You need to allow access to your camera and microphone for this page.`); 
  }
}

navigator.mediaDevices.getUserMedia(constraints).
    then(handleSuccess).catch(handleError);

function handleSourceOpen(event) {
  console.log('MediaSource opened');
  sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
  console.log('Source buffer: ', sourceBuffer);
}

recordedVideo.addEventListener('error', function(ev) {
  console.error('MediaRecording.recordedMedia.error()');
  alert('Your browser can not play\n\n' + recordedVideo.src
    + '\n\n media clip. event: ' + JSON.stringify(ev));
}, true);

function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

function handleStop(event) {
  console.log('Recorder stopped: ', event);
}

function toggleRecording() {
  if (recordButton.textContent === 'Start Recording') {
    startRecording();
  } else {
    stopRecording();
    recordButton.textContent = 'Start Recording';
    playButton.disabled = false;
    downloadButton.disabled = false;
  }
}

function startRecording() {
  recordedBlobs = [];
  var options = {mimeType: 'video/webm;codecs=vp9'};
  if (!MediaRecorder.isTypeSupported(options.mimeType)) {
    console.log(options.mimeType + ' is not Supported');
    options = {mimeType: 'video/webm;codecs=vp8'};
    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
      console.log(options.mimeType + ' is not Supported');
      options = {mimeType: 'video/webm'};
      if (!MediaRecorder.isTypeSupported(options.mimeType)) {
        console.log(options.mimeType + ' is not Supported');
        options = {mimeType: ''};
      }
    }
  }
  try {
    mediaRecorder = new MediaRecorder(window.stream, options);
  } catch (e) {
    console.error('Exception while creating MediaRecorder: ' + e);
    alert('Exception while creating MediaRecorder: '
      + e + '. mimeType: ' + options.mimeType);
    return;
  }
  console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
  recordButton.textContent = 'Stop Recording';
  playButton.disabled = true;
  downloadButton.disabled = true;
  mediaRecorder.onstop = handleStop;
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(10); // collect 10ms of data
  console.log('MediaRecorder started', mediaRecorder);
}

function stopRecording() {
  mediaRecorder.stop();
  console.log('Recorded Blobs: ', recordedBlobs);
  recordedVideo.controls = true;
}

function play() {
  var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
  recordedVideo.src = window.URL.createObjectURL(superBuffer);
  // workaround for non-seekable video taken from
  // https://bugs.chromium.org/p/chromium/issues/detail?id=642012#c23
  recordedVideo.addEventListener('loadedmetadata', function() {
    if (recordedVideo.duration === Infinity) {
      recordedVideo.currentTime = 1e101;
      recordedVideo.ontimeupdate = function() {
        recordedVideo.currentTime = 0;
        recordedVideo.ontimeupdate = function() {
          delete recordedVideo.ontimeupdate;
          recordedVideo.play();
        };
      };
    }
  });
}

function download() {
  var blob = new Blob(recordedBlobs, {type: 'video/webm'});
  var url = window.URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'test.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
}

scripts

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

style.scss

.layout {
  background-color: #fff;
  margin: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
  &__video {
    .video__player {
      background-color: #000;
      width: 500px;
      height: 400px;
      
      &.video__player {
        &--recorder {
          height: 368px;
          margin-top: -10px;
        }

        &--player {
          margin-left: 50px;
        } 
      }
    }
    
    .video__buttons {
      border: 0;
      background-color: #fafafa;
      font-weight: 100;
      font-size: 12px;
      margin-top: -4px;
      padding: 4px;
      
      .video__buttons {
        &--record {
          margin-top: 2px;
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .layout {
    &__video {
      .video__player {
        width: 300px;
        height: 200px;
        
        &.video__player {
          &--recorder {
            height: 168px;
            margin-top: -10px;
          }

          &--player {
            margin-left: 50px;
          } 
        }
      }
    }
  }
}

The video size is 640x480, any idea how i can make it to 1920x1080