js浏览器录制屏幕

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <button type="button" onclick="recordScreen()">Start</button>
    <button type="button" onclick="stop()">stop</button>
    <script src='index.js'></script>
    <script>
        var recoder;
        function recordScreen() {
            navigator.mediaDevices.getDisplayMedia({ audio: true, video: true }).then(stream => {
                 recoder = new MediaRecorder(stream);
                var data = []
                recoder.ondataavailable = function (e) {
                    data.push(e.data)
                }
                recoder.onstop = function () {
                    this.stream.getTracks().forEach(track => track.stop());

                    var blob = new Blob(data, { type: this.mimeType });
                    var link = document.createElement("a")
                    link.href = URL.createObjectURL(blob)
                    link.download = new Date().getTime() + ".webm";
                    document.body.appendChild(link)
                    link.click()
                    URL.revokeObjectURL(link.href)
                    link.remove()
                }
                recoder.start()
            })
        }
        function stop() {           
            recoder.stop();
        }
    </script>
</body>

</html>

  

posted @ 2023-01-22 17:01  到此灬一游丿  阅读(62)  评论(0编辑  收藏  举报