Permalink
5ca2539 Oct 24, 2016
237 lines (194 sloc) 6.47 KB
<title>HTML5 WebPage Activity Recording using RecordRTC</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>HTML5 WebPage Activity Recording using RecordRTC</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.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 canvas2d = document.createElement('canvas');
var context = canvas2d.getContext('2d');
canvas2d.width = elementToShare.clientWidth;
canvas2d.height = elementToShare.clientHeight;
canvas2d.style.top = 0;
canvas2d.style.left = 0;
canvas2d.style.zIndex = -1;
(document.body || document.documentElement).appendChild(canvas2d);
var isRecordingStarted = false;
var isStoppedRecording = false;
(function looper() {
if(!isRecordingStarted) {
return setTimeout(looper, 500);
}
html2canvas(elementToShare, {
grabMouse: true,
onrendered: function(canvas) {
context.clearRect(0, 0, canvas2d.width, canvas2d.height);
context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);
if(isStoppedRecording) {
return;
}
setTimeout(looper, 1);
}
});
})();
var recorder = new RecordRTC(canvas2d, {
type: 'canvas'
});
document.getElementById('start').onclick = function() {
document.getElementById('start').disabled = true;
isStoppedRecording = false;
isRecordingStarted = true;
playVideo(function() {
recorder.startRecording();
setTimeout(function() {
document.getElementById('stop').disabled = false;
}, 1000);
});
};
document.getElementById('stop').onclick = function() {
this.disabled = true;
isStoppedRecording = true;
recorder.stopRecording(function() {
var blob = recorder.getBlob();
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.src = URL.createObjectURL(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/RecordRTC/Canvas-Recording/" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">Other Canvas-Recording Demos</a>