Skip to content

Instantly share code, notes, and snippets.

@ghoshnirmalya
Created January 14, 2018 08:46
Show Gist options
  • Save ghoshnirmalya/49b0c2c75f26cbb28710dfd3b14435d8 to your computer and use it in GitHub Desktop.
Save ghoshnirmalya/49b0c2c75f26cbb28710dfd3b14435d8 to your computer and use it in GitHub Desktop.
Screen recorder
<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>
/*
* 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);
}
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
.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;
}
}
}
}
}
}
@socialpixe
Copy link

socialpixe commented Mar 6, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment