无意看到一个网站居然可以捕获电脑屏幕，没想到浏览器有如此高的优先级

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Screen Capture and Recording Example</title>
    <style>
        #screenVideo, #recordedVideo {
            width: 80%;
            margin: 10px 0;
        }
        #error {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <button id="startCapture">开始屏幕捕获</button>
    <button id="stopCapture" disabled>停止捕获</button>
    <button id="startRecording" disabled>开始录制</button>
    <button id="stopRecording" disabled>停止录制</button>
    <br/>
    <video id="screenVideo" autoplay></video>
    <video id="recordedVideo" controls style="display:none;"></video>
    <p id="error"></p>

    <script>
        const startButton = document.getElementById('startCapture');
        const stopButton = document.getElementById('stopCapture');
        const startRecordingButton = document.getElementById('startRecording');
        const stopRecordingButton = document.getElementById('stopRecording');
        const screenVideo = document.getElementById('screenVideo');
        const recordedVideo = document.getElementById('recordedVideo');
        const errorElement = document.getElementById('error');

        let captureStream = null;
        let mediaRecorder = null;
        let recordedChunks = [];

        const handleError = (err) => {
            console.error('Error: ' + err);
            errorElement.textContent = 'Error: ' + err;
        };

        startButton.addEventListener('click', async () => {
            try {
                captureStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
                screenVideo.srcObject = captureStream;
                startButton.disabled = true;
                stopButton.disabled = false;
                startRecordingButton.disabled = false;
                errorElement.textContent = '';
            } catch (err) {
                handleError(err);
            }
        });

        stopButton.addEventListener('click', () => {
            let tracks = captureStream.getTracks();
            tracks.forEach(track => track.stop());
            screenVideo.srcObject = null;
            startButton.disabled = false;
            stopButton.disabled = true;
            startRecordingButton.disabled = true;
            stopRecordingButton.disabled = true;
            errorElement.textContent = '';
        });

        startRecordingButton.addEventListener('click', () => {
            recordedChunks = [];
            try {
                mediaRecorder = new MediaRecorder(captureStream);
                mediaRecorder.ondataavailable = event => {
                    if (event.data.size > 0) {
                        recordedChunks.push(event.data);
                    }
                };
                mediaRecorder.onstop = () => {
                    const blob = new Blob(recordedChunks, { type: 'video/webm' });
                    recordedVideo.src = URL.createObjectURL(blob);
                    recordedVideo.style.display = 'block';
                };
                mediaRecorder.start();
                startRecordingButton.disabled = true;
                stopRecordingButton.disabled = false;
                errorElement.textContent = '';
            } catch (err) {
                handleError(err);
            }
        });

        stopRecordingButton.addEventListener('click', () => {
            mediaRecorder.stop();
            startRecordingButton.disabled = false;
            stopRecordingButton.disabled = true;
        });
    </script>
</body>
</html>

效果如下

赏

被这风吹散的人说Ta爱的不深，被这雨淋湿的人说Ta不会冷