RecordRTC扩展有问题地保存一个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或保存在内存中。

链接RecordRTC和HTML2-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