记录RTC扩展有问题地保存div

Question

使用RecordRTC作为扩展，也在我的开发工作中使用。干得好！

我的网站有没有办法以编程方式仅记录div，而不是整个选项卡？

  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

您不需要 chrome 扩展程序即可录制 DIV。我在这里复制可以录制 DIV 的完整演示。

启动/停止按钮：

<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>

要记录的 DIV：

<div id="element-to-record">
    <input value="type something">
</div>

（可选）隐藏画布：

<canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas>

隐藏画布用于绘制 DIV 并获取 webp 图像。直到一个可选的步骤。您可以将其附加到 DOM 或保存在内存中。

链接记录RTC和HTML-2-Canvas：

<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/html2canvas.min.js"></script>

完整的JavaScript代码：

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));
    });
};

在线演示：

• https://www.webrtc-experiment.com/RecordRTC/simple-demos/recording-html-element.html