RecordRTC.js 浏览器端实现视频+音频+屏幕录像的js插件-BFW插件库

RecordRTC.js 浏览器端实现视频+音频+屏幕录像的js插件
第一步引入bfwone
第二步执行插件代码
今天演示如何将html元素的变化录成视频
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=RecordRTC&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["html2canvas.min"], function() {
                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));
                    });
                };

                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);
            });
        });
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>
    <style>
        html, body {
            margin: 0!important;
            padding: 0!important;
        }

        video {
            width: auto;
            max-width: 100%;
        }
       
    </style>
</head>
<body>

    <h1>用RecordRTC录制html元素</h1>

    <br>

    <button id="btn-start-recording">开始录制</button>
    <button id="btn-stop-recording" disabled>结束录制</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;width: 480px; height: 360px;">
        <input value="输入点什么" style="width: 80%;font-size: 16px;"><br><br>
        <span id="timer"></span><br><br>
        <span id="counter"></span><br><br>
    </div>

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

</body>
</html>