Расширение RecordRTC проблематично сохранить div - PullRequest
Новая
       21

Расширение RecordRTC проблематично сохранить div

0 голосов
/ 22 января 2019

Использование 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);
        });  
    }

1 Ответ

0 голосов
/ 23 января 2019

Вам не нужно расширение 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 и 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));
    });
};

Демонстрация ONLINE:

...