recordrtc/Canvas-Recording/index.html

RecordRTC is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.

<title>RecordRTC Canvas/HTML Recorder</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<style>
body {
    overflow-x: hidden;
    background: rgb(233, 233, 233);
}

#elementToShare {
    background: rgb(233, 233, 233);
    font-size: 2em;
    height: 100%;
    left: 0;
    padding: 0 1em;
    position: absolute;
    top: 0;
    width: 100%;
}

input,
textarea {
    border: 1px solid red;
    font-size: 1em;
    outline: none;
    padding: .3em .8em;
}

button,
input[type=button] {
    -moz-border-radius: 3px;
    -moz-transition: none;
    -webkit-transition: none;
    background: #0370ea;
    background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
    background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
    border: 1px solid #076bd2;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-family: inherit;
    font-size: .8em;
    font-size: 1.5em;
    line-height: 1.3;
    padding: 5px 12px;
    text-align: center;
    text-shadow: 1px 1px 1px #076bd2;
}

button:hover,
input[type=button]:hover {
    background: rgb(9, 147, 240);
}

button:active,
input[type=button]:active {
    background: rgb(10, 118, 190);
}

button[disabled],
input[type=button][disabled] {
    background: none;
    border: 1px solid rgb(187, 181, 181);
    color: gray;
    text-shadow: none;
}

a {
    color: #2844FA;
    cursor: pointer;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #1B29A4;
}

a:active {
    color: #000;
}

img, textarea, input, video {
    vertical-align: top;
}
textarea {
    resize: verticalz;
}
</style>

<div id="elementToShare" contenteditable style="margin-top: 3px;">
    <h2>Welcome to <a href="https://www.webrtc-experiment.com/RecordRTC/" contenteditable="false">RecordRTC</a> Canvas/HTML Recorder!</h2>
    <input type="text" value="Type Text!" />
    <textarea>resize textarea</textarea><br>
    You can resize image or above header and drag/move video:<br>
    <img src="WebRTC.png" style="max-width:100%;position:absolute;left:0;background-color:black;">
    <video controls style="width:33%;position:absolute;right:100px; top:150px;background-color:black;" poster="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTaNXZNkyP2h2vTVJ6MNzQ-qjN8CkmPgtXmNwgMDm4U79frY2j4mQ"></video>
    <br />

    <div id="other-demo-hints">There is another demo, that allows you <a href="https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/record-canvas-drawings.html">record drawings</a>!</div>

    <br>

    <pre>
var recorder = RecordRTC(document.documentElement, {
    type: 'canvas',
    showMousePointer: true
});
recorder.startRecording();
recorder.stopRecording(function(url) {
    window.open(url);
});
</pre>
</div>

<div style="position: fixed;left: 20%;right: 20%;text-align: center;">
    <button id="start" contenteditable="false">Start Canvas Recording</button>
    <button id="stop" disabled contenteditable="false">Stop</button>
</div>

<script src="https://cdn.webrtc-experiment.com/screenshot.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/Whammy.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/CanvasRecorder.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/MediaStreamRecorder.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/gumadapter.js"></script>

<script>
$( 'img' ).css('cursor', 'move').draggable().resizable();
$('video, h2, #other-demo-hints').css('cursor', 'move').draggable();

var elementToShare = document.getElementById('elementToShare');
var recorder = new CanvasRecorder(elementToShare, {
    disableLogs: false
});

document.getElementById('start').onclick = function() {
    document.getElementById('start').disabled = true;

    playVideo(function() {
        recorder.record();    
        setTimeout(function() {
            document.getElementById('stop').disabled = false;
        }, 1000);
    });
};
document.getElementById('stop').onclick = function() {
    this.disabled = true;
    recorder.stop(function(blob) {
        var video = document.createElement('video');
        video.src = URL.createObjectURL(blob);
        video.setAttribute('style', 'height: 100%; position: absolute; top:0;');
        document.body.appendChild(video);
        video.controls = true;
        video.play();
    });
};

window.onbeforeunload = function() {
    document.getElementById('start').disabled = false;
    document.getElementById('stop').disabled = true;
};

webrtcUtils.enableLogs = false;

var videoElement = document.querySelector('video');
function playVideo(callback) {
    function successCallback(stream) {
        videoElement.onloadedmetadata = function() {
            callback();
        };
        videoElement.srcObject = stream;
        videoElement.play();
    }

    function errorCallback(error) {
        console.error('get-user-media error', error);
        callback();
    }

    var mediaConstraints = { video: true };

    navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
}
</script>
<a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">←WebRTC Experiments Homepage</a>