jscapture.js 一款纯js实现屏幕截图和屏幕录制的js插件-BFW插件库

jscapture.js 一款纯js实现屏幕截图和屏幕录制的js插件

jscapture.js 一款纯js实现屏幕截图和屏幕录制的js插件，注意:此插件运行必须在https下面，另外在chrome 37+以上版本无法运行，chrome37以下版本需要打开chrome的实验标志

JSCapture 使用getUserMedia来截屏. 目前被 Google Chrome, Canary and Chromium 三款浏览器支持，需要打开实验标志

具体步骤：
浏览器地址栏输入 chrome://flags/#enable-usermedia-screen-capture
选中- "Enable screen capture support in getUserMedia()"
重启浏览器

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            $("#capture-button").click(function() {
                use(["jscapture"], function() {
                    $('#result-modal').modal('show');
                    $('#result-image').removeAttr('src');
                    $('#result-video').hide();
                    $('#result-image').show();
                    $('#download-link').hide();
                    JSCapture.capture({
                        captureStarted: function () {
                            alert("开始截图");
                            //showCountdown('', 3000, 1000, $('#count-down'));
                        },
                        done: showImage,
                        fail: function () {
                            alert('Error, while capturing your screen. Make sure you have followed the instructions for enabling the experimental flag and allowed screen sharing.');
                        },
                        delay: 3000
                    });
                });
            });
            $("#record-button").click(function() {
                use(["jscapture"], function() {
                    $('#result-modal').modal('show');
                    $('#result-video').removeAttr('src');
                    $('#result-video').show();
                    $('#result-image').hide();
                    $('#download-link').hide();
                    JSCapture.record({
                        captureStarted: function () {
                            alert("开始录屏");
                        },
                        done: showVideo,
                        fail: function () {
                            alert('Error, while capturing your screen. Make sure you have followed the instructions for enabling the experimental flag and allowed screen sharing.');
                        },
                        duration: 5000,
                        scale: 0.3
                    });
                });
            });

        });
        function showImage(image) {
            $('#result-image').attr('src', image);
            $('#count-down').html('');
            $('#download-link').show();
            $('#download-link').attr('download', 'screenshot.png');
            $('#download-link').attr('href', image);
        }
        function showVideo(video) {
            video = URL.createObjectURL(video);
            $('#result-video').attr('src', video);
            $('#count-down').html('');
            $('#download-link').show();
            $('#download-link').attr('download', 'screen-recording.webm');
            $('#download-link').attr('href', video);
        }
    </script>
</head>
<body>
    <div class="modal fade" id="result-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Here we go...</h4>
                </div>
                <div class="modal-body">
                    <h1 id="count-down"></h1>
                    <img id="result-image">
                    <video id="result-video" autoplay></video>
                    <br>
                    <a href="#" id="download-link" download="">Download</a>
                </div>
            </div>
        </div>
    </div>



    <section class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h1 class="brand-heading">JSCapture</h1>
                        <p class="intro-text">
                            Capture your desktop with <a href="http://vanilla-js.com/">Vanilla JavaScript</a>
                        </p>

                        <div class="page-scroll">
                            <button class="btn btn-default" id="capture-button">截图</button>
                            <button class="btn btn-default" id="record-button">录屏</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>