屏幕录制按钮

在页面右下角添加屏幕录制按钮,录制后自动下载视频

// ==UserScript==
// @name         屏幕录制按钮
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  在页面右下角添加屏幕录制按钮,录制后自动下载视频
// @author       你的名字
// @match        *://*/*
// @license MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 防止重复插入
    if (window.hasScreenRecorderButton) return;
    window.hasScreenRecorderButton = true;

    // 创建按钮
    const btn = document.createElement('button');
    btn.textContent = '开始录屏';
    btn.style.position = 'fixed';
    btn.style.right = '30px';
    btn.style.bottom = '30px';
    btn.style.zIndex = 99999;
    btn.style.padding = '12px 20px';
    btn.style.background = '#1976d2';
    btn.style.color = '#fff';
    btn.style.border = 'none';
    btn.style.borderRadius = '8px';
    btn.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
    btn.style.cursor = 'pointer';
    btn.style.fontSize = '16px';

    document.body.appendChild(btn);

    let mediaRecorder;
    let recordedChunks = [];

    btn.onclick = async function() {
        if (btn.textContent === '开始录屏') {
            try {
                const stream = await navigator.mediaDevices.getDisplayMedia({
                    video: true,
                    audio: true
                });
                recordedChunks = [];
                mediaRecorder = new MediaRecorder(stream);

                mediaRecorder.ondataavailable = function(e) {
                    if (e.data.size > 0) {
                        recordedChunks.push(e.data);
                    }
                };

                mediaRecorder.onstop = function() {
                    const blob = new Blob(recordedChunks, { type: 'video/webm' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = 'screen-recording.webm';
                    document.body.appendChild(a);
                    a.click();
                    setTimeout(() => {
                        document.body.removeChild(a);
                        URL.revokeObjectURL(url);
                    }, 100);
                };

                mediaRecorder.start();
                btn.textContent = '结束录屏';

                // 录制时关闭流后自动停止
                stream.getVideoTracks()[0].onended = () => {
                    if (mediaRecorder.state !== 'inactive') {
                        mediaRecorder.stop();
                        btn.textContent = '开始录屏';
                    }
                };
            } catch (err) {
                alert('录屏失败:' + err.message);
            }
        } else if (btn.textContent === '结束录屏') {
            if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                mediaRecorder.stop();
            }
            btn.textContent = '开始录屏';
        }
    };
})();