油猴脚本开发 | 视频录屏

一、Tampermonkey

二、代码

代码=>网页游戏、网页视频录屏

// ==UserScript==
// @name         网页游戏、网页直播录屏
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       echohye
// @match        *://*/*
// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABSRJREFUWEftlmtQVGUYx//nnN2zyy4XYXEXdFmvOKA5tpKDqQioqWkFZnYbhxormmDZoFTkg0E5TSqDFpc0nTKnvFQmOBHNKFMoM8iM4CVGnRFtNMEa3eQiEHsu79ucZXZxaRfWbMYvPl/f5/J7/89znvcweMDGPOD6eAjwUIF7VqAoYfbrt8407XYPr3FSEG63yT1UliQiivpISnVFgBTocAcMYOf5NE4btC+xZLe+/s2XUX4z2VXDZjyOxE2bwDkaMOqpD1CbNl8MnRy3+4+zpwp3AY4ds5HH65D22s9I8QUVEIBdpfoz6Yvv+g0Jc8YpSb6fPtYD4E6qgCi2sqUdjqZG1K9ZKRFZWhZlgSY2AXNfrETBfwLICw7pXnbifAin0XjifQHUFF9FTfE1F4DbqqwxMgQhvhRo9dcSLwVsAC3H4G6wq9WOpceaDdrRJq94BUCxKfONIMETcbmm0XP7oYWqrJYuKjhNZYBzWAWU4mUngZzHAQXCBqZ3waFaRh0aFsSqVAgyRfu8hBtGOYx/611MzXoHQlcHZKcTWkMkGE6FyuljOsuIHO4XwAasip2Jb+0VAwDg+KOmOUmp8Vlr1fqY8dCER/gdanc7Whs6sXftHSR//RPEnjsgogilbXzYKFyvqaKnC9ctLZOcR4cmcrUgi+WLWCIUug8JYJldvLPJvGyFcaTPSQGYtToOr2wz4bMCI6bkfuwVQgnB7XPNaLBl1At3ehJBaa5IxP27gC7FkbFxmmco6OoKWXjeM9GAvOLXdlaRLxA7t/k9XN73Oaw5GZiY+ZHPkMoZ5j5OUk8WWCmTYbCRYciickmqY7I5nlbIgtcw2tXq3vSzbbpAirtu4WjCodQ0zNu5D6a5Pj93VFktzlLBqVX8c8BPJRyaKmRBx2SpNItZ0IXlkpDvLvi2ViukNV9TBwqg+PU7bkIb6b9jR6wW6RPB6cnpajtL6lw3t3H8Kgp8CUrzKoi4y87zYvqZ64HpD4BerUX1ygwQmUClUSG1pAC6edle/FUzzHKpJLpyeilwt1c2q84Ew2xnKNGmHqxhw6fNCEiEH2dFY+M3BGGRA+7rFgFLquvAGeM98YcfiaKE45cylP4AQBZlwaKsap+r2MawdMJLa3D18AFYlj+LqPkLoY+xQBNugCbCAFY12J2u43vwWPAGmGMHWZ19wIblPJIPHkPnhRZ0XGjBlQN7QCkKVITdX4r+393ePgFygNGPFhWfnrAqw9x3ow23Tp1E95VLcN52oP8vB2421iujB0pkRBhlZG6W/gXw6VoeYemboTdbwKp5nNuUn/9h68WtPveAL53zQkI7nm5sHeXedHfv+Lv9pb5e1D0Zi/V7ZE8L1j8BpDW2QGAGhrLKahGp4AzxtY79voY2IEVnCq/dcn4mp7x0E55bjZmFW3zOhHypGtUvvAFZINDoVUjZug76lFyPb+X06LYyQmJ8BQ/7HGezKvp+cyIMMVpsTz+PKw0OTw5/igwtciRh/C3S/3fMiI+Rv3FXIAp+ScDYacFeLhuT2rHg0MA/gD+rnhPnZLo6zCXAIPkQ5xF/SLKAqAizrn1x7jg26dUxrnClJcMpoAxubXpyt7O3x7oD+G04yBEB3MFFsaHHxD55YdwCI7PEHo29uTcQm/8VQidN8eTvbr2IExnpgtjTTcoICQpkiQQM4E5mA0MjJ+pFIjOcwaJhLjd0UoZjRVAqElHUlQNcIIWH3QP3kuB+fe9ZgfstGPAi+r8L+cv3wBX4B9wX5+QhPM7vAAAAAElFTkSuQmCC
// @grant        GM_download
// @grant        GM_addStyle
// ==/UserScript==

