RecordRTC Extension problematically save a div - recordrtc

Question

Using RecordRTC as an extension and also in my development work. Great work!
Is there a way my site can programatically record a div only, instead of the whole tab?
var myformat = {enableTabCaptureAPI: true, enableSpeakers: true}
if(typeof RecordRTC_Extension === 'undefined') {
alert('RecordRTC chrome extension is either disabled or not installed.');
} else {
var recorder = new RecordRTC_Extension();
//recorder.startRecording(recorder.getSupoortedFormats()[4], function() {
recorder.startRecording(myformat, function() {
setTimeout(function() {
recorder.stopRecording(function(blob) {
console.log(blob.size, blob);
var url = URL.createObjectURL(blob);
invokeSaveAsDialog(blob);
video.src = url;
});
}, 3000);
});
}

Answer 1

You do not need a chrome extension to record a DIV. I'm copying here complete demo that can record a DIV.
Start/Stop buttons:
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>
DIV to be recorded:
<div id="element-to-record">
<input value="type something">
</div>
Optionally a hidden CANVAS:
<canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas>
Hidden canvas is used to draw DIV and get webp images. It is till an optional step. You can either append it to he DOM or keep in the memory.
Link RecordRTC and HTML-2-Canvas:
<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/html2canvas.min.js"></script>
Complete javascript code:
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 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 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').srcObject = null;
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));
});
};
ONLINE demo:
https://www.webrtc-experiment.com/RecordRTC/simple-demos/recording-html-element.html