网页录屏(基本款)

最新推荐文章于 2023-08-21 09:20:04 发布

沈瀚

最新推荐文章于 2023-08-21 09:20:04 发布

阅读量494

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_41727824/article/details/107696105

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

不需要其他插件,只用h5的接口
体验地址:demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>屏幕录制</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }

        video {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>

<body>
    <h1>点击左侧录制按钮开始</h1>
    <button id="get-screen" style="display: block;">开始录制</button>
    <button id="stop-screen" style="display: none;">停止录制</button>
    <video id="video"></video>
    <script>

        let recordedBlobs = []
        let stream = null;
        let mediaRecorder = null;
        const preview = false;
        const video = document.getElementById('video')
        const getScreen = document.getElementById('get-screen');
        const stopScreen = document.getElementById('stop-screen');
        const options = {
            audioBitsPerSecond: 128000,
            videoBitsPerSecond: 2500000,
            mimeType: 'video/webm'
        };
        let startTime = 0;
        let endTime = 0;

        function stopReset() {
            recordedBlobs = []
            stopScreen.style.display = 'none';
            video.style.display = 'none';
            getScreen.style.display = 'inline';
        }

        stopScreen.addEventListener('click', event => {
            console.log("结束录制,录制时长:" + (new Date().getTime() - startTime) / 1000 + 's');
            stopReset();
        });
        getScreen.addEventListener('click', event => {
            navigator.mediaDevices.getDisplayMedia({ video: true ,audio: true})
                .then(stream => {
                    console.log("开始录制");
                    startTime = new Date().getTime()
                    this.stream = stream;

                    getScreen.style.display = 'none';
                    stopScreen.style.display = 'inline';

                    mediaRecorder = new MediaRecorder(stream, options);
                    mediaRecorder.ondataavailable = event => {
                        if (event.data.size > 0) {
                            console.log("结束录制,录制时长:" + (new Date().getTime() - startTime) / 1000 + 's');
                            recordedBlobs.push(event.data);
                            download();
                            stopReset();
                        }
                    };
                    mediaRecorder.start();
                    if (preview) {
                        // 是否显示预览
                        video.srcObject = stream  // 将流赋值给video标签 用于播放
                        video.onloadedmetadata = (e) => video.play()
                        const recorder = new MediaRecorder(stream) // 用于视频保存
                        recorder.ondataavailable = e => {
                            let herf = e.data
                            download.href = URL.createObjectURL(herf)
                        }
                        recorder.start()
                        stopScreen.onclick = function () {
                            video.pause()
                            recorder.stop()
                        }
                    }

                }, error => console.log(error))

        });

        function download() {
            const blob = new Blob(recordedBlobs, { type: 'video/mp4' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            document.body.appendChild(a);
            a.style.display = 'none';
            a.href = url;
            a.download = new Date() + '.mp4';
            a.click();
            window.URL.revokeObjectURL(url);
        }
    </script>
</body>

</html>

preview是否开启预览,默认关闭
体验地址:demo

沈瀚

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
网页录屏(基本款)

不需要其他插件,只用h5的接口<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>屏幕录制</title> <meta name="viewport" content="width=device-wid
复制链接

扫一扫