js实现简易屏幕录制功能

雅望天堂i

已于 2025-02-09 18:28:36 修改

阅读量201

点赞数 2

文章标签： javascript

于 2025-02-09 16:11:05 首次发布

本文链接：https://blog.youkuaiyun.com/crystalshun/article/details/145533305

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屏幕录制</title>
    <style>
        body {
            flex-direction: column;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #button {
            margin: 20px;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <button id="button">点击开始屏幕录制</button>
    <video id="video" width="1000"></video>
</body>
<script>
    const button = document.getElementById('button');
    const video = document.getElementById('video');

    button.addEventListener("click", async function () {
        const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
        video.srcObject = stream
        video.onloadedmetadata = () => video.play()
        const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ? "video/webm; codecs=vp9" : "video/webm";
        const mR = new MediaRecorder(stream, {
            mimeType: mime 
        });
        const chunks = [];
        mR.addEventListener('dataavailable', function (e) {
            chunks.push(e.data)
        })
        mR.addEventListener('stop', function () {
            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();
        })
        //点击开始
        mR.start()
    });
</script>
</html>

js实现简易屏幕录制功能