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>
    <script type="text/javascript" src="https://mscjs.51vv.com/wx/m/vv-base/js/source/vconsole.v3_2_0.min.js"></script>
    <script>
        // init vConsole
        var vConsole = new VConsole();
        console.log('Hello world');
        var vv = window.vv || {}
    </script>
  </head>
  <body>
    <button>共享屏幕</button>
    <script>
      const button = document.querySelector("button");


        function getScreenStream(callback) {
            if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
                // 桌面浏览器，使用 getDisplayMedia() 获取屏幕视频流
                navigator.mediaDevices.getDisplayMedia({ video: true })
                .then((stream) => {
                    callback(stream);
                })
                .catch((error) => {
                    console.error('Error: ' + error);
                });
            } else if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                // 移动设备或不支持 getDisplayMedia() 的桌面浏览器，使用 getUserMedia() 获取屏幕视频流
                navigator.mediaDevices.getUserMedia({ video: { mediaSource: 'screen' } })
                .then((stream) => {
                    callback(stream);
                })
                .catch((error) => {
                    console.error('Error: ' + error);
                });
            } else {
                console.error('Error: getUserMedia not supported on this browser.');
            }
        }

      button.addEventListener("click", async () => {
        console.log(1);
        console.log(2,navigator.mediaDevices);

        // try {
        //     const stream = await navigator.mediaDevices.getDisplayMedia({
        //     video: true,
        //     });
        // } catch(err) {
        //     console.error("Error: " + err);
        // }
        getScreenStream((stream)=>{
            const mime = MediaRecorder.isTypeSupported("video/webm;codecs=h264")
            ? "video/webm;codecs=h264"
            : "video/webm";

            console.log(3,mime);


            const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });

            const chunks = [];
            mediaRecorder.addEventListener("dataavailable", function (e) {
                chunks.push(e.data);
            });

            mediaRecorder.addEventListener("stop", () => {
                const blob = new Blob(chunks, { type: chunks[0].type });
                const url = URL.createObjectURL(blob);
                const a = document.createElement("a");
                a.href = url;
                  a.download = "video.webm";
                  a.click();
                document.body.appendChild(a);
            });
            mediaRecorder.start();
        })

        

       
        
      });
    </script>
  </body>
</html>