(function () {
    'use strict';
    // 用于等待网页及代码全部执行完毕再执行脚本内容
    let readyState = false;
    window.onload = () => {
        let interval;
        let i = 0;
        interval = setInterval(() => {
            i++;
            if (i > 30 || readyState) {
                clearInterval(interval);
            } else {
                loadReady();
            }
        }, 1000)
    }
    // 脚本内容
    function loadReady() {
        readyState = true;
        // js
        let video = document.querySelector('video')
        if (!video) return;
        // css
        var domHead = document.getElementsByTagName('head')[0];
        var domStyle = document.createElement('style');
        domStyle.type = 'text/css';
        domStyle.rel = 'stylesheet';
        let cssStyle = `
    .recorder {
        width: 30px;
        background-color: #aaa;
        z-index: 99999;
        position: fixed;
        border: solid 1px #222;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        user-select: none;
        left: 0;
        top: 40%;
        font-size: 12px;
        color:#111;
    }

    .r-btn {
        width: 30px;
        height: 20px;
        line-height: 20px;
        background-color: #fff;
        border-radius: 2px;
        cursor: pointer;
    }

    .r-btn:hover {
        opacity: .9;
    }

    .r-div {
        text-align: center;
    }
`
        domStyle.appendChild(document.createTextNode(cssStyle));
        domHead.appendChild(domStyle);
        // html
        let domBody = document.body;
        let rbtn = document.createElement('div');
        rbtn.setAttribute('class', 'recorder');
        rbtn.innerHTML = `<div class="r-div r-btn">开始</div><div class="r-div r-time"></div>`;
        domBody.appendChild(rbtn);
        // js
        let btn = document.querySelector('.r-btn');
        btn.addEventListener('click', function () {
            if (this.innerText === '开始') {

                rstart()
            } else {

                rstop()
            }
        })
        let timeOut;
        let mediaRecorder;
        let interval;
        function rstart() {
            btn.innerText = '结束';
            // 计算时间
            let time = 0;
            let domTime = document.querySelector('.r-time');
            domTime.innerText = '0s';
            timeOut = setInterval(() => {
                time++;
                let text = `${time}s`;
                if (time > 60 && time < 3600) {
                    text = `${parseInt(time / 60)}m${time % 60}s`;
                }
                domTime.innerText = text
            }, 1000)
            // 录制
            const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
                ? "video/webm; codecs=vp9"
                : "video/webm";
            mediaRecorder = new MediaRecorder(video.captureStream(), {
                mimeType: mime
            })
            let chunks = [];
            mediaRecorder.addEventListener('stop', function () {
                btn.innerText = '开始';
                clearInterval(timeOut);
                clearInterval(interval);
                document.querySelector('.r-time').innerText = '';
                mediaRecorder = null;

                let blob = new Blob(chunks, {
                    type: chunks[0].type
                })
                let url = URL.createObjectURL(blob);
                let a = document.createElement('a');
                a.href = url;
                a.download = `${document.title}.mp4`;
                a.click();
                URL.revokeObjectURL(url);
            })

            mediaRecorder.addEventListener('dataavailable', function (e) {
                chunks.push(e.data)
            })
            mediaRecorder.start();
            interval = setInterval(() => {
                mediaRecorder.requestData();
            }, 5000)
        }
        function rstop() {
            mediaRecorder.stop();
        }
    }
})();