屏幕共享 - Godfather-twq

屏幕共享
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器录屏与播放</title>
</head>

<body>
    <!-- 开始录制按钮 -->
    <button id="startRecord">开始录制</button>
    <!-- 停止录制按钮 -->
    <button id="stopRecord" disabled>停止录制</button>
    <!-- 播放录制视频的视频元素 -->
    <video id="recordedVideo" controls autoplay style="height: 500px;width: 800px;"></video>
    <script >
        // 获取 DOM 元素
        const startRecordButton = document.getElementById('startRecord');
        const stopRecordButton = document.getElementById('stopRecord');
        const recordedVideo = document.getElementById('recordedVideo');

        // 存储录制的视频数据块
        let mediaRecorder;
        let recordedChunks = [];

        // 请求屏幕共享流
        async function getScreenStream() {
            try {
                // 请求获取屏幕和音频流
                return await navigator.mediaDevices.getDisplayMedia({
                    video: {
                        width: { ideal: 1920 },
                        height: { ideal: 1080 },
                        frameRate: { ideal: 30 }
                    },
                    audio: true
                }).then(stream => {
                    let videoTrack = stream.getVideoTracks()[0];
                    console.log(videoTrack)
                    document.getElementById('recordedVideo').srcObject = stream;

                    return stream; 
                })
            } catch (error) {
                console.error('无法获取屏幕共享流:', error);
                return null;
            }
        }

        // 开始录制
        async function startRecording() {
            const stream = await getScreenStream();
            // if (stream) {
            //     // 创建 MediaRecorder 实例
            //     mediaRecorder = new MediaRecorder(stream);

            //     // 监听数据可用事件，将数据块添加到 recordedChunks 数组
            //     mediaRecorder.ondataavailable = (event) => {
            //         if (event.data.size > 0) {
            //             recordedChunks.push(event.data);
            //         }
            //     };

            //     // 监听录制停止事件，将数据块合并成 Blob 并展示在视频元素中
            //     mediaRecorder.onstop = () => {
            //         const blob = new Blob(recordedChunks, { type: 'video/webm' });
            //         recordedChunks = [];
            //         const url = URL.createObjectURL(blob);
            //         recordedVideo.src = url;
            //     };

            //     // 开始录制
            //     mediaRecorder.start();
            //     startRecordButton.disabled = true;
            //     stopRecordButton.disabled = false;
            // }
        }

        // 停止录制
        function stopRecording() {
            if (mediaRecorder && mediaRecorder.state!== 'inactive') {
                mediaRecorder.stop();
                startRecordButton.disabled = false;
                stopRecordButton.disabled = true;
            }
        }

        // 绑定按钮事件
        startRecordButton.addEventListener('click', startRecording);
        stopRecordButton.addEventListener('click', stopRecording);


    </script>
</body>

</html>
posted on 2025-03-17 13:55 Godfather-twq 阅读(13) 评论(0) 收藏举报