Permalink
Fetching contributors…
Cannot retrieve contributors at this time
143 lines (111 sloc) 4.01 KB
<style>
html, body {
margin: 0!important;
padding: 0!important;
}
video {
width: auto;
max-width: 100%;
}
</style>
<title>HTML Element Recording | RecordRTC</title>
<h1>HTML Element Recording using RecordRTC</h1>
<br>
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>
<hr>
<div style="display: none;">
<video controls autoplay playsinline id="preview-video"></video>
</div>
<div id="element-to-record" style="border: 5px solid gray; border-radius: 5px; padding: 20px; margin: 20px; min-height: 300px;">
<input value="type something"><br><br>
<span id="timer"></span><br><br>
<span id="counter"></span><br><br>
<canvas id="canvas-for-video" crossOrigin="Anonymous" width=320 height=240></canvas>
</div>
<canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas>
<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/html2canvas.min.js"></script>
<script>
var elementToRecord = document.getElementById('element-to-record');
var canvas2d = document.getElementById('background-canvas');
var context = canvas2d.getContext('2d');
canvas2d.width = elementToRecord.clientWidth;
canvas2d.height = elementToRecord.clientHeight;
var isRecordingStarted = false;
var isStoppedRecording = false;
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
(function looper() {
if(!isRecordingStarted) {
return setTimeout(looper, 500);
}
html2canvas(elementToRecord).then(function(canvas) {
context.clearRect(0, 0, canvas2d.width, canvas2d.height);
context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);
if(isStoppedRecording) {
return;
}
requestAnimationFrame(looper);
});
})();
var canvasX = document.getElementById('canvas-for-video');
canvasX.width = 320;
canvasX.height = 240;
var contextX = canvasX.getContext('2d');
var index=0;
function looper2() {
index++;
if(typeof timer !== 'undefined' && index % 100 == 0) {
timer.style.color = getRandomColor();
}
contextX.drawImage(videoX, 0, 0, canvasX.width, canvasX.height);
requestAnimationFrame(looper2);
}
var videoX = document.createElement('video');
videoX.onloadedmetadata = function() {
looper2();
};
videoX.crossOrigin = 'Anonymous';
videoX.volume=0;
videoX.autoplay = true;
videoX.src = 'https://storage.googleapis.com/media-session/caminandes/short.mp4';
videoX.style = 'position: absolute; top: -99999999999; left: -99999999999;';
document.body.appendChild(videoX);
var recorder = new RecordRTC(canvas2d, {
type: 'canvas'
});
document.getElementById('btn-start-recording').onclick = function() {
this.disabled = true;
isStoppedRecording =false;
isRecordingStarted = true;
recorder.startRecording();
document.getElementById('btn-stop-recording').disabled = false;
};
document.getElementById('btn-stop-recording').onclick = function() {
this.disabled = true;
recorder.stopRecording(function() {
isRecordingStarted = false;
isStoppedRecording = true;
var blob = recorder.getBlob();
document.getElementById('preview-video').src = URL.createObjectURL(blob);
document.getElementById('preview-video').parentNode.style.display = 'block';
elementToRecord.style.display = 'none';
// window.open(URL.createObjectURL(blob));
});
};
var timer = document.getElementById('timer');
var counter = document.getElementById('counter');
var interval = setInterval(function() {
timer.innerHTML = new Date();
counter.innerHTML = (Math.random() * 100).toString().replace('.', '');
}, 1000);
</script>
<footer style="margin-top: 120px;"><small id="send-message"></small></footer>
<script src="https://cdn.webrtc-experiment.com/common.js"></script>