console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>录屏工具</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #player {
            width: 500px;
            height: 300px;
        }
    </style>
</head>

<body>
    <!-- https://juejin.cn/post/6915287057795874824?utm_source=gold_browser_extension 参考地址 -->
    <button id="start">屏幕分享</button>
    <button id="record">开始录制</button>
    <button id="stop">结束录制</button>
    <button id="download">下载视频</button>
    <video autoplay playsinline id="player"></video>

    <script>
        // navigator.mediaDevices.getDisplayMedia 从桌面的媒体流获取视频
        // navigator.mediaDevices.getUserMedia 从摄像头媒体流获取视频
        let allStream;
        document.querySelector('#start').onclick = function () {
            if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
                navigator.mediaDevices.getDisplayMedia({
                    video: true,
                    audio: false
                }).then((stream) => {
                    allStream = stream;
                    document.querySelector('#player').srcObject = stream;
                }).catch((err) => {
                    console.error(err);
                })
            } else {
                alert('不支持这个特性');
            }
        }

        let buf = [];
        let mediaRecorder;

        document.querySelector('#record').onclick = function () {
            // 约束视频格式
            const options = {
                mimeType: 'video/webm;codecs=vp8'
            }
            // 判断是否是支持的mimeType格式
            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                console.error('不支持的视频格式');
                return;
            }
            try {
                mediaRecorder = new MediaRecorder(allStream, options);
                // 处理采集到的事件
                mediaRecorder.ondataavailable = function (e) {
                    if (e && e.data && e.data.size > 0) {
                        // 存储到数组中
                        buf.push(e.data);
                    }
                };
                // 开始录制
                mediaRecorder.start(10);
            } catch (e) {
                console.error(e);
            }
        }

        document.querySelector('#download').onclick = function () {
            mediaRecorder.stop();
            if (buf.length) {
                const blob = new Blob(buf, { type: 'video/webm' });
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.style.display = 'none';
                a.download = 'aaa.webm';
                a.click();
            } else {
                alert('还没有录制任何内容');
            }
        }

        document.querySelector('#stop').onclick = function () {
            if (mediaRecorder) {
                mediaRecorder.stop();
            }
        }

    </script>
</body>

</html>